Top Ten Typography Tips

Size And Line Heights

It will not matter how beautiful things look if it’s all just too tiny and clumped together to read.

Optimal 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.

Resources:

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.

Resources:

Refrain From Exclamation Points

They are usually unnecessary and lose their impact quickly otherwise.

Selecting Typefaces

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.

Resources:

Hierarchy

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.

Resources:

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.

Resources:

Spacing

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.

Resources:

Using Emphasis

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.

Resources:

Contrast

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.

Resources:

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.

Resources: