- Fonts
- Text Properties
- Web Fonts Demystified
- Stylin' Text
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Stylin’ Text
It’s time to put all your new-found knowledge about fonts and text into practice. I’m going to conclude this chapter with three examples of how you can create good-looking typography, from the quick and simple to the considered and sophisticated.
There is the notion of rhythm in typography, that defines the regular flow of the type down the page, generally achieved by working to an underlying grid. Good rhythm helps the eye move smoothly over the page.
Let’s start with some quick and basic text styling, and rather than use an underlying grid to organize our type, simply space each element proportionately to its type size. This exercise will allow you to see how to get a result fast if that’s what’s needed.
Basic Text Layout
As you saw in Chapter 1, the default browser stylings for headings, paragraphs, lists, and other text elements have a very wide range of sizes, and the vertical margins between them are too big. To illustrate how to style these defaults into a more pleasing presentation, here’s markup with some commonly used text elements.
)
Figure 4.16 shows this markup displayed in a browser.
)
Figure 4.16. Unstyled markup is not very attractive.
The font-size of 1em simply states the default size, and doesn’t change anything yet, but I have to state a font size along with the font family in the font shorthand property. Also, because I am setting the type in a relative size, ems, if I later want to change the size of all the type on the page, I can make a single adjustment here.
Here are some steps to quickly style this markup into a more pleasing layout. First, let’s remove the margins that are creating all the space between the elements, set the overall font, and style the article tag that encloses all the text elements into a visual container that surrounds the text and centers it on the page.
)
Figure 4.17 shows the displayed result in the browser.
)
Figure 4.17. Removing the default margins greatly reduces the vertical height of the content.
Next, there needs to be some strategically-placed vertical space between the elements. Also, with the margins gone, the list bullets hang into the margin so I’ll fix that, too.
)
As you can see in Figure 4.18, I have tightened up the line-height of all the elements, making each element’s line-height only slightly larger than the height of the text. This is because line-height is added equally above and below the text and I only want to add space below each element, which I do by applying margins. However, I have to leave some line-height or the adjacent lines of the paragraph text (and the headings if they run over to a second line) will touch.
)
Figure 4.18. Space has been added after the paragraphs.
Note there are only two settings for the margins, the exact amount of space of which is relative to each element’s font size. I give the headings very small bottom margins (equal to 15% of each one’s font size) so they sit close above elements that follow them. I give all the other text elements a larger bottom margin (equal to 75% of each one’s font size) to create white space after them in the layout.
As a final step, I want to get a better balance between the headings, so that the bigger headings stand out and the smallest ones don’t get lost, and also increase the size of the inline code elements.
)
While this example is quick and basic, it shows that some minimal text styling can greatly improve the appearance of the page and readability of the content (Figure 4.19). Let’s now look at how to achieve a more sophisticated look through the use of grids.
)
Figure 4.19. Now with larger heading and code text, the page is more visually pleasing and helps the viewer understand the hierarchy of the information.
Stylin’ Text on a Grid
Using a grid to lay out your type provides a rhythm and visual flow to the page. Because I am looking at type in this chapter, I’ll focus on using a grid to create the vertical flow of text.
In this example, I’ll create a layout based on a vertical 18-pixel grid and every element will align with it. Because a graphic can be added into the background of an element, in this case body, I can temporarily add a simple spacing guide into the page.
Here I use Adobe Fireworks (you can use the graphics program of your choice) to make a white rectangle 100 by 18 pixels and add a 1 pixel gray line along the bottom. I save it in .png format (.jpg or .gif work just fine, too) with the name grid_18px.png. Figure 4.20 shows how it looks (shown on a pale blue background for clarity).
Figure 4.20. The tile that I will use in the background of the page. A thin gray line runs along its bottom edge.
I add this image into the background of the body element
)
and it tiles itself across and down the page (Figure 4.21).
)
Figure 4.21. A tiled image added to the body element creates a ruled background on which type can be vertically aligned
With the horizontal lines of the grid in the background, I now start positioning the text elements, using the grid as a guide.
For this example, I use just a few common text elements but it’s easy, once you get the hang of how this works, to build a text style sheet with a full set of “grid-aligned” HTML text elements that you can use as the basis for all your sites.
I’ll start with a simple paragraph
)
and this CSS
)
Note that I match the text’s line-height to the grid distance: 18 pixels. With all default margins and padding removed, I now know every line will be 18 pixels apart (Figure 4.22).
)
Figure 4.22. The 18-pixel line height causes the spacing of the lines to match the grid distance.
Next I add 4 pixels of padding to the container, body, to push this element down and align the baseline of its text with the grid. Once this first element aligns to the grid, it will be easy to get the elements that follow it to do the same. Actually, I’ll add 22 pixels (4 + 18) to also give an empty line of breathing space at the top, by adding this declaration to body.
While I’m at it, I’ll add this declaration onto the paragraph:
)
This will create exactly one empty grid line between each paragraph. Adding another paragraph will help show the effect of these two changes (Figure 4.23).
)
Figure 4.23. With padding added to body, the text now aligns perfectly with the grid.
Now that the text and grid are aligned, and the paragraphs are correctly spaced, I’ll set font sizes for the other text elements. I start with the h3 tag, which I set at 18 pixels. Of course, it too will have a line-height of 18 pixels so that it occupies exactly one line of the grid. To test its spacing, I’ll insert it in the markup between the two paragraphs.
)
Here’s the CSS for the new heading:
)
As you can see, the headline sits a couple of pixels below the baseline but, surprisingly, does not push the following paragraph down by the same amount (Figure 4.24). The reason is, that while the headline’s line-height is correct, at this size and with this font the text is slightly offset within it. Here’s how to correct this.
)
Figure 4.24. The baseline of the h3 element’s text sits slightly below the grid line.
)
The negative top margin pulls the type up, and the same amount of positive bottom margin offsets this change to keep the element that follows exactly where it was (Figure 4.25).
)
Figure 4.25. A small negative top margin and an equal positive bottom margin pulls the headline up into perfect alignment on the grid.
A second and similar alignment technique is needed for those elements, usually headings, that are larger than the grid distance. To illustrate, I’ll next add a 24 pixel h1 headline. Obviously, 24-pixel text is going to occupy more than one line of the grid, so in this case I’ll set the line-height to span two lines—36 pixels. I’ll put the h1 element where it usually appears—the first element on the page.
Let’s start with this CSS:
)
This big headline sits uncomfortably between two lines (Figure 4.26). Its descenders will touch the paragraph text if I move it down onto the nearest line, so I’ll move it up instead. With a little trial and error, I determine this distance to be 13 pixels.
)
)
Figure 4.26. Because the line-height is equal to two lines of the grid, the type does not sit on a grid line.
An alternative approach here would to be to exactly position the baseline of this headline halfway between two grid lines. It can be a nice change of pace to do this, but be sure the next element is aligned to the grid again.
This h1 now has some white space below it to set it off from the text (Figure 4.27). I could do this with the smaller headline too, but I think it looks better close to the element that follows it.
)
Figure 4.27. The h1 headline now sits correctly on a grid line.
You can see the HTML for this exercise in the download code at http://www.stylinwithcss.com.
To finish this exercise, I’ll add some different sized headings, an unordered list, and a blockquote to show what a more complete page looks like once the grid is removed.
)
As you can see in Figure 4.28, there’s something pleasing about a page that’s laid out on a grid. From a technical perspective, if you style your type on a grid-based layout for a site where the content will be managed by others, then the page will always lay out nicely, regardless of the order of the elements.
)
Figure 4.28. A page layout based on an 18-pixel grid.
An Exercise in Classic Typography
To end this chapter, I’ll lay out a small excerpt of The Hound of the Baskervilles (edited for the purpose of this example), using many of the font and text properties you have seen in this chapter. You’ll see a number of techniques to achieve high-quality typography, including the use of HTML entities, letter and word spacing, drop caps, a vertical grid (this time 24 pixels), and downloaded fonts.
The markup is quite simple: two headings, a number of paragraphs, and a blockquote.
)
You can see in this markup that I have highlighted instances of the four different HTML entities that I am using for the punctuation, specifically left double-quote (“) to open dialogue, right double-quote (”) to close dialogue, ellipsis (…) for omission, and em dash (—) for the long dashes that indicate pauses or as a replacement for parentheses.
Step 1–Setting the Fonts and the Underlying Grid
I’m using the FontSquirrel font Crimson Roman for the overall text in this example. I downloaded the font kit, put it on my Web server (and also stored it locally for development), and I added the provided @font-face rule to my style sheet. I can then specify it in a font-family rule.
HTML Entity Reference
These Web sites provide tables that list the HTML entities.
http://htmlhelp.com/reference/html40/entities/special.html
http://code.stephenmorley.org/html-and-css/character-entity-references-cheat-sheet
The first URL above includes both HTML entity values, and the hex values that you need when adding entities as content in the ::before and ::after pseudo-elements. For example, a hex code shown in the table as “ (left double-quote) needs to be modified for pseudo-element content, like this
Note the backslash in front of the number. The hex value for the right double-quote is \201D.
Within the text of your HTML content, you must always replace all ampersands and all < (less-than) symbols with their HTML entities, which are & and > respectively. This is because “&” is reserved for the first character of HTML entities, and “<” is reserved for the first character of HTML tags. That’s what browsers expect to see when they encounter these characters.
)
I follow my standard procedure of removing all margins and padding, assigning the primary font, and adding left and right margins; I also add the temporary grid for aligning the type, as shown in Figure 4.29.
)
Figure 4.29. Text and grid are in place, ready to be aligned.
Step 2—Styling the Headings
I now work my way, element by element, down the page, aligning each element with the grid as I go. I want the first, minor headline to contrast with the main heading, which I plan to style in a large cursive font, so I’ll style this smaller heading in widely-spaced small capital letters.
)
For this heading I first use the font-variant property to convert the text to small caps and then apply the word-spacing and letter-spacing properties to get the look I want (Figure 4.30).
)
Figure 4.30. The small heading is now aligned with the grid and styled with a mix of font and text properties.
Next, I go to Google Web Fonts, where I find a cursive font called Pinyon that has a styling compatible with my subject matter. I copy the link tag generated by Google Web Fonts into the head of my HTML document so I can now reference the font in a font-family declaration. I again need my little negative/positive margin trick that I first showed in Figure 4.25 to pull the type into exact alignment with the grid. Figure 4.31 shows the result.
)
)
Figure 4.31. The large headline is now styled and aligned with the grid.
Note the line-height is set to a four-times multiple of the grid distance.
Step 3—Styling the Paragraph and the Blockquote
The first paragraph is sitting a little high, so let’s set its font size, and most importantly, its line height.
While the first three paragraphs are now aligned with the grid, the subsequent paragraphs are not, because the line height of the block quote that follows the first paragraph also needs to be aligned (Figure 4.32). The blockquote text is wrapped in an inline q (quote) tag, which by default, adds quote marks at its beginning and end. I’ll indent the containing blockquote, but I’ll set the font size and line height on the child quote element, because it contains the text.
)
)
Figure 4.32. Setting the paragraph line-height aligns it with the grid.
Indenting and italicizing the quotation adds variation to the page. Notice that with the blockquote correctly positioned, the subsequent paragraphs fall into place, too (Figure 4.33).
)
Figure 4.33. The block quote is now aligned with the grid.
Step 4—Adding a Drop Cap
Next, I’ll add a distinctive drop cap on the first character of the first paragraph. A drop cap is a large letter that starts a paragraph. There are a number of variations on drop caps, but in this case, I’ll align its top edge with the top of the first line of the paragraph and its bottom edge with the baseline of the third line.
Typically, when you see this technique, the first letter is wrapped in a span, but this is not feasible or reliable in a site where text is supplied from a content management system. The technique I show here requires no modification to the markup.
I need to select the first letter of the first paragraph that follows the h1 headline. I do this with a combination of two selectors: the ::first-letter pseudo-element in combination with a sibling + selector. Once selected, that character can be enlarged and floated into position.
)
I set line-height to less than 1 so that the drop cap is tightly enclosed by its line height and will not force the fourth line of the paragraph to wrap.
The first letter is now enlarged, but is not where I want it to be positioned (Figure 4.34). I’ve turned on the pseudo-element’s border as a guide, because what I really need to size and position is its box. The border shows me that this box is only large enough to force two lines of the paragraph to wrap around it because the box is inheriting its size and alignment from the paragraph. I need to set the pseudo-element’s line-height so its box encloses the drop cap.
)
Figure 4.34. The border is turned on to show that the drop cap’s line-height is being inherited from the smaller line-height of the paragraph text.
With the box line-height increased, the third line now also wraps (Figure 4.35). All that is left to do is add a little padding to the top of the element to push it down and align the bottom edge of the letter with the baseline of the paragraph’s third line.
)
Figure 4.35. The element box now tightly surrounds the drop cap.
Note that I also add 3 pixels of right padding to give visual space between the drop cap and the paragraph text. Also, I no longer need the border so I remove it (Figure 4.36).
Figure 4.36. The drop cap is now complete.
Step 5—Styling the First Line
The drop cap is now in place, but I’d like to see a visual transition between the large drop cap and the small paragraph text, so I’ll add a small cap style to the entire first line of the paragraph text.
)
I again use the sibling selector, this time in combination with the ::first-line pseudo-element to set the first line of the paragraph in small caps. By using the pseudo-element, rather than just typing the first few words in capital letters, the capitalization will adjust if the line length changes. You can see how nicely this styling connects the drop cap with the rest of the paragraph in Figure 4.37.
)
Figure 4.37. The first line of the paragraph is now set in small caps.
Step 6—Finishing Touches
Without some space between the paragraphs, it’s hard to see where each one starts. In keeping with convention in books, rather than space the paragraphs apart, I’ll instead add a small indent to every paragraph that follows a paragraph; a paragraph that starts a sequence of paragraphs doesn’t need the indent. Also, I don’t like the anemic quotation marks around the quote, so I will update the default ::before and ::after pseudo-elements of the q tag and insert nicer ones from the Crimson font. Finally, I am done with the grid so I’ll remove that from the body tag (not shown).
)
){kind=link}
){kind=link}
){kind=link}
){kind=link}
Both these small changes are worth comment. The indents are achieved with the sibling selector, which cause only paragraphs that follow a paragraph to be indented. The paragraph that begins “When Dr. Mortimer...” follows the blockquote, not a paragraph, and so does not get the indent, giving a solid lead off to that paragraph by aligning it with the margin (Figure 4.38).
)
Figure 4.38. Here is the completed page.
The quotation marks added by the ::before and ::after pseudo-elements have to be defined with hex entities. I cannot use the normal HTML entities in the content value, as they don’t work in this situation; only hex entities work here, and only in a slightly modified state. See the sidebar, HTML Entity Reference, earlier in this chapter, for details.
With these final touches, the layout is complete. It may seem like a lot of work for a small excerpt like this, but of course, these styles could easily be applied to the entire book.