As you have probably know, most online readers don’t read line by line, instead they scan (from one point to another). For this reason, designers create typographic contrast and flow by emphasizing certain text. Contrast is important because not all the content within a page have the same value, some have greater significance than the others. By creating contrast, you can direct the reader’s attention to the important messages and at the same time enhance the visual appearance. Here are seven basic methods on how you can create typographic contrast.

1. Size

Larger font size indicate higher priority because it draws reader’s attention, therefore this method is commonly applied on headings.

large font size

On the other hand, you can de-emphasize by using smaller font size.

small font size

2. Typeface / Classification

Contrast can be achieved by mixing different typeface classifications. However, due to limited web safe fonts, there are only two main classifications commonly used: serif and sans-serif.

type classification

Generally, to create a contrast between the headings and the body text, we use serif font for the headings and sans-serif font for the body, or vice versa.

classification contrast

If you want to go beyond the web safe fonts, there are two more options:

  1. CSS image replacement, that is to use CSS to hide the text and replace with a background image.
    [css + bg image = static graphic img]

  2. sIFR (Flash replacement), that is to use Javascript and Flash technology to replace the text with the embedded font.
    [Javascript+Flash = any font dynamically]

Note: CSS image replacement or sIFR is not practical for long paragraph, so they are normally used for headings.

3. Color

Color contrast is a common way to distinguish between navigation, headings, link, and body text.

link

You can use faded color to indicate something that is disabled or not available.

faded

Sometime you don’t need to make something bigger to get more attention, you can create emphasis by using brighter color, such as red.

red color text

You can also use color to distinguish individual word within a group of text.

color grouped text

When small font size combined with lighter tone color, the importance of the text is further de-emphasized.

least important

4. Cases

When the same typeface is used for the headings and body text, contrast can be established by changing the case. Uppercase tends to get more attention than lowercase, therefore it is more suitable for headings. The CSS property to transform text to uppercase is text-transform: uppercase.

case contrast

Tips: avoid using uppercase in the body text or in long sentence because it will reduce readability.

uppercase text block

5. Style and Decoration

One of the common mistakes made by most editors (particularly the Microsoft Word users), is the tendency to use the underline decoration to emphasize certain text. This is a big mistake in web typography. Readers will misinterpret the underlined text as a link because the browser underlines the link by default. So, do not underline any text that is not a link when posting on the web.

underline

Instead, you can use italic font style.

italic

6. Weight

Making certain text heavier weight (bold) can also create emphasis.

bold

Another common mistake is that people tend to bold the entire line of text. By doing so, the emphasis/contrast of the text is lost.

entire line bold

7. Space

Space plays the most important part in maintaining flow of your design. Good use of space will tell the reader where to start, when to pause, where it ends, and what to do next.

There are various ways to create space:

  • Block break (padding or margin) is the space in between the block elements.
  • Paragraph break (padding or margin) is the space created after the <p> element.
  • Tracking (letter-spacing) is the space in between the characters.
  • Leading (line-height) is the space in between the lines.
  • Indentation (padding or margin) is commonly used for blockquote and list elements.

Conclusion

Let’s put all these methods together in practice.

typographic contrast final

External Links:

180 Comments

1 7 8 9
  1. Mike Sinkula
    Feb 19, 2011 @ 1:12 am

    As much as the choice of type is important, the appropriate use of typographic measurements and white-space is an important tool of the trade when setting type for the web.

    Reply

  2. How To Put On A Condom | How To Get Taller
    Mar 17, 2011 @ 5:59 pm

    Yup. Contrast does work to call attention. I prefer using bold and bright colors…

    Reply

    • Mike
      Aug 19, 2011 @ 9:26 am

      thanks for the SPAM, idiot.

      Reply

  3. How To Get Taller | How To Put On A Condom
    Mar 17, 2011 @ 6:00 pm

    Contrast does work for lengthy articles or pieces. Thanks for this tip.

    Reply

  4. ana
    Mar 31, 2011 @ 10:39 pm

    no encontre lo que buscaba pero es importante lo escribiste bay bay bay besos

    Reply

    • Raynoch
      Dec 18, 2011 @ 3:29 pm

      Inetlglinece and simplicity – easy to understand how you think.

      Reply

  5. dexx
    Apr 17, 2011 @ 1:52 pm

    Excessive fear, anger, and work under stress last pregnancy, infants can lead to excessive hassaslığa. Intense emotions, going through the mother’s blood circulatory system and brain functions that affect the baby in some leads to the release of chemical

    Reply

  6. Fantazi ayakkabı
    May 3, 2011 @ 7:26 am

    Thanks admin ,very useful, help me a lot to improve some of my sites…

    Reply

  7. fantazi ayakkabı
    May 28, 2011 @ 3:39 am

    Thanks admin ,very useful

    Reply

  8. Lassar
    Jul 27, 2011 @ 1:23 am

    You was talking about using italic font instead of underline for emphasizes.

    Well italic font does not really cut it for emphasizes.

    I have tried bold for verdana font. And it just looks ugly.

    There are places in sentences and words that no one would expect to be a link. If so, they would be a prime candidate for underline text.

    Or how about using ‘underline text’ for extra emphasizes.

    The only other choice is color. As you know a different color text means a link. And yet I see you use color text in this web page.

    The worst thing that can happen is the reader finds out it is not a link.

    So what other choices do we have when it comes to emphasizing words besides underline?

    Reply

    • I.C. Spot
      Dec 5, 2011 @ 11:44 am

      LOL that was the most illogical argument ever. It’s ok to use underline (which is ALWAYS rendered for a link), but it’s not ok to use color because that could possibly maybe mean it’s a link? Don’t cross a side street, you might get run over by a car. I recommend crossing highways instead!

      Reply

  9. eczane
    Sep 8, 2011 @ 8:50 am

    Thanks for sharing and keep up the good work. That is a great article.

    Reply

  10. eczane
    Sep 8, 2011 @ 8:54 am

    siteniz tek kelimeyle süpe

    Reply

  11. Genesis
    Dec 5, 2011 @ 10:19 am

    this web site wasnt helpful at all >_<

    Reply

  12. Jenelle Andriopulos
    Dec 7, 2011 @ 7:26 am

    I have learned result-oriented things out of your blog post. Yet another thing to I have noticed is that typically, FSBO sellers can reject a person. Remember, they can prefer to not ever use your providers. But if you actually maintain a comfortable, professional connection, offering assistance and being in contact for about four to five weeks, you will usually be capable to win a discussion. From there, a house listing follows. Thank you

    Reply

  13. Moliva
    Dec 9, 2011 @ 8:15 am

    I like this blog !muy great !

    Reply

  14. yemek tarifleri
    May 2, 2012 @ 12:08 pm

    Paintingasd on the tablet is fun, but to do cool things need work.

    Reply

  15. Lenard
    May 13, 2012 @ 11:25 am

    Good stuff.. typography is really important. A lot of start-up web designers aren’t familiar to this, but like me, as i go along, learning and discovering sites like this, I tend to realize that I still have lots to learn, even the basic ones that creates big impact on web design. Thank you for sharing this Nick.. :)

    Reply

  16. Therese
    May 30, 2013 @ 7:47 am

    The part about underlining didn’t occur to me. I guess there are a lot of differences when it comes to print and web typography. Also, i think you should check this infogaphic about professional typography by Cardprinting as well: https://www.cardprinting.us/blog/2013/03/guide-to-professional-typography/

    Reply

  17. DymoLabels
    Jun 1, 2013 @ 9:47 am

    hi
    i really like your collection
    thanks for sharing
    keep it up

    Reply

1 7 8 9

Leave a Reply