UX Typography Tips

Here are some ideas, tips for designing, and resources for learning more about Typography. This guide is constantly being updated and improved thanks to your feedback. Leave a comment below if you want to make a contribution, or if you found this guide helpful. Thanks!

1) Size of font is important- Larger Sized Font= more noticeable. Also, size of font should be large enough to read comfortably (eye health and vision are important considerations). I mostly prefer 16pt as a base-line font size, because it’s a comfortable size to read on different devices. You shouldn’t really go under 14pt for most fonts unless it’s for a minor element in your UI.  If you’re designing for Android, or you’re confused about pixels vs points (pt) (no, points are not just for printing design), I recommend reading this article about screen resolution.

2) But how big to make the header font? Often times designers have a hard time figuring out whether to size their header fonts much larger or only slightly larger than the main content’s font. There are a lot of opinions on this, but basically most will agree to disagree and give some ratio that they prefer – I’ve heard anything from header font being the same size to it being the golden ratio of 1.618x the size of the paragraphs font. The truth is that it depends on the application.

2) Bold Font=more noticeable , Italic font= saves space. Font “weight” can also change incrementally what “bold” does.

2) Serif vs Sans Serif Fonts. These are the two main categories of fonts. But which one is more readable? Serif feels more similar to authentic handwriting and Sans Serif does a great job at being minimalist and attention calling. No one has proven that one or the other is definitively better for readability**. However, for long paragraphs you want to choose a font that is simple and easy to read.

**Google and IBM funded a research study on this , and the results are as follows: “For font type, our study of serif vs. san serif yielded no significant differences in the eye tracking or retention metrics. There was a 7.9% advantage in 1st-pass speed for the serif font, but the difference was not significant. ”

3) Picking specific fonts- there are so many to choose from but there are two main categories of “Serif” & “Sans Serif”. Think of serif as the little fancy embellishments you see on fonts, and sans means “none”, so sans serif = no fancy embellishments. When choosing a font just go with personal preference or copy it from a popular source that you like (chances are they thought it through). Some advanced things to consider are font compatibility with different interfaces- this can vary what your font will look like on a device that doesn’t have your exact font available. For this reason and others, I really like the following fonts:

  • Great Sans Serif fonts : Arial, Lato, Roboto, Open Sans, Avenir Next, Proxima Nova, Hind, Helvetica, Poppins.
  • Great Serif fonts : Georgia, Playfair Display (whimsical) **I need help to add more here :)**

4) Kerning- used to adjust the spacing between characters (letters)

5) Resource for further learning: https://www.coursera.org/learn/typography

Privacy Preference Center