Smashing Magazine - we smash you with the information that will make your life easier. really.

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

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

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

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.

Great article, thanks!

fantastic post

Very helpful!

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

great article!

Wow, very nice article.

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

Thanks for the info. I’ll apply it.

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.

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.

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

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

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/

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

Very good article. Thank you.

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.

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.

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.

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?

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

good and very informative

A good article, but you have to remember of the many font rendering options in web browsers. IE6 still doesn’t anti-alias any text, Mac OS X users get a very hard sub-pixel rendering, hence the fonts take up more space. It’s terribly hard in web typography to follow #5 and #8. As long as we have a lot of different browsers, on a lot of different machines, running on a lot of different resolutions – it’ll be close to impossible to conform to every one of them.

Great Article ……. I learnt so much .. now about TypoGraphy

Great article!

very nice tips. thank you

Fantastic article.

Number 3. Hanging Quotes is an old rancid rule that never had any sense.

Tips 4,5 and 8 and perhaps even 3, get messed up if users are viewing the page with an adjusted browser text-size. Some of the problems can be solved using mainly em units. I always like to test the effects of browser font scaling on a design. If you’re using px like the examples you can forget about getting widows, orphans and rags right, period. And I’m quite curious why the examples in this article are shown as images instead of text+css. After all, it IS a typographic item. So the Smashing folks should be putting all these great tips in effect themselves. Informative article but apply with caution.

that’s great ^) tanks!

An eye-opener. Thanks!

thank u!

Excellent article. I am just in the process of revamping my personal blank WordPress theme aka the bones for everything custom, and this will definitely improve it.

Learned something new here today. Thank you for this article!

Thanks for the tips. They’re really good for me. I’ll do it in my site for sure.
Here is my site, hope you’ll leave some good comments on it: Hàn Quốc

Bah, print designers!

Span is not for emphasis, but feel free to use it to italicise. “b” is not for emphasis, use “strong”.

Seriously you’re going to screw around with the rag? What about when I’m reading on a smartphone or other device that needs to reflow the text. Altering the textual content to favour [trivial features of] design over content is silly IMO, web pages are not a fixed form media.

I agree with the other commenter 300px is way too narrow. Yes columnated text is easier to follow but where are you going to pull your images in? Moreover, long pages are less readable on most screens where the ratio of the medium is switched compared to most print pages (ie landscape vs portrait) and less easy to navigate as more text is pushed beyond the fold.

pbhj

Great article. lots of useful info!

Thanks for the great info! Wish my designers would have been up on this!

This is awesome! Really fantastic article!

Thanks for that! Very helpful for an amateur like me.

nice article but do you think some rules don’t apply to smashing magazine where you suggest the holy grail of line character length is 65 and smashing magazine averages 100?

love it. short & clear.

Nice article. But on the other side should be more voluminous.

@peter:
Smashing Magazine has a fluid layout. You can control it ;)

it is really useful ! thanks too much

Number one on this list is a little hypocritical, no? It claims that a “measure” more than 80 characters is too long, yet this entire article is written with “measures” that are around 100 characters, as are pretty much all the articles on SM.

To Louis (96):
tottally agree with you, don´t get me wrong, it´s a good post, but this are not rules but thinks to take into account, otherwise, all design would look the same!

greaaaaaaaaaaaaaaaaat thankx alot

Thanks for that!

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.

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.

@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.)

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

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.

Спасибо. Отличный материал.

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.

thanks for this great article !

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

New York Website Design Company uses the 8 Simple Ways to Improve Typography their Designs successfully.

This premiere full-service New York website design company delivers web design and internet marketing SEO services. Contact New York Website Design Company for all custom website design and development needs in NYC and NY state.

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

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

Great article. Thank you for your time and effort.

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

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.