Typography in UI Design
Typography is an important part of every design that is made.The fonts you should use should be flexible. Your font should offer a variety of weights, a wide range of special symbols and it needs to render very well not only on the retina. Good typography is “transparent” to the reader but the bad one will scream from the display. Understanding what makes letters readable gives us a better overall view on what we should look for when choosing a font for our UI. To choose the right typeface, it is fundamental to consider the context of use and the purpose of a font into the interface. You should always ask yourself: Is the font I am choosing going to be applied to headlines, body copy, links, call-to-actions or navigation? These questions will help you to apply correctly the typeface into your design.
Legibility
Legibility is the ability of the reader to distinguish letterforms when reading. Not all typefaces are created with legibility as a primary design function. The most common problem is lack of distinction between capital I and lowercase l. You need to avoid this kind of fonts because people will have problems reading them on small displays.
Web Design is 95% Typography.
X-height
The X-height is an important characteristic to take into account when evaluating a font. The fonts which work the best for body copy are the ones with a larger x-height. The taller the x-height, the more legible the typeface tends to be. It is an important rule to remember when choosing fonts for body text.
Counters
We also have white space within the letters. For example look at “o” “u” “d”. Those spaces are called counters and typographic professionals believe that more of it help us to easier recognize the letters.
Readability
This is the ability of the user to scan through your text layouts, distinguish headings texts from body text, and generally make meaning off the content of your design. Just because a font is legible doesn’t mean it’s readable. If you find yourself stopping to admire a font instead of reading the text, chances are that the font is not readable
Line height
Line height also known as leading defines the space between baselines in a block of text. A true ideal line-height doesn’t exist, because every typeface is different. Generally speaking, if users have trouble reading the font applied to a text on a website, they will consider the content of it hard to read and understand. When it comes to leading I highly suggest to use golden ratio.
Multiply your letter size by 1.618 and you will get perfect line height.
Whitespace
That’s a vast topic with many books and great publications but when it comes to typography you need to remember this one:
The basic role of white space is to reduce the amount of text visitors see all at once.
This makes our layout more scannable and it doesn’t overload us with content. White space guides our eyes through the layout and creates the feeling of order, sophistication, and elegance.
Hierarchy
The hierarchy defines how to read through the content. It tells us how to distinguish header from subheading and body text. We can achieve this by using different contrast, text sizes, paddings, margins and so on. It’s an important technique that needs to be mastered in order to achieve good readability. A successful hierarchy organises the content in digestible parts, easy to scan and accessible to the users.