Published in · 6 min read · Feb 21, 2018
The composition of what you design tends to be 80% typography. It becomes even more critical for a designer to have some understanding of typography that enables him/her to choose typography that complements the design and enhances it.
Typography terms and what they mean is important to be learned to understand the anatomy of a Typeface. These terms are used universally to explain typography and the properties that distinguish one typeface from another and the character each of them bring. To start with, the terms you should pick up as a beginner from the image below are Ascender line, Descender line, Baseline, Leading and X-height.
We are at a time when the majority of us read on the web or/and on our mobile devices. The great thing is that these five rules for great typography can be applied to print as well as digital interfaces. Great typography makes the reading experience enjoyable, making the reader want to read more and read effortlessly, which implies that typography choices should aim for utility.
This is the new default font for iOS, prior to this Helvetica Neue was the default font. You can download this font here. This font has been designed for utility, to ensure that the text content is optimally legible, its worth mentioning that Apple designed this font in-house. This video dives deeper into the features of the SF font.
Based on the size of the font, iOS automatically adjusts the tracking value and switches between the Text and Display variants of the SF font. When the font size is 20 pt or more SF UI Display is to be used and if the font size is less than 10 pt SF UI Text should be used.
The size of your fonts when designing for iOS should be no less than 11 pts to maintain legibility on the iPhone, iPad and Apple Watch. This is the minimum value of the font size, however, you will find that the ideal value lies in the range of 15–19 pt.
When using any modern font such as SF, Proxima Nova or Museo you will find they come with several weight options such as Thin, Ultralight, Medium, Semibold, Bold, Heavy and Regular. Font size and weight complement each other. It is useful to keep in mind that at 11–19 pt use the Regular weight, at 20–34 pt use Medium and at 34 pt or more use Bold. You can also use the Light and Ultralight variants when the font size is very large since the large size of the font maintains legibility at these weights, however, it is important to keep in mind that larger titles in iOS 11 are generally Bolder.
Ideally, the line height should be in the range of 120%-145% of the font size. A line height that is less than that makes the text look cramped and harder to read. When the line-height lies in the ideal range each line of text has its own space and room to breathe and everything becomes greatly legible.
Human beings read text that is more vertical faster than text that is more horizontal and has a lot of characters per line. When the line is too long the reader experiences cognitive load because he/she needs to focus on each word horizontally. This can cause reading fatigue. Ideally, there should be 45–90 characters per line to maintain a fluid reading experience.
It is beneficial to communicate the hierarchy and interactions through your typeface. Use a bold large size font for headings, a grey color Medium weight 14–15 pt text for captions. Use reduced opacity for text that does not convey primary information.
Serif fonts have small protruding features that the sans-serif font does not have. They are both good choices based on what kind of app it is. A serif font is more commonly used in apps that engage the user with a lot of reading such as Medium, iBooks, Bloomberg and The New York Times.
Sans-serif fonts are more widely used since they are a neutral and safer choice. You will see sans-serif fonts in majority apps on the App Store.
Fonts are generally very expensive, here are a couple of resources where you can get some excellent free fonts that would work well in any design.
Google Fonts
With a beautiful interface for you to go over the catalog of fonts available Google Fonts has an amazing selection of fonts for almost every style imaginable. You can download the font files and place them in your Xcode project folder to use them.
SkyFonts for Mac is a great application that lets you synchronise all your font files to your Desktop. If you want to download every single font available on Google fonts you can do that from this Github repo.
Typekit
Typekit has a big collection of free and paid fonts that are part of the Adobe Creative Cloud subscription. Some great fonts on here are Proxima Nova and Museo.
Fontstand
This is a great service that lets you try fonts for 60 minutes before you decide to purchase them. Alternatively, you can rent the fonts for a fraction of the price it would cost to outright buy them for a monthly fee.
Typography, of course, is not limited to an iOS app, the principles extend to all contexts where a human being needs to read typography.
Typography Guide
This guide can tell you more about how to combine typefaces, apostrophes, quotes, parenthesis etc
A Five Minute Guide To Better Typography
A joyful experience with animated segments that talk about every single aspect of typography in a way that will leave you with a smile on your face. Highly recommended.
Pairing Fonts
You will eventually find yourself wanting to create typographic hierarchy and contrast through the use of more than one font. This guide is really helpful in giving you a perspective that lets you pick font pairings in a much better way.
