Juan R Labrada

Note Details
OVERLINE
How to select a font

Selecting a font is a core design task.

Questions for selecting a font:
Is it for header, body text, or an accent font?
Is it for desktop, mobile, or print?
The font’s designer, Jan Fromm, writes that “rounded shapes and soft curves” leave the reader with an “overall impression of warmth and smoothness.”
First choice (no time to think):

  • Helvetica, Arial, Sans-serif
  • 18px pc, 20px mobile.
    body {
    font-family: Sans-Serif;
    }

Does my design require many typefaces?

In order to make your design interesting, you need to contrast a few things.
You could contrast:

  • Typeface
  • Font size
  • Color
  • Capital case
    For example:
    cnn.com only uses one typeface: CNN, using Helvetica and sans-serif as fallbacks fonts. The only word with a different typeface is CNN itself.
    foxnews.com goes even further and uses the free and common Roboto for everything.
    A different approach can be seen in ft.com, it uses two fonts. One with serif(Financer web) for headers and the other sans-serif for text body, this to give a feeling of a newspaper while keeping the readability at the same time.
Rate this note
Comment
Comments
Back to Notes