8 Simple Ways to Improve Typography In Your Designs

I wrote this article for Smashing Magazine and it was published last Friday on their site. I’m re-publishing it here for your reading pleasure. Enjoy.

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.



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.

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;



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.

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;

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.

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.

Vertical Rhythm


A baseline grid is the foundation for consistent typographic rhythm on a page. It allows the reader 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.

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.

Widows & 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

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.



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.

Here are some difference ways of creating emphasis with CSS:

span {
font-variant: small-caps;
h1 {
font-style: italic;
h2 {
text-transform: uppercase;
a {
text-decoration: underline;

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



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.

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;

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.

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.

Further Resources

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

121 Comments on "8 Simple Ways to Improve Typography In Your Designs"

  • This is an awesome post! I just redid my site, and this helps out!
    anti-spam word: type

  • Wow, what a great resource! Thanks Antonio!

  • Andrew says

    Great post. I was just looking for something that would hyphenate text for me and you seem to provide some solutions as far as that goes. Nice post and a lot of things I’ll be putting into my next project here.

  • Brant says

    Excellent work, Antonio. I like the CSS examples; nothing like a little code to drive it home.

  • I must say, I really appreciate the work you’ve been putting in as far as grids and typography in the web realm. There’s just not that much to look to as far as the web is concerned; other than just trying to do your best on applying all the print rules to web design. But that only helps in the design process, not so much in the coding process. So, thank you.

  • Jannis says

    Most excellent post! Thanks for the write-up.

    Especially liked the part about the blockquotation marks with a negative indent.

    Looking forward to more articles!

  • This is fantastic stuff. Thanks once again, Anthony.

  • Very nice post !

  • Daniel says

    Some great tips. I’ve learnt a lot of these through some torturous CSS experimentation — but there’s a few tricks that had passed me by. The hanging quotes one is particularly useful!

  • Lee says

    Love the writing. Wish I knew the web well enough to understand where to put the codes! One thing I noticed that some designers forget is “rivers” – when a negative line runs down through a body of text. Not sure what the code would be to change that though!

    Thanks again for another insightful post!

  • The underlying concept behind this article is attention to details – I love it.

    Re: Clean rags – while I agree, when setting out your designs, it is hard to do this when using Lorem as often (esp. with Lorum generators – http://www.lipsum.com) the words produced are so long that line returns happen soon after the first word!

    (Although no-one publishes using Lorem, so really only a designers problem)

  • Matt Braun says

    I have read a lot of articles on web typography but this is definitely one of the best. Its clear and to the point, nice post.

  • Thanks so much for this post, Mr. Carusone! I like the tip about calculating the measure of the line using the type size multiplied by 30.

  • Zach says

    this is a great reference and resource for those of us who fall into ruts when trying determine whether or not our visual blocking for content looks correct or not

  • Great list! One of the best typographic posts I’ve read anywhere.

  • Ahmed says

    Awesome article 🙂
    As a newbie, these advices are really useful, and simple to understand.

  • andrew says

    Pure goodness in this article. These are some great steps to making a site look much more professional. Well done.

  • Hmmm. This is print wisdom, no? Or rather, it applies to reading texts in a predictable, sequential manner.

    It’s rare for people to read web texts in this way: they scoot up and down, skip bits and reread others. So, while I wouldn’t disagree with most of this, I think it kind of misses the point. For example, when do we use a quote mark to signal a blockquote on the web? We don’t have that luxury with user generated content: we normally indent the quote. (I guess :before could be used, but it’s not well supported).

    And some bits I’d argue with:

    Giving emphasis to a word without interrupting the reader is important. Italic is widely considered to be the ideal form of emphasis.

    If I’m reading a novel, that’s fair enough. But if I’m skim reading I want emphasised words to be very clearly differentiated from the rest of the text. So while bolding is ugly, it’s effective.

    It’s the difference between reading with a designer’s eyes and a reader’s eyes.

    Having said all that, i think the bits on measure and leading are excellent, taking into account a lot of variables, rather than just saying 150% and 10-15 words is right.

  • Leon, these are typographic principles that lead to better typography. None of them are set in stone and it’s up to the designer to know when and how to apply them.

    Quote’s are often used within blockquotes, that’s the kind of the purpose of the tag. Italics are the ideal form of emphasis but in the article I also mention other ways of creating emphasis. The point of the Emphasis portion is not to state that you MUST use italics, but that you need to keep it to only one form of emphasis, whether it’s italic, bold or caps. If you think BOLD works better than italics for a certain site design, then that’s absolutely acceptable.

  • This set of rule’s, needs to be slapped in the face of every design student today.

  • Sandro says

    Antonio which typeface u used here on this image presenting this post?
    It’s not Helvetica, Univers, Frutiger etc.

  • Antonio,

    You state that emphasis text shouldn’t interrupt the reader and that italicising is ‘considered ideal’. Like I say, that’s fine in the novel–reading world, but it doesn’t necessarily apply online.

    I can’t think of one site that uses quote marks for blockquotes, except through using a graphic. This site indents block quotes. You’re more likely to use quotes for q, but that’s different (and it’s not fully supported).

    I know you’re suggesting ways to improve typography (and the ideas are generally great!) – but my point is that what you’re saying applies to print typography, or reading in a certain way. Some of these rules will aid online reading, but there are some exceptions.

  • There are exceptions to everything but these don’t only apply to print, they are work for the web. Again it’s up to the designer to understand these principles and know how and when to apply them. Interrupting the reading and calling attention to a word are two different things, which I think you’re confusing. You want to create emphasis without distracting the readers, that’s the point of that one principle. Over emphasizing a word can make it harder to read which in turn will interrupt the reader. If the right emphasis is applied, the reader will understand the importance of that emphasized word or sentence portion without being distracted from the overall body of text.

    In terms of the blockquote, certain people use graphics for quotes, but this principle applies to when real quotes are used and also for actual quotations.

  • Sandro, which typeface are you referring to?

  • I assume he means the image with the big 8 in it, followed by Measure, etc at the top of the page. Is it Akzidenz-Grotesk?

  • Sandro says

    Yes, the big 8 image. It is not Akzidenz.

  • Dave says

    Great post with great techniques!

  • Congratulations Antonio.

  • J says


    Maybe you should take note. Before you start picking holes in the article you might want to look at the design of your blog.

  • J, Ouch!

    I’m not questioning Antonio’s abilities as a designer (I think the work he’s done on this site is fantastic).

    Anyway, I do follow most of the rules he lists above (consistent leading and margins between block elements, for example). My only point is that they’re coming from a perspective that isn’t wholly applicable to online reading.

    Anyway, I probably did misread what he said about emphasis: I certainly accept what he says in the comments (it’s the difference between em and strong, I guess).

  • These are very important details which i’ve not given enough credit to in the past. Thanks, a great article.

  • pce says

    thank you!

  • javaloca says

    right on!.. thanks a bunch for this article!

  • Great tips. Like the jQ Widon’t script – nice find. Thanks.

  • NIck says

    Hey! I love your design here on your website. I saw your post on SmashingMagazine a few days ago and I really loved the ideas!

    Its a good rule of thumb to follow. I”ll definitely bookmark this later on 😉


  • Emiliano says

    What about if the size of the font is set using percentages (as in setting body{ font-size:80%} and all font sizes afterword also set using %) ?

  • Nice advices. I’ m looking forward to use them. Thank U!

  • DRoss says

    A good way to declare line height is (instead of using px) to us 1.2, 1.3 or 1.4 with no unit attached to the number. This way it scales with all sizes of type and if the user enlarges text it scales as well. px is absolute and doesn’t scale with enlarged text and you’ll be resetting it for different sizes of text.

  • teddY says

    Thanks for the article, Antonio. I guess in my next redesign, I’ll have to take your suggestions serious to improve the typography. Mine is in a total mess, with little vertical consistency. I find it a very interesting rule because I’ve never noticed it before, but when you wrote about it, I see it almost everywhere – in magazines, in well-designed layouts, newspapers etc. Widows and orphans are quite hard to control on a fluid layout, but it’s very applicable in print (I realized that there’s a conscious effort in newspapers to avoid such things) and in static webpages.

    For the emphasis, I have to agree that it’s best if one can stick to only one style – bold + italic is a total nono, usually I take it as a double emphasis but it doesn’t make much sense to me (and it’s visually distracting as well). I generally use italics for emphasis because I feel that bolding the text destroys the flow, although I have no qualms with people using bold. It’s a personal quirk, I guess.

    The resources link are terrific! Thanks for sharing, and happy easter!

  • Ahh my apologies. Guess that’s just me being to syndical (and ignorant)

  • Thanks for tips, seemingly obvious but very nifty.

  • Absolutely enlightening. Thank you.

  • Antonio: thanks for this post. I am not a designer but someone who tries to get what I want by explaining it, at length and badly, to another person who is a designer. So many of the things you wrote about are exactly the issues I have with the “look” of something, but haven’t been able to convey. I’m pleased to know that I’m not crazy and there is a design rationale behind my gut feelings about vertical spacing, font size, and wow, even a phrase for those single-word endings I’ve always hated – widows and orphans!! I guess it must be time to start learning how to do things for myself. Again, thank you

  • ludwig says

    Clean Rags: Although there is no way of controlling this in CSS, I believe that if you use smaller type sizes it is more likely that your rags will be cleaner.
    Thanks for the post.

  • Wedge says

    Very pleased to have your guidance and code to refer to, great stuff.

  • philip says

    Nice article. As a former typesetter, I am always a fan of good typography. This article reminds me how little control we have over type on the web versus page layout software, and how much I need to update my site! 🙂

    I have to jump in on the discussion about the blockquotes, though; blockquotes are not supposed to begin with a quotation mark. If you check resources for print, such as the Chicago Manual of Style, they all say that long quotations (generally 2 or more sentences) should be set apart from the regular text, indented on the left, be single-spaced, and not begin with quotation marks.

    The blockquote example on w3.org backs this up. Wikipedia has nice simple coverage of block quotes, too.

    Otherwise, a fine article with great examples. Thanks!

  • Jason says

    Hey, Amazing man, changed my online design life. I knew this stuff for print but just didn’t really know how for web. you have opened my eyes! Thank you! ha

  • Nice tip. Thanks.

  • tim says

    thanks for the great post.. good tips i’ll share w/my designer friends


  • Chris J says

    Excellent tips overall, but I totally disagree when it comes to manual line breaks to improve rag and/or widows/orphans.

    That’s great for print where you (hopefully!) know how text will wrap on the printed page, but on the web you have no idea what your reader is seeing. Maybe her default font size is 32, or 10, in which case manual line breaks will definitely cause problems worse than the occasional widow or inelegant rag.

    Sad but true: at this stage in web layout, use semantic mark-up and hope for the best (which you’ll usually get if you know what you’re doing).

    Old-school DTP tricks like forced line breaks or kerning/tracking to get text to wrap just-so simply doesn’t work in web browsers (yet?).

  • I am constantly looking for ways to improve my typography online and I really like the hanging quotes tip.

    great stuff

  • I read the article at Smashing, now I get to thank you personally!

  • For those of us who avoid px measurements for scalable webpages, I like to set my columns in ex. The little-used ex (x-height) unit is about the size of a lowercase ‘x’; that’s much closer to “average letter size” than ems. Thus a column width of 60ex to 70ex looks great imho.

  • Great post, I’m defaintely going to be coming back to this page when I produce my next web design. 🙂

  • Really useful and concise article, some really handy tips, I will certainly be using at a reference in the future

  • Aleksey says

    Good tips, thank you.

    I found it a bit ironic that I had to read this article in a jagged sans-serif font — the default sans-serif on my GNU Linux system. For the web designers out there, keep in mind that the platform you are developing on is not the only one that exists. If you would like your typography to be cross-platform friendlier, these are the fonts you should include in you CSS: Liberation Sans, Liberation Serif, Liberation Mono.

  • Real reading material for every web-designer and web-developer. I have completed the reading without blink my eyes. 🙂 Thank You Sir.

  • revulú says

    perfect post. thank you.

  • thank you for a nice tutorial

  • Rebecca says

    Well done. I taught typography and appreciate these succinct tips.

  • Robert says

    Very nice overview. I prefer the percentage method but nevertheless inspiring to take a closer look again…

  • andy t. says

    if you ask me, what makes this post outstanding from the hundreds of tips over the net is the good vs bad samples. nothing beats a good working sample. thanks a lot for these tips. it is truly useful.

    – andy t.

  • Excellent post! These “rules” are just as applicable for print typography as they are for the web, but it’s nice to see someone is paying attention to type in the virtual domain now. So much of what we see out there is garbage. Hopefully, this guide will help clean it up. I say no letter littering!

  • I love these tips — thank you.

  • Steve says

    Cracking read, I would use em’s and percent instead of px though, makes it scaleable.

  • Great refresher! You hit on some of my pet peeves, too (the quotes indented…aaargh!). Now, if I can only convince clients to stop with double spaces in the content they provide.

  • Chris says

    This is an indispensable post. Thanks so much for sharing.

  • This is a great list! I will use this information for sure…love how you added the CSS tips as well, very helpful.

  • Very nice article!

    Just a hint: for better acessibility use em instead of px for fonts

  • Best tutorial which I have found here.
    Thanks for this tutorial

  • Nice refresher on some powerfully basic fundamentals onf typesetting. I sure needed it! Thanks.

  • 1001 says

    master class!

  • What a nice post. So simple and clear. Thank you very much.

  • Yep, clear and concise. We should all know this by now, but it’s good to see this online, so that more people have fewer excuses for bad typography.


  • Lauren says

    Wow, thanks! I have to do some serious work on my little blog design.

  • Very nice article, (re)-twitted it, bookmarked it.
    Very very simple rules to make things look good
    Thanks for sharing such wonderful stuff

  • Tom says

    This is a really good work. I had posted a topic in IxDA (Buenos Aires).
    This is something most of us sometimes forget, and we can’t realize what was the problem.

  • jayism says

    I think that the recommendations that you are making are accurate, I also think that these rules pretty much apply to design for print.

    I have been using these rules for many years and they have always worked for.

  • Nick says

    Thanks for this post. Very clear, very helpful! Off to put it into practice…

  • kilwo says

    Your notes on how to implement emphasis are incorrect. There is a tag exactly for this. It’s em and;
    1. It’s fully understood by screen readers allowing your site to be used by blind or visually impared people.
    2. It can be overridden by the end user if they need to in order to read the text properly.

  • joel says

    Thanks for this, very useful.
    My only criticism is not using English in the examples. I am guessing you have done this so as not to distract from the point, which is typographic aesthetic and readability but the meaning of the words are often intrinsically related to the way in which you lay out the type.

    I appreciate it is difficult to cover all bases at all times and in some ways it makes sense to narrow the information you are communicating.

    Thanks anyway good ref

  • kilwo, the tag is definitely the best way to go but the article isn’t about the code or applying web standards. I wanted to show different ways of achieving emphasis with CSS.

    joel, you’re definitely correct but I just wanted to use lorem ipsum text to keep the focus on the typography.

  • joel says

    fair enough, there are arguments either way but I totally understand why you used lorem ipsum.
    I guess it is maybe worth pointing out that these ‘tips’ or ‘rules’ are not always king. Sometimes you need to make the choice between the readability of the text in terms of it ‘English’ and how it looks and reads in terms of typography.

    Hope that makes sense

    Well put together anyway, just being pedantic but then I guess that is what this is about!


  • kongski says

    thank you for this..good job

  • edkilby says

    I’ve never studied typography formally, but I’ve always had a natural interest in the way type looks on a page. Finally I realize what it is that I love so much.

    Now your article puts some of those instinctual ideas of good typography into a logical framework – why something works or doesn’t. Excellent help for this novice!

    BTW, I really love the crispness of your website layout. You practice what you preach.

  • Very good post. It does remind me a lot of Mark Boulton’s post a while back. I like it though

  • Very nice and useful article. Thank you very much.

  • Robert says

    Very nice, thanks! Your Blockquote advice is great, I’ve got to use that. stumbled…

  • sravkum says

    WOW – Lot to learn from this – Good Analysis on Clean Typography which matters a lot. Good Job

  • Excellent post,, many thanks for your efforts.

  • Glenn says

    I never knew this.. aside from web design typography, this tutorial concept can be also used on graphics design typography, from brochures, flyers, etc.

  • Chris Cooper says

    Thanks. Helped us in our latest brochure for towel rails that we’ve just published.

  • Lee says

    Great post! Thanks for this up! Bumped into the article below. Hope it helps.


  • Excellent article, definitely going to implement this into future work.

  • Dwayne says

    Like the images at left for quick reference. Need to out those into Indesign and Illustrator!

  • Great post,Id agree with some of the other comments that this can be transferred across to print design as well, thanks

  • Putting together some well known rules on a single page… just what I needed to reboot my brain. Tnx!

  • G Lever says

    Thanks, I think I understand it. I will pass it on to my mate who is designing our bathroom suites catalogue

  • Manik says

    Excellent article. Thanks for the info. These ways are really simple and will definitely help in improving the typography in designs.
    Many thanks for the post.

  • lzkim says

    Thanks for the Tips… I love typography… 🙂 Good Job.

  • I completely agree. The importance of using a pencil and paper in graphic design is something I can’t stress enough.

  • Robbert says

    Nice read! The visualization of the rules on the left side of the screen makes it very easy to understand and remember.

  • THX! guy, it is very good,Excellent article!

  • Thanks so much for this post!
    These ways are really simple and will definitely help in improving the typography in designs.

  • Cuero says

    Agree with some of the other comments that this can be transferred across to print design as well, thanks!!

  • this is a nice article 🙂
    but I need demo here 🙁

  • Great post! A good reading in the cold morning thanks!

  • Ok, I have to admit it… I keep coming back to this post. (Thanks Google!)

  • Miles says

    A couple of years too late but anyway… Maybe it’s already been mentioned but you can also control both word and letter spacing. I would recommend experimenting with these controls if you want to make your online typography shine, not all browsers support it though.
    Some great tips here that I didn’t know, very useful – thanks!

  • very good and very interesting blog will help me thank all sure that I return to visit you greetings

  • Lucb1e says

    What have you done to scrolling with the arrowkeys?! Are you seriously forcing me to use the scroll feature of my trackpad, or use the scrollbar on the side which is about a third of the the width of my pinkie finger due to using no pagination in comments? Pageup and pagedown are often annoying, so that’s no alternative. Disabling javascript is no use either, if I do I can’t see any content at all.

    Luckily, my Readability bookmarklet fixes this. Let’s start reading…

  • The importance of using a pencil and paper in graphic design is something I can’t stress enough.

  • Hello my family member! I wish to say that this post is amazing, great written and include almost all significant infos. I would like to look extra posts like this .

  • Wolfgang says

    Wow. This is a fantastic article. Thank you very much to share this.

  • THANK YOU for this. As a’newbie’ in front-end web development, the wizz-kids in the office don’t always know how to explain in plain English (CSS coding) for us ‘old-new-uns’ the semantics of the font layout which your instructive article appears to do – just need to put this into practice.

  • Excellent article. Thanks for the info. These ways are really simple and will definitely help in improving the typography in designs.

  • Michael Stevens says

    I hate to point out that your blog doesn’t even follow the rules you’ve laid out here… Just sayin…

  • Admiring the persistence you put into your blog and detailed information you present.
    It’s nice to come across a blog every once in a while that isn’t the same out of date rehashed information.
    Fantastic read! I’ve saved your site and I’m adding your RSS feeds
    to my Google account.

  • Fantastic blog! Do you have any suggestions for aspiring writers?

    I’m hoping to start my own blog soon but I’m a little lost on everything.
    Would you advise starting with a free platform like WordPress
    or go for a paid option? There are so many choices out
    there that I’m completely overwhelmed .. Any ideas? Thanks a lot!