Typography on the Web is not something that a lot of designers take seriously. How can we apply good typography principles to websites when we can’t have total control over the user’s experience?
There are many sites that offer principles and tutorials on controlling type with CSS. WebTypography.net translates The Elements of Typographic Style to the Web and its author, Richard Rutter, also wrote an article at 24 Ways about Vertical Rhythm that’s worth checking out. Mark Boulton mentions this article in his entry, Incremental Leading, and Mark also gives us Five Simple Steps to Typesetting on the Web (and be sure you read the Five Simple Steps to Better Typography to get a better grasp on general typography principles). Unfortunately the Mark’s Web typography series doesn’t have all the posts linked in every section so here’s Part 1 (Glyphs), Part 2 (Dashes) and Part 3 (Printing the Web).
Edit: Vivien at InspirationBit reminded me about the 16 Bits of Exceptional Typography Resources post she did earlier, which has more excellent sites for you to bookmark for your Web typography needs!
A Few of the Best
There are quite a few great examples of excellent web typography (and John from iLoveTypography has drawn up his own list of 15 Excellent Examples of Web Typography).
I find Miguel Ripoll’s work awe-inspiring. I really love the blog he designed for a UC Berkley professor. Miguel breaks the bonds that we’ve tied around web typography and his work is much outside the norm.
I’ve mentioned Jon Tan before and I’ll mention him again! I love the simple elegance of his website.
Astheria is a new blog I found the other day and it is quite similar to Jon Tan’s site. I love Kyle’s sparse use of the color yellow; when it’s used, it really pops. The only thing I’d change about this website is to add more pictures. A few strategically placed photos could really pump up the visual appeal of this site.
What sites have you found that are typographical inspirations to you? What CSS resources do you find useful when manipulating type?
Like this article? Subscribe to Creative Curio! As always, it’s free and delivered right to your favorite RSS reader!
Jon Tan’s site is lovely. Also a fan of Astheria. Note this line in the CSS:
font-family: Palatino,"Palatino Linotype",Georgia,serif;This site is also a great example of good and consistent hierarchic text. (32px used for titling; 18px for sub-heads; 14px for body; and 12px for meta info’.)
I like Freelance switch since they moved to dark text on a light background; very clean and ordered.
Jon Tan’s site is really nice. I noticed he’s enclosing the comments inside curly braces, like John on iLT
Back in February I’ve posted 16 bits of Typography Resources on the Web, and afterwards 8 web sites whose typography I really liked back then.
Lauren, just wanted to advise you that you shouldn’t keep such long permalinks for your posts, and watch out for all those apostrophes that are translated like %e2%80%99 in the URL. It’s okay to have long titles for your posts, but it’s best to shorten and adjust the slugs for such posts before publishing them.
Happy New Year!!!
Johno,
I had not noticed that. I didn’t realize you could get so specific with font selection on a website! At least most designers will be able to see its beauty (which is his audience anyway!). I like the way he creates the hierarchy with his text, too. It’s very beautiful.
Vivien (inspirationbit),
Oooo, and that EM Calculator is getting bookmarked! And those typography resources are really good. I’m going to add your link to the post above!
Again sorry about getting your comment flagged as spam! There’s gotta be a “white list” plugin out there somewhere… Yes, I notice the curly braces now that you point them out! It seems to be a trend to use a lot of punctuation (and sometimes very large punctuation) in typography design these days. I guess I haven’t scrubbed through your archives as thoroughly as I first thought, Vivien! I have not seen those two posts you mentioned. Thank you for sharing them! How funny that Grow Collective is one of your favorite websites with good typography. Did you know Jon Tan is a part of that?
Ah, good point about editing the slug. I never thought of that. Thanks for reminding me
And Happy New Year to you as well!
Thanks for editing your post with a link to my resource, Lauren. I’ll be posting Best of Inspiration Bit in 2007 soon to feature some of the past articles.
Yes, I did see that Jon Tan is a part of the GrowCollective. I guess you can always see the talent behind the site creators
Vivien,
Wonderful idea (and easier to provide content for you) to post a list of The Best of. I’m looking forward to it! Maybe I’ll catch some articles I missed the first go around!
i think you may find that Jon Tan has borrowed heavily from Khoi Vinh’s site http://www.subtraction.com which is a well known example of how to design a beautiful grid based website. Khoi is design director of nytimes.com and his site is well worth a look for anyone interested in developing their web layout skills.
Just thought he should get a mention as he is obvoiusly a very strong influence for Jon Tan.
danDNA,
Thanks for your observation and addition to this little collection of good examples of typography on the Web. I have seen the Subtraction site before but never really made the connection with Jon Tan. There is quite a similarity, though! Ha! I just read on Khoi’s site that he attended Otis Design College! I am considering taking a letterpress class there. What a small world…
The post series 5 Simple Steps To Better Typography looks interesting. Although I found some of it a bit frustrating. Mark used jargon that I wasn’t familiar with: he defined “measure”, but not “leading”. He said that leading in sometimes incorrectly called line-height. Why is that incorrect, what is leading if not line height?
Then I got to the post about hanging.
Umm, if I were using a bulleted list or a blockquote I think I would want it to be inset from the text, to stand out, to make it easy to identify that section as different from the rest of the text.
Sounds like he’s talking definitively about something that is a style/personal preference issue.
I’m no expert though, I could be wrong.
Anyway, I will definitely put more thought into typography when I’m next designing.
kristarella,
Hmm, I am not sure the difference between leading and line height as he is using it, but my guess would be that line-height is what leading is called in CSS. Perhaps if he was going to mention it, he should’ve explained it. It sounded more like he was trying to get a chip off his shoulder. I think perhaps that the difference between line height and leading is probably a technicality; one includes something that the other doesn’t. Leading originally was literally strips of lead that were inserted between the lines of text to increase the space. I dunno, maybe John can answer that for us, I’ll ask him.
I agree with you about the hanging punctuation. I just glanced over what Mark wrote because I already knew what it was, but he described it differently than what I have heard. To me when the punctuation is hung, that means the lines that wrap to the second line are indented to match the first (so you don’t have them going back out to the regular left alignment). Maybe I misunderstood, but that’s what I’ve always thought and done. I think it looks a little odd to not indent the bullets. I would say do what looks best to you. If a type-freak says you’re ignorant for doing it, oh well. I definitely put my quote marks outside the margin, though, if they’re at the start of a line. It looks funny to not have the words of the first line aligned with the rest of the quote. The marks make an awkward almost indent. Does that make sense at all?
Yes, it would have been good to explain terms when ranting about what’s correct and incorrect.
Oh yeah, I see what you mean about the quote marks. Definitely want all of the lines of text to match each other.
@kristarella
Just briefly in defence of Mark Boulton: when talking about any subject, it’s not also viable to define every term used. It’s difficult to know where to draw the line, but based on his audience and time constraints, I think he can be forgiven for not defining leading.
What Lauren says about line-height being used in CSS is about right. In typography leading refers to the vertical spacing between baselines. These days linespacing is synonymous with leading. Line-height is something else, and is not strictly a typography term. You won’t hear typographers talking about ‘line-height’–they’ll talk about vertical measure in terms of leading and vertical rhythm or vertical motion.
John,
Thanks for that (and for your help in the comments over at iLT).
So basically, line height is a CSS property and leading is a real typography term referring to the space between each baseline.
As we say in Japan, hai!
It’s been an interesting discussion, hasn’t it.
Thanks johno,
I recognise that defining things can get little crazy. Since I’d never seen his site before, I didn’t know what his audience was, I was mainly just going from the fact that he defined “measure”, which I already knew about, but not leading, which I’d never heard of before.
kristarella,
Sometimes it’s hard to communicate without being in person and having the capability to point things out and gesture. There is so much that gets communicated non-verbally! I find it especially difficult to convey thoughts and ideas about designs, which is why it’s good to have things like the elements and principles of design and a great resource like John’s site for all the different bits of a character.
Glad we’ve got this all figured out! Great learning experience for me (and you, too, I hope)
those naming conventions always cause so much confusions, aren’t they?
I thought you might also be interested in checking out this resource on Typesetting practices with CSS. They’re all very detailed with a corresponding visual representation which helps a lot.
Thanks for your help John, Lauren and inspirationbit. It’s all a good learning process!
inspirationbit,
Thanks for the link. I haven’t seen that one before! Another add to the ever-expanding del.icio.us bookmarks!
kristarella,
So glad you’ve learned something new!