Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
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

Figure 4.16. Unstyled markup is not very attractive.

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

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

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

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

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

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

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.

137pro01.jpg

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

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

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

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.

139pro02.jpg

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

Figure 4.26. Because the line-height is equal to two lines of the grid, the type does not sit on a grid line.

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

Figure 4.27. The h1 headline now sits correctly on a grid line.

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

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.

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

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

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

Figure 4.31. The large headline is now styled and aligned with the grid.

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.

146pro01.jpg

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

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

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.

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

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

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

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

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).

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

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.

  • + Share This
  • 🔖 Save To Your Account

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.peachpit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020