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’t1 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 32. Not all is lost though. There are some server and client side solutions for auto hyphenation like phpHyphenator3 and Hyphenator4 as well as online generators5.

Screenshot6
Hyphenator.js7 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.

Footnotes Link

  1. 1 http://davecardwell.co.uk/javascript/jquery/plugins/jquery-widont/
  2. 2 http://www.w3.org/TR/css3-text/#hyphenate
  3. 3 http://yellowgreen.de/phpHyphenator
  4. 4 http://code.google.com/p/hyphenator/
  5. 5 http://yellowgreen.de/soft-hyphenation-generator
  6. 6 http://code.google.com/p/hyphenator/
  7. 7 http://code.google.com/p/hyphenator/
  8. 8 http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/
  9. 9 http://www.markboulton.co.uk/journal/comments/incremental_leading/
  10. 10 http://24ways.org/2006/compose-to-a-vertical-rhythm
  11. 11 http://www.alistapart.com/articles/settingtypeontheweb
  12. 12 http://dev.opera.com/articles/view/setting-web-type-to-a-baseline-grid/
  13. 13 http://webtypography.net/
  14. 14 http://www.alistapart.com/articles/howtosizetextincss
  15. 15 http://topfunky.com/baseline-rhythm-calculator/
  16. 16 http://www.amazon.com/Detail-Typography-Jost-Hochuli/dp/0907259340
  17. 17 http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326
  18. 18 http://www.amazon.com/Thinking-Type-Critical-Designers-Students/dp/1568984480
  19. 19 http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestaltung/dp/3721201450

↑ 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

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

    1
  6. 6

    Rachmat Kukuh R.

    April 3, 2009 11:07 am

    Gagal Pertamax!

    Nice tutorial!

    0
  7. 7

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

    0
  8. 8

    Pairofdime Design

    April 3, 2009 11:13 am

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

    0
  9. 9

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

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

    0
  11. 11

    Great article, thanks!

    1
  12. 12

    Thanks, great article!

    0
  13. 13

    fantastic post

    0
  14. 14

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

    0
  15. 15

    Very helpful!

    0
  16. 16

    Essential article, thanks!

    0
  17. 17

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

    0
  18. 18

    great article!

    0
  19. 19

    Awesome! SM is my fav web destination!

    0
  20. 20

    Wow, very nice article.

    0
  21. 21

    Very nice! Thanks a lot!

    0
  22. 22

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

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

    0
  24. 24

    Thanks for the info. I’ll apply it.

    0
  25. 25

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

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

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

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

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

    0
  30. 30

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

    0
  31. 31

    @Randall

    Right, because ‘true’ designers are born with this knowledge. Pfff.

    Seriously, what’s with some of these elitist comments… Great article!

    0
  32. 32

    Why, oh, why abuse span for emphasis when there is a em element…

    0
  33. 33

    this is a day one lesson in basic typography class.

    the standard size unit someone should use for type is pt. don’t use em. an em IS the point size. also to add to the articles advice, a good rag shouldn’t create a defined shape.

    any one interested in web design should do their readers a favor invest and in a typography textbook.

    0
  34. 34

    I have just written an article on consistent line height using em. Text and elements will resize proportionally in all browsers, even without a zoom function.

    http://wbdsgn.com/blog/xhtml/the-easy-way-to-set-a-consistent-line-height/

    And an example:

    http://wbdsgn.com/library/2009/03/consistent-line-height/

    0
  35. 35

    An interesting article, but it should have been called ‘6 simple ways to improve typography’, because two of the methods are neither simple nor practical, as the article admits. (Numbers 5 and 8).
    As for those saying don’t set type size in pixels, this advice is growing very quickly out of date. As IE6 and earlier fall away, there’s really no reason not to start using pixels and getting some more reliable designs.

    0
  36. 36

    Jewen Soyterkijn

    April 3, 2009 2:35 pm

    @patrick I call 17% IE6 users enough of a reason. It is simply usability – taking care of all your users. Imo relative positioning also will retain your typographical settings in much nicer way than set pixels will. It’s not simple, neither Zen, but you can satisfy your own hunger for allround perfection.

    @john q
    pt really? I only use that for print css.

    0
  37. 37

    Helpful article in this day and age when everyone sets type to some degree. As a designer I was happy that all the “bad’s” stuck out at me as something I would never leave be… with the exception of the “unhung” quotes which I guess comes up so rarely I’d have to think about it.

    #8 struck me as pretty funny though. Hell, if I could change the copy to clean up rags… ~M

    0
  38. 38

    Very good article. Thank you.

    0
  39. 39

    A really great article!

    0
  40. 40

    Nice article. Didn’t know about the hanging quotes method, very interesting :)

    Rob: You might find these articles useful: http://www.clagnut.com/blog/348/ and http://www.alistapart.com/articles/howtosizetextincss/ – they’re about the best method of setting font sizes.

    0
  41. 41

    Great stuff. BUT, I notice you didn’t mention the fact that serif (with feet) and sans serif (without) have a huge impact on reading comprehension.

    Traditionally, at least in the last 50 years, a serif font is predominantly used for long passages, because it increases comprehension and visual flow, both of which are critical for mentally parsing large blocks of text.

    The “feet” literally propel the eyes from letter to letter, word to word, relieving physical strain. Ergo, this reduces the mental energy needed to understand what’s being said, or the language itself.

    A sans serif (footless) font is best used for very brief statements, as in headlines and captions, where clean, bold type aids design and does not impede comprehension.

    I love all the other points in your post, and am so glad there are those who still pay attention to the design elements critical to helping readers gain the most out of the text that writers have sweat and bled to create.

    0
  42. 42

    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.

    From a typographical standpoint, this is flat-out false. The illustration is worse. Type does not need to be, and should not be, on a horizontal grid. You are advocating the space after a paragraph to be equal to exactly one line height, and that the line-height of two rows of a headline should equal the line-height in the text. The former is equivalent to adding ‘s, or just new lines Microsoft Word style, while the latter proposes inconsistency in ratios for large typefaces at a minimum, and large type overlapping each other at worst.

    Space after a paragraph should be designed based on visual appeal. It may be more or less than the exact line height, but using the exact line height looks like a and certainly looks amateurish. And I can’t imagine why you’d want to squish rows together in a headline.

    Smashing Mag, you’re great with some stuff. But will you please quit with the typography posts until you get a real expert in typography that knows what he’s talking about? Some reading on the http://www.ilovetypography.com blog would be a good start.

    1
  43. 43

    The serif vs. sans serif for body and headlines is debatable. It’s pretty accepted in print for sans serif to be for headlines and short bursts, and using serif fonts for bodies of copy. However, from my experience, and it appears the experience of others around the web as well, that sans-serif is the most legible and easiest on the eyes to read on a screen for larger bodies of text. Essentially the opposite of print. Of course there are always exceptions.

    I’m also a proponent of using percentages for line-height, but that’s strictly preference. Usually setting line height to somewhere between 130% and 150% yields nice results.

    This is one of the better articles to come from Smashing Mag lately, I may consider subscribing to the RSS feed again if you guys keep it up. Please though, no more link bait lists, very little good information in those.

    -1
  44. 44

    Nce article, but the 5th example, Widows and Orphans is a bit confusing, since the author doesn’t make use of the same text in both of the examples.

    0
  45. 45

    Anybody that doesn’t know this stuff has no business calling themselves a “designer.” This is the first day of class at any decent design school.

    Web programmer or developer, maybe… designer?

    Absolutely not.

    0
  46. 46

    Honestly, I stopped reading after tip #1. Take the font size, multiply it by 30, and that gets you your ideal max width.

    The problem with that is that such math results in incredibly small widths! Even at 14px – which could easily be defined as much too large for the body – you are looking at a max width of 420px.

    Smashing blows past this rule. As does I Love Typography, Usability Post, A List Apart, and pretty much every other blog I have ever seen. All of which look great from a typography standpoint.

    So if I cannot trust the first rule, why should I trust any of the others?

    0
  47. 47

    Very good article. I always knew there was something up with my type. Thanks!

    0
  48. 48

    Leo Baghdassarian

    April 3, 2009 7:44 pm

    in fact, the line-height property doesn’t even need units. avoid using them all together.

    -1
  49. 49

    Patricia Davidson

    April 3, 2009 8:08 pm

    Good article – thanks!

    0
  50. 50

    good and very informative

    0

↑ Back to top