From a design perspective, why did the iPhone use Small Caps in its name this year?

From a design perspective, why did the iPhone use Small Caps in its name this year?

Table of contents

  • What are Small Caps?
  • How were iPhone names written before 2018?
  • Why does this generation of iPhone use Small Caps?
  • How to Play Small Caps
  • Conclusion

In September, Apple released three iPhones at once, namely iPhone XS, iPhone XS Max and iPhone XR. Not only are there more models, but the naming logic has also changed slightly. The S and R also use Small Caps, which can be said to be the most difficult iPhone name to write correctly.


How to write the three new iPhones in 2018

That is to say, the S and R after iPhone X look like capital letters, but they are only the size of lowercase letters. You may be a little confused, it doesn’t matter, even Apple has made the mistake:


Comparison of the iOS 12 page on Apple's official website before (left) and after (right) the changes

Next, let’s learn how to write the name of the new iPhone and explore the reasons behind Apple’s use of Small Caps.

What are Small Caps?

After talking about Small Caps for so long, it is time to introduce them in detail. Small capital letters (Small Capitals in English, referred to as Small Caps) are a type of character form in Western font design. Small Caps have the shape of capital letters, but generally the size is the same as lowercase letters. In some fonts, Small Caps may be slightly higher than the x-height. You can think of Small Caps as the "third party" between capital letters and lowercase letters.


Comparison of several character forms

Many American magazines usually use Small Caps when using abbreviations, such as "NATO". In addition, the era name "BC" is also often written in Small Caps.

Obviously, the naming of iPhone does not belong to the above situation. After all, the layout is for the content. It seems that to understand why iPhone XR uses Small Caps, we must first understand the logic of iPhone naming.

How were iPhone names written before 2018?


iPhone naming from 2007 to 2017

Note: Since "Plus" and "Max" are words, and they are all written with the first letter capitalized, we will leave these two words aside for now and only observe the naming logic of numbers and letters.

From the list, we can see that before the release of the new three iPhones, there were two ways to write the letters in the names of previous iPhones:

  • Uppercase: such as 4S, 3GS, SE
  • Lowercase: such as 5c, 5s, 6s

Summarizing these three ways, we can find the naming rule of iPhone: when naming a combination of "numbers + letters", the letters are all lowercase. However, this rule does not apply to iPhone 3GS, iPhone 4S and iPhone SE, which all use uppercase letters.

But considering the meaning behind the name, capitalization makes sense. For example, SE is probably an abbreviation for the phrase "Special Edition"; the 3G in 3GS refers to support for 3G networks, and it just happens to contain the number 3. So there is a reason why iPhone SE and iPhone 3GS are capitalized.

The only one that doesn't make sense is the iPhone 4S, which is the only name with numbers and letters in uppercase. But what's interesting is that there are no uppercase letters after the iPhone 4S, and all uppercase letters were used before the iPhone 4S. Although the specific reason is unknown, it is speculated that it is very likely that Apple decided to change the letters in the iPhone name to lowercase after the iPhone 4S.

From a design perspective, the lowercase s is more suitable for the iPhone's iteration strategy (increasing numbers means big updates, increasing S means small updates). Because the uppercase S and the numbers have the same height, the numbers and letters are on the same level, and the distance between the numbers and letters is closer than the distance between the numbers and "iPhone", the visual logic becomes "this is a 4S model iPhone", rather than "this is an upgraded version of the fourth generation iPhone" as Apple wants to say.


The difference between the visual hierarchy and logic of iPhone 4s and iPhone 4S

Having said that, based on the naming habits of the iPhone over the past decade, uppercase "iPhone XS" and "iPhone XR" or lowercase "iPhone Xs" and "iPhone Xr" would work. But what exactly made Apple not use uppercase letters or be satisfied with lowercase letters, but choose Small Caps as a compromise?

Why does this generation of iPhone use Small Caps?

After learning so much knowledge, it is finally time to reveal the answer. First, I have to tell you one good news, one bad news, and one good news.

The bad news is that Apple didn’t explain why it used Small Caps, or even what the R means, so we can’t come up with the only correct answer and can only make guesses and analyses from a design perspective. The good news is that even if we can’t have the only correct answer, the correct answer must be among them.

To emphasize iPhone X

In the press conference slides and official website, the S is usually placed in a frame, and this is the case for every S model and even the C model. This is to better distinguish the normal model from the S model visually.


Frames make the visual hierarchy clearer

But boxes can’t be used everywhere. In the past, Apple would use lowercase when boxes couldn’t be used, and the effect was similar. But this time, Apple is much stricter, and even in places where boxes can’t be used, Small Caps must be used stubbornly!

This means that Apple hopes to use Small Caps to achieve the same effect as frames: to clearly separate the visual hierarchy, emphasize the iPhone X, and make people think that this is "a certain version of the iPhone X" rather than "an XS or XR model of iPhone."


Box, SmallCaps and uppercase letters

Apple is emphasizing "iPhone X" so much probably because last year's iPhone X overturned the numerical naming of the past nine years and switched to a naming method that looks like the letter X but actually means 10. In order to consolidate consumers' memory of the new name iPhone X, it emphasizes iPhone X.

To take care of the new R product line

Consumers are already very familiar with the iPhone S series. S stands for a slightly updated version of a brand new iPhone, usually with no changes in appearance, but mainly hardware improvements. This naming method has even had an impact on the mobile phone industry. Xiaomi, OPPO and other manufacturers also use the method of adding S to the original product name to name new products. It has become a kind of "industry language."


Adding S has become the industry language

But the R series is a brand new product series, and consumers have no idea about it. At this time, the capital letter R is a big help. Since r is visually smaller than R and the strokes are too simple, it will look very weak when placed next to a letter like X that has a clear structure and area, and the difference between iPhone Xr and iPhone X cannot be shown.


The lowercase r looks very small behind the X

So to cater to this new R series, Apple used a capital R, but since we have already found that "iPhone XR" is not a good choice, it used the Small Caps version of R, writing "iPhone XR". iPhone XS was also unified as "iPhone XS", after all, for the letter S, there is almost no difference between lowercase and Small Caps.

In summary, this is my answer from a design perspective to the question of why this year's iPhone uses Small Caps. In this case, using Small Caps seems to be the only choice for naming the iPhone. In other words, if this generation of iPhone is called "iPhone 10s" or there is no new series of iPhone XR, it is very likely that the Small Caps solution will not be used.

Although we are speaking from a design perspective, we have talked a lot about the iPhone product strategy. This is also a manifestation of "typography serves content". In this context, "content" is the iPhone's product strategy and business layout; and "typography" is the issue of how to arrange uppercase and lowercase letters.

However, such a clever arrangement of uppercase and lowercase letters has caused trouble for some technology editors, as it is not easy to type the name of the new iPhone correctly.

Note: The Minority website currently uses Apple's approach in a plain text environment, which is to uniformly write S and R in uppercase.

How to Play Small Caps

Although Small Caps can be displayed normally on our devices, it is still difficult to type them. Since Small Caps are so rare, various system input methods do not have related functions. If you want to type Small Caps, you need to use these tools:

Word, PowerPoint, and Pages


Microsoft Word

In Microsoft Word and Microsoft PowerPoint, you can convert text to Small Caps by selecting the text and then opening the "Format - Font" window in the menu bar and checking "Small Caps". In Word 2016 for Mac, you can use the ⇧Shift-⌘Command-K key combination to convert the selected text to Small Caps.


Pages

It is similar in Pages. After selecting the text to be converted, select "Small Caps" in "Format - Font - Uppercase" in the menu bar.

For Pages and Word, successfully using Small Caps depends on whether the font you choose is compatible.

Webpage CSS Style

In the field of front-end development, all content and styles are lines of code. So in the editor of the website backend that supports HTML editing, you can use CSS to implement Small Caps. For example:

  1. <p>iPhone X<span style= "font-variant-caps: all-small-caps" >S</span></p>

iPhone XS

This code contains a normal iPhone X and an S specified as Small Caps in a paragraph. When using this method, you must also ensure that the font you are using is compatible with Small Caps.

If you paste the above code into Weibo, WeChat or the browser search box, it will be useless. This method is more targeted at professional content publishers. We rarely have access to input boxes that support HTML editing.

Design software such as Photoshop, InDesign, etc.


Photoshop

In professional design software such as Photoshop and InDesign, it is not difficult to type Small Caps. When setting the font, font size and font weight, there will be a Small Caps switch, just click it. However, such a convenient setting also has certain disadvantages. These professional software already have the function of simulating Small Caps. If the font does not contain the Small Caps font, it will be simulated by reducing the uppercase letters. Although the simulated Small Caps do not look like a big problem, they are actually fake Small Caps.

Real or fake Small Caps

Small Caps also exist in the form of glyphs in font files, which means that in addition to 26 uppercase letters, there should be 26 lowercase letters and 26 Small Caps. However, since the characteristics of Small Caps are "the appearance of uppercase letters and the size of lowercase letters", it is easy to simulate them by making the uppercase letters smaller. Therefore, many software provide simulation functions, such as the Small Caps switch in Photoshop. If the font does not contain the Small Caps font, it will be simulated by software.


Real Small Caps (blue) and Fake Small Caps (red) of Helvetica Neue font

But real Small Caps are not obtained in such a rough way. We have said in the design tutorial that the design of the font will be affected by its function, weight and even size. The font design of Small Caps is not as simple as directly reducing it. There are also methods such as default widening of the spacing and bolding of the font, which will be better than the Small Caps simulated by reducing the uppercase letters (from the comparison in the above picture, it can be seen that the real Small Caps are obviously tightened at the junction of the letters X and Y). Therefore, there is a saying of real and fake Small Caps. The Small Caps that exist in the font are called real Small Caps, and the simulated ones are called fake Small Caps.

Conclusion

It takes a lot of effort to write the name of iPhone correctly. In fact, we don't see Small Caps very often in daily life, and writing Small Caps doesn't make much sense. Even Apple uses all-caps when writing in plain text. This article shows us that such a small design detail can hide a lot of mysteries; simple uppercase and lowercase settings can also cause semantic and logical differences; Small Caps, which have never been seen before, also make sense and logic from a design perspective.

***, Small Caps is just the tip of the iceberg of many typography knowledge. If you want to know more basic knowledge of graphic design, you can subscribe to the tutorial "Know a Little More About Design Than the People Around You". You will learn techniques to improve your aesthetics, as well as master the knowledge of fonts, colors, and typography in practical applications, and understand more principles behind the design.

<<:  Google calls on Apple: Stop secretly modifying user security recommendations

>>:  A major upgrade? iPhone XS has so many problems

Recommend

My thoughts after reading two articles about database, MVC and React

[[145451]] Two articles I read two articles today...

Changsha tea tasting tea arrangement

Content: Changsha new tea arrangement appointment...

Thinking Upgrade-How to Upgrade Thinking Model to Pursue Compound Interest Life

Thinking Upgrade - How to Upgrade Thinking Models...

Coughing in the spring? Experts: Beware of "asthma without wheezing"

As spring approaches, the number of patients in t...

Short video promotion: How to quickly attract users and achieve conversions?

In the era of content consumption, short videos h...

The past and present of the "Xiangyanghong 09" ship

An old ship with a service life of more than 40 y...

The latest guide to advertising after consumption upgrade!

When placing advertisements, many advertisers pre...