Tuesday, September 14, 2010

Styling text using CSS

HTML is intended as a structural markup language, but the Web’s increasing popularity
meant it got “polluted” with tags designed for presentation. This made HTML more complex
than it needed to be, and such tags soon became a headache for web designers trying
to style page elements, such as text. In the bad ol’ days (the end of the 1990s), you’d
often see source code like this:
<font face="Helvetica" size="3" color="#333333"> This markup is
-> <font size="+3"><small>really </small></font>bad, but it was sort of the norm in the 1990s.</font>
WYSIWYG tools would insert new tags to override previous ones, adding to the page
weight and making it tough to ensure visual consistency site-wide. By and large, CSS eradicates
these problems and enables far more control over text, as you’ll see in the following
sections.
This is a boon for graphic designers who used to loathe HTML’s lack of typographical control.
However, the level of freedom evident in print design still isn’t quite so on the Web.
Restrictions imposed by browsers and the screen must be taken into account, such as it
being harder to read type onscreen than in print. This is largely related to resolution. Even
magazines with fairly low-quality print tend to be printed at around 200 dpi or more—
more than twice the resolution of a typical monitor. This means that very small text
(favored by many designers, who think such small text looks neat) becomes tricky to read
onscreen, because there aren’t enough pixels to create a coherent image.
I’ll note restrictions such as this at appropriate times during this section on styling text with
CSS, thereby providing advice on striking a balance between the visual appearance and
practicality of web-based text.

No comments:

Post a Comment