How to Improve Typography In Your Designs | Hacker News Reader

How to Improve Typography In Your Designs

smashingmagazine.com

83 pointskivivi9 comments

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.

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.

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.

Is there a difference between and ?

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.

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.

So can be refined through css?

Either can, technically. Redefining the "italics" tag to be rendered as, say, smallcaps, is, however, not especially sensible. What you mean to be doing is placing an emphasis, however you may want to style that.

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

Reply on news.ycombinator.com