Get flash to fully experience Pearltrees
As printed typography enjoys the fruits of high-DPI glory, proudly displaying its beautiful curves and subtleties, its on-screen counterpart remains stifled by bulky pixels, living in a world of jagged edges, distorted letterforms and trimmed serifs.
Jun 16, 2009; Category: CSS , Design/Development ; Tags: CSS , Design/Development ; 6 Comments The other day I pointed out some of the differences between web design and print design . It started me thinking about some of the things I learned as a print designer that are also applicable to web design. One of the most useful is the Principle of Optimal Line Length. It states that, for any given font-size of a multiple-line block of type (like a paragraph), there is a range of line lengths and line-heights that most people consider easily readable. Those 3 attributes—font-size, line-height, line length—are inter-related.* Change one, and you may need to change at least one of the others for most people to consider the text readable.
Published by Chris Coyier
UPDATE Oct 24: We have released version 1.09i, which is the same as 1.09 but IE9-compatible. 1.10 is on its way as well.
This Reference Sheet was created to emphasize the many options available within CSS, particularly for Typography.
Last updated: 2008/06/03 Return to the main page
One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack .
"It auto-detects the text color of elements!" nce upon a time some really good web developers created sIFR . Their goal was to seamlessly convert HTML headlines into nice fonts. Well, these developers did a great job getting it to work nicely. Looking at their code, I decided I would create a "lite" version of sIFR using a more object-oriented approach. sIFR Lite is a bit easier to read, and more intuitive to use. The only drawbacks are that it is currently unproven on a large scale in the real world.
Typography is elegant when it is attractive and communicates the designer’s ideas.
As you have probably know, most online readers don't read line by line, instead they scan (from one point to another). For this reason, designers create typographic contrast and flow by emphasizing certain text. Contrast is important because not all the content within a page have the same value, some have greater significance than the others. By creating contrast, you can direct the reader's attention to the important messages and at the same time enhance the visual appearance. Here are seven basic methods on how you can create typographic contrast. 1.
“Web design is 95% typography.” – Oliver Reichenstein “Typography is not ‘picking a cool font.’” – Jeff Croft “Typography is … about shaping text for optimal reading experience.” – Oliver Reichenstein