/CSS/ Better web typography
22/01/2008 | Filed under Develop > CSS
Craig Grannell demonstrates how to take a leaf out of print typography’s handbook in order to transform your type using a baseline grid
The world of print design still hasn’t made a substantial impression on the web. Sure, a few things are nicked now and again, but most web designers remain blissfully unaware of what their QuarkXPress- or InDesign-loving pals are up to. Mostly, that’s fine, but there are occasions when web designers should turn to print specialists for their know-how, and one of these occasions is the use of type.
Successful typography should come naturally to print designers, but lettering is lagging behind on the web. Things are getting better, with web designers understanding CSS and getting to grips with handy tricks such as Flash image replacement, but we want more! Which is why we’re delving into the murky waters of the baseline grid and looking at how it can help your online type.
A baseline grid is something that forces text to adhere to the spacing in a ruled pad. Vertical rhythm is maintained down the page, which is particularly handy for books because the words on one page won’t be visible in the gaps between the lines overleaf. However, it also results in great spacing that’s easy on the eye. The printing issue isn’t that relevant online, but rhythm is – text can be hard to read onscreen, so any method that can make this process easier is worth investigating.
About the author:
Name: Graig Grannell
Site: www.snubcommunications.com
Areas of expertise: Information architecture, site concepts, graphics, interface and front-end design
Clients: Swim~, Rebellion, IDG
Who’s faster: Speedy Gonzales or Road Runner? Speedy Gonzales!
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
Comments
Carly / 22/01/2008 / 18:26 / http://twisted-barfly.co.uk
Thank you for this fab fab fab tutorial - I followed it today, and even though the link to the stylesheet was wrong in the tutorial file (I soon figured this out myself) I was very keen to accomplish the same results as the demo.
I am now going to rework my own site in a few weeks, using this grid priniciple. So, thank you!
Timothy Long / 25/01/2008 / 23:13 / http://www.mymathematicalmind.com
Amazing resource. Definitely worth holding onto.
adam / 27/01/2008 / 01:30 / http://www.cubixstudios.com
love this tutorial, love this site, really helpful and some great ideas. keep it up
hppt://www.cubixstudios.com
Rainer / 31/01/2008 / 15:48 / http://www.proxiss.de
What I am missing for my web projects is a professional list that answers the following questions:
- What fonts can be used together on one page
- What fonts should be used on bold places, what fonts on tiny writings
- What fonts look equal on Win, Linux and Mac
Do you have an answer?
Thanks!
James Whittaker / 01/02/2008 / 15:18 / http://www.jameswhittaker.com
Web typography is very important and something that can very easily overlooked. Working with em's against a set vertical rhythm can be confusing at first but the results can be stunning.
To help people with vertical rhythm and typography I have built a calculator to do the hard work for you. You can see the web based version and my associated blog post here: http://www.jameswhittaker.com/blog/article/em-based-layouts-vertical-rhythm-calculator/ . There is also an Adobe AIR version too so that you can run the tool on your desktop, link is in the blog post.
Nant Smiley / 08/02/2008 / 19:03 / http://bestdesgnstudios.com
I don’t believe this technique would stand up to vigorous commercial use.
The text has to either be parsed (server or client side) to identify the characters or character combinations to be wrapped in HTML elements. That’s a huge ask on most content rich sites.
It also uses prioritised fonts that may or may not be used on a users system - we can do that...now; but, a designer never designs with fall back option in mind.
keif / 07/04/2008 / 18:28 / http://ikeif.net
@Nant Smiley - designers do not design with fallback in mind, but I'd say it's time they started. Web developers have to design to accommodate with older browsers in mind - many of which can't support a design, creating an ugly design for that portion of users. It's important for designers to keep in mind fall backs.
Daniel Foster / 26/05/2008 / 16:58 / http://www.pcfastlane.com/features/the-sonicare-toothbrush/
Nice guide. I will definitely be using it to enhance my next web design.
