We're loading your data
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.”
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.
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.
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.
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?
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.
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