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

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

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

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

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

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

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

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

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

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

Footnotes

  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

    very great, thanks a lot…

    0
  2. 102

    Mark (fetdigitaal.nl)

    April 7, 2009 3:36 am

    Thanks for that!

    0
  3. 203

    Good stuff!

    0
  4. 304

    One quible. The example on Rule Number 8 sneaks it’s way out of cleaning up the rag. The copy has been edited rather than broken differently or hyphenated. I know it’s just lorem ipsum but what’s really challenging is producing a nicely ragged text with copy you may have little editing control over.

    0
  5. 405

    JAJAJA, you´re so right Sidney…
    SM SUCKSSSS!!

    0
  6. 506

    This a bad post and you should feel bad. Smashing, why are you publishing articles by people who are clearly only trained in print typography when you are about web design? The use of px, b, and span are all so wrong they make me want to cry. No wonder there is so much shitty web design, if these are the things people are being taught.

    0
  7. 607

    Nice, hope it will help me…

    0
  8. 708

    @Todd – ditto. This article is a great read for PRINT designers. The problem we have is when print designers insist on the same rules for online. Sure – with CSS we CAN do it, but SHOULD we? We need to weigh the true cost of cross-platform, cross-browser, cross-device support against this idea of pixel perfect layout. I understand there is value to an overall site aesthetic, but this can be taken to extremes and minutia that waste everyone’s time (including the users.)

    0
  9. 809

    I agree with Todd – this article applies well to print, but not to the web. The very first example sets a line-length that is about half of the optimal size, and personally I think line-length should be left to the user to choose.
    Line-height should always be set in relative units, so that if the font size is changed by either the user OR the designer, the proportions remain.
    Beyond that, I give up… it is all close, but almost none of it is correct.

    0
  10. 910

    Thanks to everyone for the kind words. I’m glad most of you enjoyed the article and found it helpful.

    @Todd – I’m not a print designer, I’m trained as a web designer but that is beside the point. The point of this article isn’t to teach people on the specifics of perfect CSS and HTML markup, its focus is the 8 typography principles and how to easily apply them with CSS. I gave example code to demonstrate how to apply the principles, never stating that these were the ONLY ways of doing it. Using “span” and “b” aren’t necessarily wrong but I do agree with you that there are better tags to apply these with, specifically “em” and “strong”. Maybe I should have used them instead but at the same time this small changes doesn’t overshadows or undermine the 8 typography principles, which is the point of the article.

    As for using “px” I strongly disagree with you and so do others. For one, the designer/developer must make this decision based on what type of site is being built and who will view it. If the target audience mainly uses IE6, then using “px” isn’t a good idea. If accessibility isn’t a top concern and IE6 usage is low, “px” are perfectly fine to use. At the same time, IE6 is on its way out and even Google isn’t supporting it. I work at a large ad agency and we’re even starting to phase out IE6 support. It’s an old browser and it’s time we move away from it. All modern browsers can resize “px” and soon we won’t even need to have this discussion. Nothing wrong with using “px”.

    I also used “px” in this article to keep it all simple. Relative sizes can get messy and I didn’t want to complicate things. I even mention in the article that this can all be done with “em”.

    0
  11. 1011

    1. Measure – Why is the math easier in pixels? I’ll tell you why Antonio Carusone, because you don’t have a clue how ems work. If you knew what ems are, you would know that the math is much easier with ems since there is no math, all you need to do is set the max-width to 30 ems, regardless of the font size, since the ems do the math for you. Now, whether or not 65 characters per line is optimal can be discussed, but that’s another issue. I hope you will take this as constructive criticism and edit your article.

    1
  12. 1112

    Actually, I know exactly how em’s work. What you’re forgetting is that the default font size in browsers is 16px so 1em will equal 16px. You have to first reduce the default size of the document by 62.5% to get it down to 10px to make things work much easier. Em’s are relative so when dealing with child elements it gets even more confusing. In my opinion using px keeps it all simple and uncomplicated. If you can’t see that then I’m not sure what to tell you buddy. But again, if you prefer em’s then more power to you. Nothing wrong with that but there’s also nothing wrong with using px.

    0
  13. 1213

    Very useful post!!..

    0
  14. 1314

    FART

    0
  15. 1415

    This is something some self-taught webdesigners would learn from. Im a “print-designer” as im attending at a design for print and media school, but i like webdesigning more and im also one of the few of my school who enjoy learning more and more for accesability and good practices for the web.

    My point is, this is really good for webdesigners without a preparation in typography to start with, and also its good for us graphic designers to learn how to apply this for the web. But i have to agree with portability on the induced line breaks for the rags… those could cause problems on mobiles. Besides from that everything is really enlightening, even for me because I didnt know how to apply it with the CSS coding. Thanks :D

    And hanging quotes and vertical rythm is a must, even if you dont want to apply it, you have to, it reads and looks better, as it looks like you paid attention to text layout.

    0
  16. 1516

    even working on a professional logo design, these are nice tips to keep on mind and this is how we get clients completely satisfied
    Logo-Corner

    0
  17. 1617

    thanks for this great article !

    Monsieur M from Belgium (http://blog.monsieurm.be)

    0
  18. 1718

    @everyone grumbling:
    a lot of designers are self-taught. It’s nice to have resources to help without spending time in a classroom or library, or $15 on a book, or anyone who didn’t take notes/was absent on that day in typography. Hop off your high horse.

    PS: It’s how *CSS* can be used to improve your typography, or did you miss the last few lines of the introduction (which is usually there for a reason).

    0
  19. 1819

    great post!
    these are the reasons why designers are addicted on this site.
    smashed!

    0
  20. 1920

    Great stuff! I knew that I can learn something in this site .. thx

    0
  21. 2021

    That’s really useful. Thanks..

    0
  22. 2122

    Great great.. very useful for me.. I lack in typography :D

    0
  23. 2223

    What you’ve said is exactly how I write my letters and reports. It is good to know that what I have learnt by trial and error over a number of years and what looks good to me and most other people I ask is confirmed by your excellent article. I run a small engineering and building consultancy in Billericay in England but its got to be the same for everyone hasn’t it? Kind regards Nick.

    0
  24. 2324

    Great article. Thank you for your time and effort.

    0
  25. 2425

    Heather Feimster

    July 6, 2009 6:13 am

    @Antonio – You’ve obviously put in a lot of work and this is a good article for a specific audience just getting their “CSS-legs” in the sea of web design coding. It will undoubtedly give newer designers some more CSS ammo to add to their arsenal.

    However, to be a good blogger/writer, understand that many more people will read your work than your target audience and probably half won’t like it. Please take cues from other great online writers who accept criticism humbly in their comments and use it to further the conversation – not get defensive and shut down.

    That being said, I’d really love to see a “Part II” to this that goes a bit further for more experienced designers. Look at each rule from an em or relative POV (yes, you may not agree, but obviously your readers want it) and talk about some other more intensive typography tricks. Solicit your readers to send in their own CSS rules and breakthroughs – it could be a great way to turn this around and satisfy another group of readers with more typography experience and begin the discussion many of us want.

    0
  26. 2526

    Good stuff! If only I had paid systematic attention to typography when I started…

    0
  27. 2627

    Many Thanks! It’s a big help!

    0
  28. 2728

    Wow. You have managed to smoosh about a semester or less of my Typography I class into an article which probably took you less than a week.

    0
  29. 2829

    the best practical article i’ve read on typography so far. thanks!

    0
  30. 2930

    bravo

    0
  31. 3031

    Nice article. Thank you for your time and effort.

    0
  32. 3132

    Nice article! Good tips

    0
  33. 3233

    Great tips! Thank you SO much! :)

    0
  34. 3334

    Catherine Azzarello

    March 8, 2010 3:44 pm

    @ Mary. Yes! The only way to create a ‘clean’ rag is w/line breaks. Bad HTML. Not to mention it’s gonna look even worse if your user increases font size.

    You just have to let some things go as a web designer–like widows, orphans & rags.

    0
  35. 3435

    Jessica McKelden Cave

    April 13, 2010 7:09 pm

    Thanks for the tips! These are the things that tend to slip our minds, but are often the most important!

    0
  36. 3536

    Shunmugam Balasubramanian

    June 15, 2010 4:34 am

    Very nice article…………Thanks

    0
  37. 3637

    I never understood the significance of typography in design especially web design until a few months ago. But reading this article has showed me some extremely useful tips that help with usability and readability. Thanks for the post!

    0
  38. 3738

    Excellent Tutorial for Beginners !!

    0
  39. 3839

    EXCELLENT recommendations for managing typography in web design. Great examples for balance

    0
  40. 3940

    These are really useful tips for those who may not know. I like how the code is available too.

    0
  41. 4041

    im doing it at school so i hate it-

    2
  42. 4142

    -(*_^)->

    1
  43. 4243

    This is a horrible article, what you’re suggesting for line-height is horrible! 2-5px more than the font-size? are you serious? 1.5 times the font size is a good amount, geez, seriously SmashingMagazine get some more knowledgeable people to write these articles… this guy is wrong on so much, i just don’t have the time, this makes me want to unsubscribe from your feed SM.

    1
  44. 4344

    I was sent a brochure made by a young graphic designer and I had to clean up pretty much this entire listful of mistakes. I considered marking each typographic error on the spread, but I could have just sent this! Very helpful and worth the read for anyone new to typography! :)

    0
  45. 4445

    I like the part about the rags. There’ nothing more of an eyesore than a ‘dirty’ rag with uneven gaps. There’s also great advice to be found here by the way https://www.cardprinting.us/blog/2013/03/guide-to-professional-typography/

    0
  46. 4546

    This was a great reminder of fundamentals. I liked it very much!

    1

↑ Back to top