How to Improve Typography In Your Designs

http://www.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/

by kivivi • 17 years ago

83 9 17 years ago

daleharvey• 17 years ago

smashing magazine lists are usually pretty bland but I liked this one, some common sense but non obvious tips.

Laying out a good grid is fundamental to good design, you dont have to know how to make fancy illustrations et but you can make a solid professional design with just a little consideration about the grid.

It saves people like me who value design but are terrible at coming up with creative aesthetics.

celoyd• 17 years ago

This is partly very good advice, but think again before trying what it says about blockquotes, emphasis, and good rag.

Blockquotes: because there are no guarantees about fonts and sizes, the pixel outdent you find may be annoyingly wrong for the reader. (Also, blockquotes shouldn’t be quoted.)

Emphasis: use em or i. Specializing span like that will give you unwanted italics whenever people (correctly) use span to carry things like classes.

Good rag: again, you simply do not know how text will be rendered on the other end. It will vary with font selection, font size preference, UI scale, window size, rendering engine, text rendering engine ... this kind of pixel-tuning is wasted effort in CSS. If it really matters, use PDF, Flash, TeX, or paper.

quizbiz2• 17 years ago

Is there a difference between and ?

sharkbrainguy• 17 years ago

is semantic, it means "emphasis" the default style for that in most browsers is italic.

is stylistic, it means "render this text in italics".

for people eager to separate meaning from presentation it's a non-trivial difference.

dangrover• 17 years ago

indicates that something is italic in its presentation. indicates that something is emphasized and nothing more -- it may or may not be italicized in its presentation.

The trend for HTML/XHTML is away from markup that denotes the presentation of something and toward markup that denotes the meaning. In i/em matters it's a pedantic discussion, but in recent standards, tags like and <center> are removed entirely.

sh1mmer• 17 years ago

This is some good advice.

However, I would say you need to use something like YUI-Fonts (http://developer.yahoo.com/yui/fonts) before you go mucking about with font sizing in browsers. This is because it varies across browsers.

brandonkm• 17 years ago

I've found the 'The Elements of Typographic Style Applied to the Web' to be immensely useful. http://webtypography.net/toc/

How to Improve Typography In Your Designs

Related Stories