Twitter Flickr Tumblr Pinterest Dribbble

8 Simple Ways to Improve Typography In Your Designs

I wrote this arti­cle for Smash­ing Mag­a­zine and it was pub­lished last Fri­day on their site. I’m re-publishing it here for your read­ing plea­sure. Enjoy.

Many peo­ple, design­ers included, think that typog­ra­phy con­sists of only select­ing a type­face, choos­ing a font size and whether it should be reg­u­lar or bold. For most peo­ple it ends there. But there is much more to achiev­ing good typog­ra­phy and it’s in the details that design­ers often neglect.

These details give the designer total con­trol, allow­ing them to cre­ate beau­ti­ful and con­sis­tent typog­ra­phy in their designs. While these details can be applied across dif­fer­ent types of media, in this arti­cles we’re going to focus on how to apply them to web design using CSS. Here are 8 sim­ple ways you can use CSS to improve your typog­ra­phy and hence the over­all usabil­ity of your designs.

Measure

Measure

The mea­sure is the length of a line of type. To a reader’s eye, long or short lines can be tir­ing and dis­tract­ing. A long mea­sure dis­rupts the rhythm because the reader has a hard time locat­ing the next line of type. The only time a nar­row mea­sure is accept­able is with a small amount of text. For opti­mum read­abil­ity you want the mea­sure to be between 40 – 80 char­ac­ters, includ­ing spaces. For a single-column design 65 char­ac­ters is con­sid­ered ideal.

A sim­ple way to cal­cu­late the mea­sure is to use Robert Bringhurst’s method which mul­ti­ples the type size by 30. So if the type size is 10px, mul­ti­ply­ing it by 30 gives you a mea­sure of 300px or around 65 char­ac­ters per line. The code would look some­thing like this:

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

Leading

Leading

Lead­ing is the space between the lines of type in a body of copy that plays a big role in read­abil­ity. Cor­rectly spaced lines make it eas­ier for a reader to fol­low the type and improves the over­all appear­ance of the text. Lead­ing also alters typo­graphic color, which is the den­sity or tone of a composition.

Many fac­tors affect lead­ing: type­face, type size, weight, case, mea­sure, wordspac­ing, etc. The longer the mea­sure, the more lead­ing is needed. Also, the larger the type size, the less lead­ing is required. A good rule is to set the lead­ing 2-5pt larger than the type size, depend­ing on the type­face. So if you set the type at 12pt, a 15pt or 16pt lead­ing should work well on the web.

This takes some finess­ing to get the right spac­ing but here is an exam­ple of what the code would look like:

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

Hanging Quotes

Hanging

Hang quotes in the mar­gin of the body of text. By not doing so a quo­ta­tion mark that is flush with the text will inter­rupt the left mar­gin and dis­rupt the rhythm of the reader. Hang­ing quotes keeps the left align­ment intact and bal­anced there­fore increas­ing readability.

This is achieved very eas­ily with CSS using the block­quote element:

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

The neg­a­tive indent will vary depend­ing on the type­face, type size and margins.

Vertical Rhythm

Baseline

A base­line grid is the foun­da­tion for con­sis­tent typo­graphic rhythm on a page. It allows the reader to eas­ily fol­low the flow of the text, which in turn increases read­abil­ity. A con­tin­u­ous rhythm in the ver­ti­cal space keeps all the text on a con­sis­tent grid so that pro­por­tion and bal­ance are retained through­out the page, no mat­ter the type size, lead­ing or measure.

To keep a ver­ti­cal rhythm in CSS, you want the spac­ing between ele­ments and the line-spacing (lead­ing) to equal the size of the base­line grid. For exam­ple, lets say you’re using a 15px base­line grid, mean­ing that there are 15px between each base­line. The line-spacing would be 15px and the space between each para­graph 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 para­graph ele­ment to align with the grid, keep­ing the ver­ti­cal rhythm of the text.

Widows & Orphans

Widows

A widow is a short line or sin­gle word at the end of a para­graph. An orphan is a word or short line at the begin­ning or end of a col­umn that is sep­a­rated from the rest of the para­graph. Wid­ows and Orphans cre­ate awk­ward rags, inter­rupt the reader’s eye and affect read­abil­ity. They can be avoided by adjust­ing the type size, lead­ing, mea­sure, wordspac­ing, let­terspac­ing or by enter­ing man­ual line breaks

Unfor­tu­nately, there is no easy way to pre­vent typo­graphic wid­ows and orphans with CSS. One way to remove them has been men­tioned 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.

Emphasis

Emphasis

Giv­ing empha­sis to a word with­out inter­rupt­ing the reader is impor­tant. Italic is widely con­sid­ered to be the ideal form of empha­sis. Some other com­mon forms of empha­sis are: bold, caps, small caps, type size, color, under­line or a dif­fer­ent type­face. No mat­ter which you choose, try to limit your­self to using only one. Com­bi­na­tions such as caps-bold-italic are dis­rup­tive and look clumsy.

Here are some dif­fer­ence ways of cre­at­ing empha­sis 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 sup­ports the small-caps variant.

Scale

Scale

Always com­pose with a scale, whether it’s the tra­di­tional scale devel­oped in the six­teenth cen­tury that we’re all famil­iar with, or one you cre­ate on your own. A scale is impor­tant because it estab­lishes a typo­graphic hier­ar­chy that improves read­abil­ity and cre­ates har­mony and cohe­sive­ness within the text.

An exam­ple of a typo­graphic 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

Rag

When set­ting a block of text unjus­ti­fied with a left or right align­ment, be sure to keep the rag (the uneven side) bal­anced with­out any sud­den “holes” or awk­ward shapes. A bad rag can be unset­tling to the eye and dis­tract the reader. A good rag has a “soft” uneven­ness, with­out any lines that are too long or too short. There is no way of con­trol­ling this in CSS, so to achieve a good rag you must make man­ual adjust­ments to the block of text.

Hyphen­ation can also help with pro­duc­ing clean rags, but unfor­tu­nately CSS can’t han­dle this at the moment. Maybe in the near future we’ll see some con­trol in CSS 3. Not all is lost though. There are some server and client side solu­tions for auto hyphen­ation like phpHy­phen­ator and Hyphen­ator as well as online gen­er­a­tors.

Further Resources

Here’s a list of related arti­cles and books to fur­ther help you with the details.

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

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

  • Wow, what a great resource! Thanks Antonio!

  • Andrew says

    Great post. I was just look­ing for some­thing that would hyphen­ate text for me and you seem to pro­vide some solu­tions as far as that goes. Nice post and a lot of things I’ll be putting into my next project here.

  • Brant says

    Excel­lent work, Anto­nio. I like the CSS exam­ples; noth­ing like a lit­tle code to drive it home.

  • I must say, I really appre­ci­ate the work you’ve been putting in as far as grids and typog­ra­phy in the web realm. There’s just not that much to look to as far as the web is con­cerned; other than just try­ing to do your best on apply­ing all the print rules to web design. But that only helps in the design process, not so much in the cod­ing process. So, thank you.

  • Jannis says

    Most excel­lent post! Thanks for the write-up.

    Espe­cially liked the part about the block­quo­ta­tion marks with a neg­a­tive indent.

    Look­ing for­ward to more arti­cles!
    J.

  • This is fan­tas­tic stuff. Thanks once again, Anthony.

  • Very nice post !

  • Daniel says

    Some great tips. I’ve learnt a lot of these through some tor­tur­ous CSS exper­i­men­ta­tion — but there’s a few tricks that had passed me by. The hang­ing quotes one is par­tic­u­larly useful!

  • Lee says

    Love the writ­ing. Wish I knew the web well enough to under­stand where to put the codes! One thing I noticed that some design­ers for­get is “rivers” — when a neg­a­tive line runs down through a body of text. Not sure what the code would be to change that though!

    Thanks again for another insight­ful post!

  • The under­ly­ing con­cept behind this arti­cle is atten­tion to details — I love it.

    Re: Clean rags — while I agree, when set­ting out your designs, it is hard to do this when using Lorem as often (esp. with Lorum gen­er­a­tors — http://​www​.lip​sum​.com) the words pro­duced are so long that line returns hap­pen soon after the first word!

    (Although no-one pub­lishes using Lorem, so really only a design­ers problem)

  • Matt Braun says

    I have read a lot of arti­cles on web typog­ra­phy but this is def­i­nitely one of the best. Its clear and to the point, nice post.

  • Thanks so much for this post, Mr. Caru­sone! I like the tip about cal­cu­lat­ing the mea­sure of the line using the type size mul­ti­plied by 30.

  • Zach says

    this is a great ref­er­ence and resource for those of us who fall into ruts when try­ing deter­mine whether or not our visual block­ing for con­tent looks cor­rect or not

  • Great list! One of the best typo­graphic posts I’ve read anywhere.

  • Ahmed says

    Awe­some arti­cle :)
    As a new­bie, these advices are really use­ful, and sim­ple to understand.

  • andrew says

    Pure good­ness in this arti­cle. These are some great steps to mak­ing a site look much more pro­fes­sional. Well done.

  • Hmmm. This is print wis­dom, no? Or rather, it applies to read­ing texts in a pre­dictable, sequen­tial manner.

    It’s rare for peo­ple to read web texts in this way: they scoot up and down, skip bits and reread oth­ers. So, while I wouldn’t dis­agree with most of this, I think it kind of misses the point. For exam­ple, when do we use a quote mark to sig­nal a block­quote on the web? We don’t have that lux­ury with user gen­er­ated con­tent: we nor­mally indent the quote. (I guess :before could be used, but it’s not well supported).

    And some bits I’d argue with:

    Giv­ing empha­sis to a word with­out inter­rupt­ing the reader is impor­tant. Italic is widely con­sid­ered to be the ideal form of emphasis.

    If I’m read­ing a novel, that’s fair enough. But if I’m skim read­ing I want empha­sised words to be very clearly dif­fer­en­ti­ated from the rest of the text. So while bold­ing is ugly, it’s effective.

    It’s the dif­fer­ence between read­ing with a designer’s eyes and a reader’s eyes.

    Hav­ing said all that, i think the bits on mea­sure and lead­ing are excel­lent, tak­ing into account a lot of vari­ables, rather than just say­ing 150% and 10 – 15 words is right.

  • Leon, these are typo­graphic prin­ci­ples that lead to bet­ter typog­ra­phy. 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 block­quotes, that’s the kind of the pur­pose of the tag. Ital­ics are the ideal form of empha­sis but in the arti­cle I also men­tion other ways of cre­at­ing empha­sis. The point of the Empha­sis por­tion is not to state that you MUST use ital­ics, but that you need to keep it to only one form of empha­sis, whether it’s italic, bold or caps. If you think BOLD works bet­ter than ital­ics for a cer­tain site design, then that’s absolutely acceptable.

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

  • Sandro says

    Anto­nio which type­face u used here on this image pre­sent­ing this post?
    It’s not Hel­vetica, Univers, Frutiger etc.

  • Anto­nio,

    You state that empha­sis text shouldn’t inter­rupt the reader and that ital­i­cis­ing is ‘con­sid­ered ideal’. Like I say, that’s fine in the novel – read­ing world, but it doesn’t nec­es­sar­ily 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 dif­fer­ent (and it’s not fully supported).

    I know you’re sug­gest­ing ways to improve typog­ra­phy (and the ideas are gen­er­ally great!) — but my point is that what you’re say­ing applies to print typog­ra­phy, or read­ing in a cer­tain way. Some of these rules will aid online read­ing, but there are some exceptions.

  • There are excep­tions to every­thing but these don’t only apply to print, they are work for the web. Again it’s up to the designer to under­stand these prin­ci­ples and know how and when to apply them. Inter­rupt­ing the read­ing and call­ing atten­tion to a word are two dif­fer­ent things, which I think you’re con­fus­ing. You want to cre­ate empha­sis with­out dis­tract­ing the read­ers, that’s the point of that one prin­ci­ple. Over empha­siz­ing a word can make it harder to read which in turn will inter­rupt the reader. If the right empha­sis is applied, the reader will under­stand the impor­tance of that empha­sized word or sen­tence por­tion with­out being dis­tracted from the over­all body of text.

    In terms of the block­quote, cer­tain peo­ple use graph­ics for quotes, but this prin­ci­ple applies to when real quotes are used and also for actual quotations.

  • San­dro, which type­face are you refer­ring to?

  • I assume he means the image with the big 8 in it, fol­lowed by Mea­sure, 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!

  • Con­grat­u­la­tions Antonio.

  • J says

    Leon,

    Maybe you should take note. Before you start pick­ing holes in the arti­cle you might want to look at the design of your blog.

  • J, Ouch!

    I’m not ques­tion­ing Antonio’s abil­i­ties as a designer (I think the work he’s done on this site is fantastic).

    Any­way, I do fol­low most of the rules he lists above (con­sis­tent lead­ing and mar­gins between block ele­ments, for exam­ple). My only point is that they’re com­ing from a per­spec­tive that isn’t wholly applic­a­ble to online reading.

    Any­way, I prob­a­bly did mis­read what he said about empha­sis: I cer­tainly accept what he says in the com­ments (it’s the dif­fer­ence between em and strong, I guess).

  • These are very impor­tant 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 web­site. I saw your post on Smash­ing­Magazine a few days ago and I really loved the ideas!

    Its a good rule of thumb to fol­low. I“ll def­i­nitely book­mark this later on ;)

    n

  • Emiliano says

    What about if the size of the font is set using per­cent­ages (as in set­ting body{ font-size:80%} and all font sizes after­word also set using %) ?

  • Nice advices. I’ m look­ing for­ward 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 num­ber. 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 reset­ting it for dif­fer­ent sizes of text.

  • teddY says

    Thanks for the arti­cle, Anto­nio. I guess in my next redesign, I’ll have to take your sug­ges­tions seri­ous to improve the typog­ra­phy. Mine is in a total mess, with lit­tle ver­ti­cal con­sis­tency. I find it a very inter­est­ing rule because I’ve never noticed it before, but when you wrote about it, I see it almost every­where — in mag­a­zines, in well-designed lay­outs, news­pa­pers etc. Wid­ows and orphans are quite hard to con­trol on a fluid lay­out, but it’s very applic­a­ble in print (I real­ized that there’s a con­scious effort in news­pa­pers to avoid such things) and in sta­tic webpages.

    For the empha­sis, I have to agree that it’s best if one can stick to only one style — bold + italic is a total nono, usu­ally I take it as a dou­ble empha­sis but it doesn’t make much sense to me (and it’s visu­ally dis­tract­ing as well). I gen­er­ally use ital­ics for empha­sis because I feel that bold­ing the text destroys the flow, although I have no qualms with peo­ple using bold. It’s a per­sonal quirk, I guess.

    The resources link are ter­rific! Thanks for shar­ing, and happy easter!

  • Ahh my apolo­gies. Guess that’s just me being to syn­di­cal (and ignorant)

  • Thanks for tips, seem­ingly obvi­ous but very nifty.

  • Absolutely enlight­en­ing. Thank you.

  • Anto­nio: thanks for this post. I am not a designer but some­one who tries to get what I want by explain­ing it, at length and badly, to another per­son who is a designer. So many of the things you wrote about are exactly the issues I have with the “look” of some­thing, but haven’t been able to con­vey. I’m pleased to know that I’m not crazy and there is a design ratio­nale behind my gut feel­ings about ver­ti­cal spac­ing, font size, and wow, even a phrase for those single-word end­ings I’ve always hated — wid­ows and orphans!! I guess it must be time to start learn­ing how to do things for myself. Again, thank you

  • ludwig says

    Clean Rags: Although there is no way of con­trol­ling 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 guid­ance and code to refer to, great stuff.

  • philip says

    Nice arti­cle. As a for­mer type­set­ter, I am always a fan of good typog­ra­phy. This arti­cle reminds me how lit­tle con­trol we have over type on the web ver­sus page lay­out soft­ware, and how much I need to update my site! :)

    I have to jump in on the dis­cus­sion about the block­quotes, though; block­quotes are not sup­posed to begin with a quo­ta­tion mark. If you check resources for print, such as the Chicago Man­ual of Style, they all say that long quo­ta­tions (gen­er­ally 2 or more sen­tences) should be set apart from the reg­u­lar text, indented on the left, be single-spaced, and not begin with quo­ta­tion marks.

    The block­quote exam­ple on w3​.org backs this up. Wikipedia has nice sim­ple cov­er­age of block quotes, too.

    Oth­er­wise, a fine arti­cle with great exam­ples. Thanks!

  • Jason says

    Hey, Amaz­ing 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
    Jason

  • Nice tip. Thanks.

  • tim says

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

    Tim
    http;//twitter.com/goldeneye

  • Chris J says

    Excel­lent tips over­all, but I totally dis­agree when it comes to man­ual line breaks to improve rag and/or widows/orphans.

    That’s great for print where you (hope­fully!) know how text will wrap on the printed page, but on the web you have no idea what your reader is see­ing. Maybe her default font size is 32, or 10, in which case man­ual line breaks will def­i­nitely cause prob­lems worse than the occa­sional widow or inel­e­gant rag.

    Sad but true: at this stage in web lay­out, use seman­tic mark-up and hope for the best (which you’ll usu­ally 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 sim­ply doesn’t work in web browsers (yet?).

  • I am con­stantly look­ing for ways to improve my typog­ra­phy online and I really like the hang­ing quotes tip.

    great stuff

  • I read the arti­cle at Smash­ing, now I get to thank you personally!

  • For those of us who avoid px mea­sure­ments for scal­able web­pages, I like to set my columns in ex. The little-used ex (x-height) unit is about the size of a low­er­case ‘x’; that’s much closer to “aver­age let­ter size” than ems. Thus a col­umn width of 60ex to 70ex looks great imho.

  • Great post, I’m defaintely going to be com­ing back to this page when I pro­duce my next web design. :-)

  • Really use­ful and con­cise arti­cle, some really handy tips, I will cer­tainly be using at a ref­er­ence in the future

  • Aleksey says

    Good tips, thank you.

    I found it a bit ironic that I had to read this arti­cle in a jagged sans-serif font — the default sans-serif on my GNU Linux sys­tem. For the web design­ers out there, keep in mind that the plat­form you are devel­op­ing on is not the only one that exists. If you would like your typog­ra­phy to be cross-platform friend­lier, these are the fonts you should include in you CSS: Lib­er­a­tion Sans, Lib­er­a­tion Serif, Lib­er­a­tion Mono.

  • Real read­ing mate­r­ial for every web-designer and web-developer. I have com­pleted the read­ing with­out blink my eyes. :) Thank You Sir.

  • revulú says

    per­fect post. thank you.

  • thank you for a nice tutorial

  • Rebecca says

    Well done. I taught typog­ra­phy and appre­ci­ate these suc­cinct tips.

  • Robert says

    Very nice overview. I pre­fer the per­cent­age method but nev­er­the­less inspir­ing to take a closer look again…

  • andy t. says

    if you ask me, what makes this post out­stand­ing from the hun­dreds of tips over the net is the good vs bad sam­ples. noth­ing beats a good work­ing sam­ple. thanks a lot for these tips. it is truly useful.

    - andy t.
    http://​crest​medi​ainc​.com

  • Excel­lent post! These “rules” are just as applic­a­ble for print typog­ra­phy as they are for the web, but it’s nice to see some­one is pay­ing atten­tion to type in the vir­tual domain now. So much of what we see out there is garbage. Hope­fully, this guide will help clean it up. I say no let­ter littering!

  • I love these tips — thank you.

  • Steve says

    Crack­ing read, I would use em’s and per­cent 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 con­vince clients to stop with dou­ble spaces in the con­tent they provide.

  • Chris says

    This is an indis­pens­able post. Thanks so much for sharing.

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

  • Very nice article!

    Just a hint: for bet­ter aces­si­bil­ity use em instead of px for fonts
    http://​www​.clagnut​.com/​b​l​o​g​/​3​48/

  • Best tuto­r­ial which I have found here.
    Thanks for this tutorial

  • Nice refresher on some pow­er­fully basic fun­da­men­tals onf type­set­ting. I sure needed it! Thanks.

  • 1001 says

    mas­ter class!

  • What a nice post. So sim­ple and clear. Thank you very much.

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

    Cheers!

  • Lauren says

    Wow, thanks! I have to do some seri­ous work on my lit­tle blog design.

  • Very nice arti­cle, (re)-twitted it, book­marked it.
    Very very sim­ple rules to make things look good
    :)
    Thanks for shar­ing such won­der­ful stuff

  • Tom says

    This is a really good work. I had posted a topic in IxDA (Buenos Aires).
    This is some­thing most of us some­times for­get, and we can’t real­ize what was the prob­lem.
    Thanks!

  • jayism says

    I think that the rec­om­men­da­tions that you are mak­ing are accu­rate, 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 help­ful! Off to put it into practice…

  • kilwo says

    Your notes on how to imple­ment empha­sis are incor­rect. There is a tag exactly for this. It’s em and;
    1. It’s fully under­stood by screen read­ers allow­ing your site to be used by blind or visu­ally impared peo­ple.
    2. It can be over­rid­den by the end user if they need to in order to read the text properly.

  • joel says

    Thanks for this, very use­ful.
    My only crit­i­cism is not using Eng­lish in the exam­ples. I am guess­ing you have done this so as not to dis­tract from the point, which is typo­graphic aes­thetic and read­abil­ity but the mean­ing of the words are often intrin­si­cally related to the way in which you lay out the type.

    I appre­ci­ate it is dif­fi­cult to cover all bases at all times and in some ways it makes sense to nar­row the infor­ma­tion you are communicating.

    Thanks any­way good ref

  • kilwo, the tag is def­i­nitely the best way to go but the arti­cle isn’t about the code or apply­ing web stan­dards. I wanted to show dif­fer­ent ways of achiev­ing empha­sis with CSS.

    joel, you’re def­i­nitely cor­rect but I just wanted to use lorem ipsum text to keep the focus on the typography.

  • joel says

    fair enough, there are argu­ments either way but I totally under­stand why you used lorem ipsum.
    I guess it is maybe worth point­ing out that these ‘tips’ or ‘rules’ are not always king. Some­times you need to make the choice between the read­abil­ity of the text in terms of it ‘Eng­lish’ and how it looks and reads in terms of typography.

    Hope that makes sense

    Well put together any­way, just being pedan­tic but then I guess that is what this is about!

    thanks

  • kongski says

    thank you for this..good job

  • edkilby says

    I’ve never stud­ied typog­ra­phy for­mally, but I’ve always had a nat­ural inter­est in the way type looks on a page. Finally I real­ize what it is that I love so much.

    Now your arti­cle puts some of those instinc­tual ideas of good typog­ra­phy into a log­i­cal frame­work — why some­thing works or doesn’t. Excel­lent help for this novice!

    BTW, I really love the crisp­ness of your web­site lay­out. You prac­tice 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 use­ful arti­cle. Thank you very much.

  • Robert says

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

  • sravkum says

    WOW — Lot to learn from this — Good Analy­sis on Clean Typog­ra­phy which mat­ters a lot. Good Job

  • Excel­lent post„ many thanks for your efforts.

  • Glenn says

    I never knew this.. aside from web design typog­ra­phy, this tuto­r­ial con­cept can be also used on graph­ics design typog­ra­phy, from brochures, fly­ers, etc.

  • Chris Cooper says

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

  • Excel­lent arti­cle, def­i­nitely going to imple­ment this into future work.

  • Dwayne says

    Like the images at left for quick ref­er­ence. Need to out those into Inde­sign and Illustrator!

  • Great post,Id agree with some of the other com­ments that this can be trans­ferred across to print design as well, thanks

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

  • G Lever says

    Thanks, I think I under­stand it. I will pass it on to my mate who is design­ing our bath­room suites catalogue

  • Manik says

    Excel­lent arti­cle. Thanks for the info. These ways are really sim­ple and will def­i­nitely help in improv­ing the typog­ra­phy in designs.
    Many thanks for the post.

  • lzkim says

    Thanks for the Tips… I love typog­ra­phy… :-) Good Job.

  • I com­pletely agree. The impor­tance of using a pen­cil and paper in graphic design is some­thing I can’t stress enough.

  • Robbert says

    Nice read! The visu­al­iza­tion of the rules on the left side of the screen makes it very easy to under­stand and remember.

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

  • Thanks so much for this post!
    These ways are really sim­ple and will def­i­nitely help in improv­ing the typog­ra­phy in designs.

  • Cuero says

    Agree with some of the other com­ments that this can be trans­ferred across to print design as well, thanks!!

  • this is a nice arti­cle :)
    but I need demo here :(

  • Great post! A good read­ing in the cold morn­ing thanks!

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

  • Miles says

    A cou­ple of years too late but any­way… Maybe it’s already been men­tioned but you can also con­trol both word and let­ter spac­ing. I would rec­om­mend exper­i­ment­ing with these con­trols if you want to make your online typog­ra­phy shine, not all browsers sup­port it though.
    Some great tips here that I didn’t know, very useful — thanks!

  • very good and very inter­est­ing 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 seri­ously forc­ing me to use the scroll fea­ture of my track­pad, or use the scroll­bar on the side which is about a third of the the width of my pinkie fin­ger due to using no pag­i­na­tion in com­ments? Pageup and page­down are often annoy­ing, so that’s no alter­na­tive. Dis­abling javascript is no use either, if I do I can’t see any con­tent at all.

    Luck­ily, my Read­abil­ity book­marklet fixes this. Let’s start reading…

  • The impor­tance of using a pen­cil and paper in graphic design is some­thing I can’t stress enough.

  • Hello my fam­ily mem­ber! I wish to say that this post is amaz­ing, great writ­ten and include almost all sig­nif­i­cant infos. I would like to look extra posts like this .

  • Wolfgang says

    Wow. This is a fan­tas­tic arti­cle. Thank you very much to share this.

  • THANK YOU for this. As a’newbie’ in front-end web devel­op­ment, the wizz-kids in the office don’t always know how to explain in plain Eng­lish (CSS cod­ing) for us ‘old-new-uns’ the seman­tics of the font lay­out which your instruc­tive arti­cle appears to do — just need to put this into practice.

  • Excel­lent arti­cle. Thanks for the info. These ways are really sim­ple and will def­i­nitely help in improv­ing the typog­ra­phy in designs.

  • Michael Stevens says

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

  • Like which ones?

  • Admir­ing the per­sis­tence you put into your blog and detailed infor­ma­tion you present.
    It’s nice to come across a blog every once in a while that isn’t the same out of date rehashed infor­ma­tion.
    Fan­tas­tic read! I’ve saved your site and I’m adding your RSS feeds
    to my Google account.

  • Fan­tas­tic blog! Do you have any sug­ges­tions for aspir­ing writers?

    I’m hop­ing to start my own blog soon but I’m a lit­tle lost on every­thing.
    Would you advise start­ing with a free plat­form like Word­Press
    or go for a paid option? There are so many choices out
    there that I’m com­pletely over­whelmed .. Any ideas? Thanks a lot!