Menu Search
Jump to the content X
X

8 Simple Ways to Improve Typography In Your Designs

Advertisement

Many people, designers included, think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most people it ends there. But there is much more to achieving good typography and it’s in the details that designers often neglect.

These details give the designer total control, allowing them to create beautiful and consistent typography in their designs. While these details can be applied across different types of media, in this articles we’re going to focus on how to apply them to web design using CSS. Here are 8 simple ways you can use CSS to improve your typography and hence the overall usability of your designs.

1. Measure Link

The measure is the length of a line of type. To a reader’s eye, long or short lines can be tiring and distracting. A long measure disrupts the rhythm because the reader has a hard time locating the next line of type. The only time a narrow measure is acceptable is with a small amount of text. For optimum readability you want the measure to be between 40-80 characters, including spaces. For a single-column design 65 characters is considered ideal.

Screenshot

A simple way to calculate the measure is to use Robert Bringhurst’s method which multiples the type size by 30. So if the type size is 10px, multiplying it by 30 gives you a measure of 300px or around 65 characters per line. The code would look something like this:

p {
  font-size: 10px;
  max-width: 300px;
}

I’m using px because it makes the math easier but this also works with em’s.

2. Leading Link

Leading is the space between the lines of type in a body of copy that plays a big role in readability. Correctly spaced lines make it easier for a reader to follow the type and improves the overall appearance of the text. Leading also alters typographic color, which is the density or tone of a composition.

Many factors affect leading: typeface, type size, weight, case, measure, wordspacing, etc. The longer the measure, the more leading is needed. Also, the larger the type size, the less leading is required. A good rule is to set the leading 2-5pt larger than the type size, depending on the typeface. So if you set the type at 12pt, a 15pt or 16pt leading should work well on the web.

Screenshot

This takes some finessing to get the right spacing but here is an example of what the code would look like:

body {
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
}

3. Hanging Quotes Link

Hang quotes in the margin of the body of text. By not doing so a quotation mark that is flush with the text will interrupt the left margin and disrupt the rhythm of the reader. Hanging quotes keeps the left alignment intact and balanced therefore increasing readability.

Screenshot

This is achieved very easily with CSS using the blockquote element:

blockquote {
  text-indent: -0.8em;
  font-size: 12px;
}

The negative indent will vary depending on the typeface, type size and margins.

4. Vertical Rhythm Link

A baseline grid is the foundation for consistent typographic rhythm on a page. It allows the readers to easily follow the flow of the text, which in turn increases readability. A continuous rhythm in the vertical space keeps all the text on a consistent grid so that proportion and balance are retained throughout the page, no matter the type size, leading or measure.

Screenshot

To keep a vertical rhythm in CSS, you want the spacing between elements and the line-spacing (leading) to equal the size of the baseline grid. For example, lets say you’re using a 15px baseline grid, meaning that there are 15px between each baseline. The line-spacing would be 15px and the space between each paragraph would also be 15px. Here is an example:

body {
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  line-height: 15px;
}

p {
  margin-bottom: 15px;
}

This allows each paragraph element to align with the grid, keeping the vertical rhythm of the text.

5. Widows and Orphans Link

A widow is a short line or single word at the end of a paragraph. An orphan is a word or short line at the beginning or end of a column that is separated from the rest of the paragraph. Widows and Orphans create awkward rags, interrupt the reader’s eye and affect readability. They can be avoided by adjusting the type size, leading, measure, wordspacing, letterspacing or by entering manual line breaks.

Screenshot

Unfortunately, there is no easy way to prevent typographic widows and orphans with CSS. One way to remove them has been mentioned above, but there is also a jQuery plug-in called jQWidon’t that places a non-breaking space between the last two words of an element.

6. Emphasis Link

Giving emphasis to a word without interrupting the reader is important. Italic is widely considered to be the ideal form of emphasis. Some other common forms of emphasis are: bold, caps, small caps, type size, color, underline or a different typeface. No matter which you choose, try to limit yourself to using only one. Combinations such as caps-bold-italic are disruptive and look clumsy.

Screenshot

Here are some difference ways of creating emphasis with CSS:

span {
  font-style: italic;
}

h1 {
  font-weight: bold;
}

h2 {
  text-transform: uppercase;
}

b {
  font-variant: small-caps;
}

Keep in mind that the font-variant style only works if the font supports the small-caps variant.

7. Scale Link

Always compose with a scale, whether it’s the traditional scale developed in the sixteenth century that we’re all familiar with, or one you create on your own. A scale is important because it establishes a typographic hierarchy that improves readability and creates harmony and cohesiveness within the text.

Screenshot

An example of a typographic scale defined in CSS:

h1 {
  font-size: 48px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 21px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  font-size: 14px;
}

8. Clean Rags Link

When setting a block of text unjustified with a left or right alignment, be sure to keep the rag (the uneven side) balanced without any sudden “holes” or awkward shapes. A bad rag can be unsettling to the eye and distract the reader. A good rag has a “soft” unevenness, without any lines that are too long or too short. There is no way of controlling this in CSS, so to achieve a good rag you must make manual adjustments to the block of text.

Screenshot

Hyphenation can also help with producing clean rags, but unfortunately CSS can’t handle this at the moment. Maybe in the near future we’ll see some control in CSS 3. Not all is lost though. There are some server and client side solutions for auto hyphenation like phpHyphenator and Hyphenator as well as online generators.

Screenshot
Hyphenator.js is a Javascript-library that implements an automatic client-side hyphenation of Web-pages.

Further Resources Link

Here’s a list of related articles and books to further help you with the details.

Smashing Book #5

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? For example, Smashing Book 5, packed with smart responsive design patterns and techniques.

↑ Back to top Tweet itShare on Facebook

Antonio Carusone is a New York based graphic designer and author of AisleOne, a blog focused on graphic design and typography, and The Grid System, an ever-growing resource on grid systems and part of the Thinking for a Living Network.

Advertisement
  1. 1

    gooood :)

    1
  2. 2

    Excellent – thanks for this … i’m learning and this is great learnin’ material !

    3
  3. 3

    Nice article! Good tips.

    5
  4. 4

    Setting anything as px is baaaad…

    -3
  5. 5

    if you learned something from this article, i hope you don’t plan on being a designer.

    -1
  6. 6

    An article on fonts to use for web would be great too, and which fonts pair nicely.

    1
  7. 7

    Rachmat Kukuh R.

    April 3, 2009 11:07 am

    Gagal Pertamax!

    Nice tutorial!

    0
  8. 8

    Why are there posts only on weekdays? Never realised people dont visiting on weekends.

    0
  9. 9

    Pairofdime Design

    April 3, 2009 11:13 am

    Nice article. Don’t forget kerning (the space in between letters)!

    0
  10. 10

    I disagree with setting line-height in pixels, it hampers accessibility especially in Internet Explorer versions that don’t support full-page zoom. I suggest using EM units instead but that’s a whole other bag of worms.

    1
  11. 11

    Excellent article! I need more of these, cuz “power of Css is nothing without control”… ;-)

    0
  12. 12

    Great article, thanks!

    1
  13. 13

    Thanks, great article!

    0
  14. 14

    fantastic post

    0
  15. 15

    A must for anyone new to typography for the web, and a good refresher for those who forget the rules occasionally!.

    0
  16. 16

    Very helpful!

    0
  17. 17

    Essential article, thanks!

    0
  18. 18

    It’s a big pleasure to read such helpful post about typography at Smashing Magazine,.. Thanks a lot for great post! ;)

    0
  19. 19

    great article!

    0
  20. 20

    Awesome! SM is my fav web destination!

    0
  21. 21

    Wow, very nice article.

    0
  22. 22

    Very nice! Thanks a lot!

    0
  23. 23

    Nice article, font pairs that work well would be nice. I always have trouble matching San Serif & Serif fonts on a page.

    Keep up the sterling work Smashing

    0
  24. 24

    Excellent article – I actually learned quite a bit from it!

    0
  25. 25

    Thanks for the info. I’ll apply it.

    0
  26. 26

    Jonathan Hedrén

    April 3, 2009 1:21 pm

    I agree with Mike Rundle and Mike: avoid setting font sizes and line heights in px, use em or percent as unit instead.

    0
  27. 27

    I always have trouble deciding when to use pt, px, or em when it comes to font size. I would like to see some standards for when to use those. The article refers to all three, but doesn’t really specify in what situations each should be used.

    0
  28. 28

    Nicole Hernandez

    April 3, 2009 1:22 pm

    Excellent article to bookmark. I tend to be absentminded and having quick reference lists that break down all the typography elements I need to make sure and cover on a design is useful. Let’s me run down a checklist to make sure I haven’t forgotten to do something – particularly useful when you work on multiple projects and often have days between the next time you work on one.. and forget what you have left to do.

    0
  29. 29

    Some good points but for number 8 it isn’t always safe to craft line breaks as you would do for print. Fonts displays slightly differently in different browsers and on different OS’s so a break may work in one browser but not another.

    0
  30. 30

    WOW! I’ve been searching for these very tips!

    0

↑ Back to top