Working with semantic markup
Defining font colors, families, and other styles
Understanding web-safe fonts
Creating drop caps and pull quotes
Rapidly editing styled text
Working to a grid
Creating and styling lists

An introduction to typography

Words are important—not just what they say, but how they look. To quote Ellen Lupton, from her tutorial Thinking with Type, “Typography is what language looks like.” Language has always been symbolic, although the origins of such symbols (of certain letterforms relating to, for example, animals) has largely been lost in written English; instead, we now have rather more abstract symbols designed for repetition on the page or screen.

However, from the early calligraphy that was created by hand, through the movable type (invented in Germany by Johannes Gutenberg during the 15th century) that enabled massproduction printing via molded letterform casts, to the most advanced desktop-publishing software available today, the ultimate aim of type has been one of record and information provision. In other words, type itself is important from a design standpoint because it needs to record whatever information is being written about, and that information needs to be easily retrievable by anyone who wants to understand it.

Like all aspects of design, typography has massively evolved over the years, particularly over the past couple of decades, where computers have enabled designers to more rapidly experiment with lettering. Despite this, many conventions formed much earlier still have a part to play:

Myriad fonts exist, and each one has a different look, and therefore a different “feel;” you need to choose the most appropriate one for your purpose. (This is further complicated by there being only a certain number of web-safe fonts, as you’ll see later.)

Headings, strap-lines/stand-firsts (the introductory line that introduces a piece of text, commonly used in editorial articles), and crossheads (short subheadings that break up areas of body copy) should stand out, and the prominence of each piece of text should be related to its level of importance (in other words, a crosshead shouldn’t be more prominent than a main heading).

Footnotes often use text smaller than the main body copy text to signify their lesser significance to the main text, but nonetheless provide useful supplementary information.

A few highly useful online resources for web typography can be found at the following locations:

The Elements of Typographic Style Applied to the Web
Five Simple Steps to Better Typography
Five Simple Steps to Designing Grid Systems

When it comes to web design, some conventions are used, and others are ignored. In fact, while web designers take the utmost care to get layouts right, scant few give the same thought to text, merely choosing a font and arbitrarily setting other values, if they set them at all. Once, this could be excused, but CSS has enabled web type to come a long way, and although the same degree of control as print-based type isn’t possible, you can do a lot more than just choose your preferred font for headings and body copy.

In this tutorial, we’ll take a look at the various components available when working on web-based type (including elements and CSS properties), and provide some exercises, the results from which you can use for the basis of your own sites’ type. As a final note in this introduction, it’s also worth mentioning spelling and grammar. Both of these are clearly way outside of the scope of this tutorial, but they’re things designers tend to overlook. A site with a lot of grammatical and spelling errors, especially in larger text (such as headings and pull quotes) looks unprofessional. If in doubt when working on sites, consult (or get your client to consult) a copywriter.

Styling text the old-fashioned way (or, why we hate font tags)

Styling text online used to be all about font tags. When Netscape introduced the font element— complete with size and color attributes—web designers wept tears of joy. When Microsoft announced it would go further, adding a face attribute (enabling you to specify the font family), web designers were giddy with anticipation. But things didn’t go according to plan. Page sizes bloated as designers created pages filled with fonts of myriad sizes and colors. Web users looked on aghast, wondering whether giant, orange body copy was really the way to go, and whether it was worth waiting twice as long for such abominations to download.

More important, it became apparent that font tags caused problems, including the following:

Inconsistent display across browsers and platforms
The requirement for font tags to be applied to individual elements
Difficulty ensuring fonts were consistent site-wide, because of having to style individual elements
HTML geared toward presentation rather than logical structure
Large HTML documents due to all the extra elements

In addition, working with font tags is a time-consuming, boring process, and yet some (although, thankfully, increasingly few) web designers remain blissfully ignorant of such problems. In my opinion, if font tags weren’t HTML elements, I’d suggest they be taken out back and shot. Today, there is no reason whatsoever to stick with them. Text can be rapidly styled site-wide with CSS and, as we’ll see later in this chapter, CSS provides you with a greater degree of control than font tags ever did. More crucially, font tags encourage badly formed documents, with designers relying on inline elements to style things like headings, when there are perfectly good HTML elements better suited to that purpose.

HTML should be reserved for content and structure, and CSS for design. Web pages should be composed of appropriate elements for each piece of content. This method of working, called semantic markup, is what we’re going to discuss next.

A new beginning: Semantic markup

Essentially, “semantic markup” means “using the appropriate tag at the relevant time,” and well-formed semantic markup is an essential aspect of any website. The following is an example of the wrong way of doing things—relying on font tags to create a heading and double line breaks (<br /><br />) for separating paragraphs:

<font size="7" color="red" face="Helvetica">Article heading</font>
<br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet
å elementum erat. Integer diam mi, venenatis non, cursus a,
å hendrerit at, mi.
<br /><br />
Quisque faucibus lorem eget sapien. In urna sem, vehicula ut, mattis
å et, venenatis at, velit. Ut sodales lacus sed eros.

The likelihood of this displaying consistently across browsers and platforms is low. More important, the tags used don’t relate to the content. Therefore, if the styling is removed, there’s no indication regarding what role each element plays within the document structure and hierarchy—for instance, there would be no visual clues as to the importance of the heading. Also, the use of double line breaks (

) instead of paragraph tags means the “paragraphs” cannot be styled in CSS, because there’s nothing to inform the web browser what the content actually is.

Instead, the example should be marked up like this:
<h1>Article heading</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed
å aliquet elementum erat. Integer diam mi, venenatis non, cursus
å a, hendrerit at, mi.</p>
<p>Quisque faucibus lorem eget sapien. In urna sem, vehicula ut,
å mattis et, venenatis at, velit. Ut sodales lacus sed eros.</p>
Here, the heading is marked up with the relevant tags, and paragraph elements are used instead of double line breaks. This means the page’s structural integrity is ensured, and the markup is logical and semantic. If attached CSS styles are removed, the default formatting still makes obvious to the end user the importance of the headings, and will visually display them as such. In this section, we’ll look at how to mark up paragraphs and headings, explore logical and physical styles, and discuss the importance of well-formed semantic markup.