What font is used in iOS. How to choose fonts for an iOS application
Every Apple ad is a work of art. Dozens, or even hundreds of photographs are created just to make the advertised product look so that you want to touch, try and buy it. But photographs are not all that is required for a successful advertising campaign. Another key to success is fonts, which we want to tell you about today.
Corporate identity
For all of the advertising on Apple.com, even the shiny lettering on the box of your new iGadget, Apple uses a variant of the Myriad font, called Myriad Pro SemiBold. Myriad, a sans serif font, was originally created in 1992 by Adobe. Today, this font is used not only by Apple, but also by Google (for example, the last three letters of the word “Gmail”), LinkedIn, Rolls-Royce and Walmart. The Apple company itself began using Myriad in 2002.
Until 2002, Apple used a modified version of the Garamond font almost everywhere. This variant was called Apple Garamond and is perhaps best remembered for Apple's famous "Think Different" advertising campaign. It was also used for all signs, plaques, and markings on Apple's Cupertino campus building (all lettering has now been redesigned to use the Myriad font). Garamond was introduced alongside the original Mac in 1984. But until 1984, Apple used the Motter Tektura font, which was used for all of its products. Motter Tektura was also used for many years to create the Reebok logo.
But the marketing materials have text that is too small to use Myriad, so they use Helvetica Nueu.
Keyboards
Apple uses the VAG Rounded font for all of its physical keyboards. If you're reading this article on an iMac or any MacBook model, look down at the keys and you'll see VAG Rounded. The font was originally developed specifically for use by Volkswagen and was recognized for its distinct and rounded ends. VAG Rounded debuted on Apple keyboards in 1999 and it happened on the keyboard original laptop iBook. After that, Apple began using this font for the keyboard on all of its laptops, but Mac keyboards only joined the use of VAG Rounded in 2007.
Before using the VAG Rounded font on Apple keyboards, the Univers variant was used, or, to be more precise, Univers 57. Those users who have long been familiar with Apple computers, most likely remember this font for its slender and slanted appearance.
User Interfaces
In all versions of Mac OS X, Apple used the Lucida Grande font to create user interface elements. The Lucida font family dates back to 1985 and is currently used as the primary font for text documents and on many websites. This prevalence is due to the easy readability of the text. By the way, this font is used for its logo social network Facebook.
But on its iOS devices, Apple uses the Helvetica font for all user interface elements, including application names, menus, and the virtual keyboard. And for iOS devices with Retina display, namely iPhone 4, new iPad- a sharper and clearer version of the font is used - Helvetica Neue.
Based on materials from www.applegazette.com
Now, perhaps for the first time since the very first Macintosh, it makes sense to become interested in using system fonts for the interface. They're a fun and fresh alternative to web typography - and they don't require hosting on your server or a third party's. How can I use system fonts on a website and what problems might arise here?
In recent years, many interesting system fonts for the interface have appeared. Google released Roboto(and continues to develop this font with regular updates), Apple released San Francisco, and designer Eric Spiekerman created the Fira Sans font for Mozilla. And that's not all, don't forget about Microsoft. They were the ones who started this trend by releasing Windows Phone with designer Metro language, strongly tied to typography in general and the Segoe font in particular.
It's no surprise that the idea of using these fonts on the web is gaining popularity. Maybe you want to emphasize the difference between content and user interface, maybe you want to make your site look like an app, or you just want to use beautiful fonts without any lag.
But their use is not as easy as we would like. The CSS support for these fonts is a bit psychedelic.
Note: “system interface font” is a font used to render the operating system interface - it should not be confused with system fonts, that is, fonts installed on the user's system.
Two approaches
There are currently two ways to use the system interface font in typography.
First way
It consists of using a short “magic” CSS declaration:
Font: menu;
Second way
The second way is to list the names of all fonts:
It also has disadvantages:
Other options
You might find it interesting to combine both of the above approaches to achieve better results. Alas, this is not easy because the font and font-family properties are mutually exclusive - one always overwrites the other. It is possible that something can be achieved by manipulating media queries, but this method is a hack.
You can also try sending different meanings CSS from server depending on user agent or do the same with using JavaScript(for example, send only font-family: "Fira Sans", sans-serif; for Firefox OS). But this option is cumbersome, difficult to support, and, most importantly, it does not solve all problems.
What to do now?
Medium currently uses the second method:
Font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif ;
It was chosen because it has fewer major problems. (The first method does not work on mobile devices, with completely unacceptable consequences; There are also problems with the second method, but there are fewer of them and they are not so critical. Your assessment of these methods may be different).
We can improve this technique through joint efforts. Below is a block with text that should be displayed in the interface font of your system. If it doesn't work or you have any thoughts about it, please leave a comment.
This should be rendered in your system’s UI font. The quick brown fox jumps over the lazy dog. This text should be displayed in the system interface font.
Detailed overview of the font list
Currently this method has the following problems:
- Until at least December 2015, Firefox on Mac OS X will use Neue Helvetica instead of San Francisco.
- Also on Mac OS X, Neue Helvetica is displayed instead of Lucida Grande on versions before Yosemite.
- In less popular operating systems and more complex configurations, choosing the right font is even more difficult.
If you're interested in the details, let's look at what this list should look like to work correctly:
Font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif ;
The first group contains properties that refer to system interface fonts. They are quite reliable and there is no chance that the browser will confuse them with others:
- -apple-system covers San Francisco in Safari on Mac OS X and iOS, and on older versions of Mac OS X Neue Helvetica and Lucida Grande. This value automatically selects between San Francisco Text and San Francisco Display depending on the font size.
- BlinkMacSystemFont is the equivalent of the previous value and works in Chrome on Mac OS X.
The following group highlights well-known system interface fonts:
- Segoe UI covers Windows and Windows Phone.
- Roboto is Android and the new Chrome OS. It is positioned after Segoe UI to accommodate Android developers running on Windows with Roboto installed, so that Roboto does not replace Segoe UI.
- Oxygen is a KDE font, Ubuntu is, of course, Ubuntu, and Cantarell is GNOME. Three fonts for Linux at once, but given the abundance of distribution kits, they do not solve the problem.
- Fira Sans font Firefox OS.
- Droid Sans - old versions of Android.
- Note that we are not specifying the San Francisco font name. On iOS and Mac OS X, San Francisco appears as a “hidden font” rather than a public font.
- And we also don't specify San Francisco, using .SFNSText-Regular, the internal PostScript name for San Francisco on Mac OS X. It only works in Chrome and is less flexible than BlinkMacSystemFont.
In the third group we have fonts used as fallbacks:
- Helvetica Neue is used in Mac OS X before El Capitan. The font is listed at the very end of the list due to its widespread use.
- sans-serif is the traditional fallback to the default sans-serif font.
The evolution of system interface fonts on Windows is more dramatic than on Mac - from monospaced bitmap Windows font 1.0 in 1985 to high resolution font Segoe UI in Windows 10. (larger version)
Future
There is still something to work with here. Let's start with the fact that the technique only works with Western typography. You'll also have problems if you want to align padding or line height to match the interface font you're using - in which case you'll have to use a hybrid approach or detect fonts after rendering.
But still, the results obtained are good. Hopefully this will all be less complicated in the future. If you're interested in this too, please let your browser vendors know.
Last three Mac versions OS X uses three different interface fonts: Lucida Grande on Mac OS 10.9 (Mavericks); special version of Neue Helvetica on Mac OS 10.10 (Yosemite); special version of San Francisco on Mac OS 10.11 (El Capitan). It is logical to assume that San Francisco will be used in future versions. (
Apple has used the Helvetica font set as the system font for iOS since release first iPhone. They also replaced Lucida Grande in Mac OS X starting with version 10.10 Yosemite. So why has Apple now decided to get rid of the world's most beloved font?
iOS 9 is now officially available to everyone, and a new font family called San Francisco has subtly replaced Helvetica Neue.
Helvetica (left) and San Francisco (right)
By this time they had already been used in Apple Watch. Now San Francisco has become a single standard font for all platform products: Apple Watch, iPhone, iPad and Mac.
Apple has used the Helvetica family as the system font for iOS since the release of the first iPhone. They also replaced Lucida Grande in Mac OS X starting with version 10.10 Yosemite. So why has Apple now decided to get rid of the world's most beloved font?
Small sizes are Helvetica's weak point
There is an opinion that Helvetica is not suitable for small texts. When Helvetica replaced the previous family in Mac OS X Yosemite, many designers found the replacement unsuitable.
“Helvetica sucks” from Erik Spiekermann's blog.
You can verify the low readability of Helvetica as follows. Type small text and blur it. Some of its fragments will be “mixed” so that it becomes difficult to make out their contents. They say Apple developed the San Francisco family precisely to make small text on the Apple Watch more legible.
However, the resolution of modern smart devices exceeds the resolution of printed publications, and texts in the iPhone are not always as small as in the Apple Watch. Why then did Apple make a replacement not only in the Apple Watch, but also in iOS and Mac OS X?
San Francisco - diverse
San Francisco fonts have many features that make them easy to read. In fact, the San Francisco version for Apple Watch and the version for iOS/Mac are two different fonts.A font family called “SF” is used for iOS/Mac, while the Apple Watch uses “SF Compact”. You can see the difference in rounded letters such as 'o' and 'e'. The vertical lines of the SF Compact are made flatter than those of the SF.
This difference causes text typed with SF Compact to have more space between characters, resulting in text that is more legible when read on small devices such as the Apple Watch.
In addition to this, each of the families is divided into two more subfamilies: “Text” and “Display”. Apple calls this “Optical Sizes”. The Text subfamily is designed for small-sized texts, while the Display subfamily is for large-sized texts.
San Francisco font family
As mentioned above, in sans serif (or sans serif) fonts such as Helvetica, two adjacent letters "blend" and letters such as 'a', 'e', 's' become very similar to each other at small text sizes .
Comparison of indents between characters in fonts of the Display and Text subfamilies
Comparison of fonts of the Display and Text subfamilies using the example of a single character
The Text subfamily, however, is designed in such a way that the indents between characters in it are increased compared to the characters in the Display subfamily, and the gaps in them are expanded to improve readability with small text sizes.
San Francisco is dynamic
One of the great things about San Francisco is that the headset is dynamically optimized. Display and Text replace each other according to the size of the displayed text. The threshold here is set to 20pt.
Designers and engineers don't have to worry about choosing the right option from the family. We just add the system font to the UILabel, for example. The system itself will determine which headset you need.
However, what's truly impressive about San Francisco fonts is how they display colons. Usually in other fonts we see it right above the bottom line, so in cases where it is located between numbers, the colon is not vertically centered. However, in San Francisco fonts, this alignment occurs automatically.
Automatically align colon vertically to center
San Francisco came to us from the digital age
As you can see, San Francisco fonts are designed and designed to make text of any size and on any device easy to read.Helvetica, which they replaced, was created in Switzerland in 1957, when no digital devices. It is, however, still used by many companies as a corporate font, and will no doubt continue to be used in the future as a good classic font.
San Francisco, on the contrary, is a modern font. His typeface changes dynamically, according to the context. It can be called a kind of “native font” of the digital age.
Helvetica (left), San Francisco (right)
The San Francisco font has already been used in the Apple Watch, and it has already become the standard font for Apple devices: Apple Watch, iPhone, iPad and Mac.
Apple Watch
Apple has used Helvetica as the system font for iOS since the introduction of the first iPhone. And on Mac OS X they changed the font from Lucida Grande to Helvetica since the release of 10.10 Yosemite. Why did Apple decide to bury Helvetica, the most famous and beloved font in the world?
In small forms Helvetica is weak
They say that Helvetica is not suitable for texts in small font size. When the system font in Mac OS X Yosemite was changed to Helvetica, many designers stated that such a font was not at all appropriate here.
"Helvetica sucks" Erik Spiekermann
When you type text in a small font size, Helvetica's low legibility becomes visible. Helvetica blurs such text. Some texts are mixed and difficult to understand. Many people say that Apple created the San Francisco fonts to make small text on the Apple Watch more readable.
Letters are mixed in small size texts
But today, the resolution of device screens is higher than that of printed materials, and texts in iPhones are not always as small as in the Apple Watch. Why did Apple change the system fonts not only in the Apple Watch, but also in iOS and Mac OS X.
San Francisco is not just one font
San Francisco fonts have many features that make them highly readable. In fact San Francisco fonts for Apple Watch and for iOS/Mac are two fonts with slight differences.
The font family called "SF" is used for iOS/Mac, and "SF Compact" is used for Apple Watch. You can notice the difference in the rounded letters o, e. The SF compact has flatter vertical lines than the SF.
SF and SF Compact
This difference gives texts in SF Compact a larger margin (indentation) between letters, resulting in greater readability on small devices like the Apple Watch.
In addition, the SF and SF Compact fonts are divided into two subfamilies: “Text” and “Display”. This is what Apple calls “Optical Sizes”. “Text” is intended for texts in a smaller size, and “Display” for texts in a larger size.
San Francisco Family
As I mentioned above, when using sans-serif fonts like Helvetica, two adjacent letters “mix”, and letters like “a”, “c”, “s” in a small size look similar.
Display and Text fonts
The “Text” subfamily has more margins than the “Display” subfamily. And the apertures of these text fonts are also wider, so that small point sizes are more legible.
San Francisco fonts are dynamic
One of the great things about San Francisco is how it dynamically optimizes typefaces. The system automatically switches Display/Text font depending on the text size. The threshold value is 20pt.
Designers and specialists no longer need to rack their brains about which font to choose. For example, just add the system font to the UILabel, and the device will select the appropriate style for you.
What strikes me about the San Francisco fonts is the way the colons are displayed. Basically, the colon is placed directly above the line of the font, so it is not vertically centered if it appears between numbers. And in San Francisco fonts, colons are aligned automatically.
Vertically centered colon
San Francisco - Digital Age Font
As you can see, San Francisco fonts were carefully designed to be easy to read in any size and on any device.
Helvetica, which was replaced by San Francisco fonts, was created in Switzerland in 1957, when there were no digital devices yet. Helvetica is widely used by many companies as a corporate font even now, and there is no doubt that it will continue to be used in the future as a quality classic font.
On the other hand, San Francisco is a modern font. It dynamically changes styles according to the context. This is something like a “native” font, as if specially created for the approaching digital era.
