Size And Line Heights
It will not matter how beautiful things look if it’s all just too tiny and clumped together to read.
font-size ranges between 14 and 24 pixels on the web while optimal
line-height lies between 120% and 145%. Headings and body text should also be respectful of various screen sizes.
Use Hanging Quotes
Avoid having opening quotation marks that are vertically flush with a block of text. Instead, hang the quotes in the margin so the text can line up properly. Without hanging quotes the text becomes interrupted and messes with balance.
Take a look at the resources below to see the positive impact hanging punctuation can have on legibility.
Refrain From Exclamation Points
They are usually unnecessary and lose their impact quickly otherwise.
When selecting a typeface always focus on the body text first. Be sure to keep brand objectives in mind, read and understand the copy, and have a good sense of what feelings the site or product is aiming to foster.
Different typefaces have different jobs, different intentions. Knowing a bit about these intentions helps better understand how to use it. For example, there are typefaces that are solely meant to be for display and would perform very poorly as a body copy font.
Each style has limitations, however. When context changes, such as different copy or an altered layout, a new typeface may be needed.
- 2017 Trendy Google Fonts Combos PDF
- Katy Decorah’s font library for tagging and organizing Google Fonts
- An entire pocket guide on combining typefaces by Tim Brown
- A collection of font pairings from Typekit and H&FJ
- Font combinations with color palettes from Typespiration
- Hand picked Google Font pairings
- Ten additional Google Font pairings from Shillington Education
- Even more Google Font pairings by Mills Digital
- A collection of fonts in use for inspiration
Make sure your heading levels are visually ranked by their importance through the use of different colors and sizes. Also, be mindful that elements near each other visually will communicate a relationship between them.
Punctuation And Composition
Be sure to know the difference between hyphens ( - ), en dashes ( – ), and em dashes ( — ) and what types of situations warrant their use. Hyphens are used at the end of lines when a word breaks and for multipart words, while en dashes are used to indicate ranges of values. Em dashes are especially lovely and used to make a break between parts of a sentence.
While straight, or dumb, quotes ( '' ) are the default quotation marks on keyboards they are rarely the correct ones for the job. Get to know curly, or smart, quotes ( “ ) and how to use them.
Last but not least, never use two spaces between sentences.
Make sure all instances of vertical spacing throughout a page are consistent by setting a
line-height as a baseline and then using multiples of this value.
Be sure to use generous amounts of white space, or negative space, around elements to enhance readability, comprehension, and instill a feeling of calmness.
Use bold or italic for emphasis, not exclamation points and underlines. Be sure to not overuse either of these and only for short bits of text.
With a serif font italic is great for light emphasis while bold is better suited for heavy emphasis. For sans-serif bold will be a more prominent choice.
When text appears as if it’s vibrating and causes eye discomfort the contrast between the foreground and background colors is poor. Always use a contrast checker to make sure color selections pass web accessibility standards.
You Are Not On Your Own!
Embrace the experience, expertise, and tools of others as much as possible. It will help you avoid becoming overwhelmed and ensure you are following best practices along the way.
- Game about pairing typefaces
- NASA report on Flight Deck Documentation
- A children’s book by B.J. Novak
- This tweet from the National Weather Service
- Article touching on typography for user interfaces and how we read
- Typography details behind the favorite sites of Typewolf for inspiration
- An animated typography cheat sheet
- Detailed list of web typography rules
- Typekit resource for practicing typography skills
- Typography section of the Draft U.S. Web Design Standards
- Talk turned blog post on how typography evokes emotion