Last blog was about usage of colors in the UI, you can read it here. Typography can be defined as the visual component of the written word. In the digital world typography is gaining more and more importance as it is one of the feature which can help to be distinctive in a stream.

Principles of user interface: Typography

Using right font is important as well as daunting task. Considering there are thousands of beautiful and neatly crafted typefaces available in the market, how do us designers comes down into one or two? That is what we are going to discuss here.

No Serifs

Typography - serif and san serif

Serifs are for print. They looks better in print materials. In digital screen serif typefaces are unnatural and not really a visual treat. Which is why we have san-serif typefaces which is digital adaptation of serif typefaces. How do we know what is serif and what is not? Serif typefaces will have a small decorative line added as embellishment to the basic form of a character. San-serif is those typefaces without serifs. Most common serif typeface is Times New Roman and most common san serif typeface is Helvetica.

Perfect combos

Google font pair example

Google font pair example

Pairing font is an art. In UI it is best to use a pair of fonts for heading and paragraph respectively. Using two distinct font for heading and paragraph helps you to set visual hierarchy.

What to save time? Go to, it is a database of font pairs with google fonts.


visual hierarchy in typography

Visual hierarchy is important in typography because it helps you to decide what the user sees first. Which is why we differentiate the lines with tags like H1, H2, H3 etc. to establish visual hierarchy in typography is to maintain the balance without obstructing the reading pattern. Also sometimes breaking visual hierarchy is also helpful. You can read more about Visual hierarchy here


Readability of typefaces

Legibility of fonts should be maintained if you want to communicate the idea. Make sure the spacing, kerning and font style is optimal and legible. Above image have same text, same size same kerning but different typefaces, you can see for yourself why gothics and san-serifs rocks in digital world.


drop box plans - highlighters example

Using highlighters to highlight links and important texts are legit practice. But over doing it will affect the visual hierarchy. Don’t do it unless it is absolute necessary and only if it doesn’t meddle with visual balance.

Not sure what to do? Use gothic

gothic font sets example

Here is an ultimate tip. When in doubt, use gothic typefaces. These are automatically best for digital screens. They are made for it. Gothic type faces are initially used to describe the new typeset with graceful geometric looks because it looked like ancient roman letterings. Century gothic for example.

Gothic fonts are one of the most sought after design asset in the digital age because of its legibility and readability in almost any sizes.

Want some more? Here is a short but in-depth walkthrough of typography and its importance, you can read it here