Choosing Fonts, Designing Web Text for Beginners

If you’re new to design, this article will teach you the basics of fonts. If you’re a full-time designer, you already know a lot of this stuff, but you may see something new here.

There are many “places” to use fonts. Headlines, headers, sub headers, paragraphs, call to action buttons (and logos, but we’re not talking logo design.) All have different purposes but the first and most important of the criteria to consider is “readability.”

Consider these:

  • Can this font be read without additional eyestrain by the viewer?
  • Can this font be bigger? Maybe I’m old but who likes tiny fonts?
  • Can this font be darker? Hey designers, stop using super light grays.

Factors that make up text design:

  • Font-family: niveau-grotesk, Arial, Helvetica, etc.
  • Font-weight: bold, thin, normal, thick.
  • Font-style: italic, underlined, etc.
  • Font-color: black, gray.
  • Line-height: the spacing in between the lines of copy, also called “leading.”
  • Word spacing: spacing between words.
  • Letter spacing: spacing, also called “tracking” or “kerning.”
  • Padding and Margin: the space between objects.
  • Justification: alignment (center, right, left or fully justified.)

Establish the Visual Importance

Styling a font section starts with finding the visual importance of each string of data being displayed. A headline is more important than a sub header and so visually it should be more dominant over other things less vital to a viewer’s interaction.

Visual Dominance

Adding visual dominance is done by enlarging a font size, adding font-weight (bolding), and making the color of the words brighter or darker depending on the overall design. Even spacing the text section apart can give it more visual dominance. The more eye catching a string of text is, the more visual dominance and importance you’ve given it.

Remember: when you bold and enlarge “everything” then “nothing” is bold and enlarged. It’s about making the text on certain things stand out.

Header Fonts

These are attention grabbers, they’re fighting for the attention of the reader. Of course they’ll need to be larger than the other fonts. Bolder, brighter, whatever you need to do to grab attention without being obnoxious. I usually make header fonts 3x bigger than the paragraph font size.

Working Examples

Sub-Headers

Sometimes we don’t need sub headers in our designs, but when you do need a sub header the “design” you use should align with the visual importance of the sub header. What information will be displayed in it? Is that information “important” to the reader at that second?

Paragraph Fonts

Long-term readability is even more important for paragraph fonts. A headline might be quick to read, perhaps three to ten words, so the font can be a little more stylized for headlines. But paragraph fonts must be clean and easy to read. Paragraphs should never been wider than 600 pixels, long lines of text make reading more taxing on the viewer. The flip side is really short columns negatively affect readability. Here’s the best summary of paragraph size and readability.

Working Example from StreetFoodInternational.com

  • Reduce visual clutter to give fonts more visual importance. I removed the “leave a comment” link from the truncated preview. I removed the date and avatar from the preview as well.
  • I floated the image to the right to give a nice left justified visual baseline.
  • I increased the white space so the articles have “breathing room.”
  • I increased the paragraph font size +2 pixels and increased the line height to 155% of the font size.
  • I increased the article title +10 pixel too.

Text design is tough, most of my design choices are gut decisions after I’ve made years of mistakes. If you find sites with good readability just copy their style sheet into your site. I know that sounds like cheating but do it, eventually you’ll train your eye to make better choices.

“Immature artists imitate. Mature artists steal.” — Lionel Trilling

Related Post