Hour 7. Bootstrap Typography
What You’ll Learn in This Hour:
How Bootstrap uses typography
How to create headlines and headers
How to modify body copy typography
How Bootstrap adjusts text elements
Typography is an important part of web designs because web pages are primarily text. In this hour you learn the default Bootstrap typography styles and what things you might consider changing to meet the needs of your websites.
This hour covers the basic fonts and forms Bootstrap uses by default and then goes into detail about how to use headings to create better headlines and header elements, how to adjust the main copy on your web pages, and how to add alignments, colors, and transformations. Finally, you learn how Bootstrap adjusts the look of some HTML elements such as <blockquote>, <code>, <abbr>, <ul>, <ol>, and <address>.
Basic Typography in Bootstrap
Bootstrap takes care of basic typography for you. This means you don’t need to worry about which font family (or font stack) to use. You don’t have to adjust font sizes for readability, and you don’t have to fiddle with line heights. Table 7.1 shows the default typography styles Bootstrap uses.
What this means is that text on the page will start out in a sans-serif font at 10px, but because Bootstrap pages must have a <body> tag, they will immediately be changed to the font stack: Helvetica Neue, Helvetica, Arial, sans-serif. In CSS, a font stack is a list of fonts ordered by design preference. If the computer viewing the page does not have the first font family, it moves to the second, and so on. The last font on the list should always be a default font family such as sans-serif or monospace.
Caution: Helvetica Neue May Render Incorrectly
Helvetica Neue is not a default system font on all computers, and on computers where it can be found it often isn’t fully installed. This means that your pages might display with strange characters or messed-up font sizes. If you are noticing this problem, you should add a line to your custom style sheet to override the font stack in Bootstrap:
font-family: Arial,Helvetica,"Helvetica Neue",sans-serif !important;
These styles are defined in the style sheet first, so they will apply to all device sizes by default. There are some other adjustments that Bootstrap makes for larger screens, such as giving <small> elements and the .lead class different font sizes, but if you understand basic typography, the adjustments for larger devices won’t be surprising.
Note: Bootstrap 3 Font Sizes Are Not Best Practices
One complaint about Bootstrap typography is that it doesn’t use relative font sizes, such as em and rem. It uses absolute pixel sizes for all the typography, and this can cause accessibility and design problems. But these font size measures are not well supported in Internet Explorer 8. There will be support for rems in version 4 of Bootstrap when they remove Internet Explorer 8 support. Until then, if you need to use ems or rems, you’ll need to add them to your custom style sheets.
Headings
Most web pages use headings, and Bootstrap provides default styles for headings. Bootstrap adds
Styles for headlines
Styles for secondary or embedded subheads
A header component to call out headlines as document headers
Headlines
Bootstrap provides default font sizes and line heights for all the standard HTML headings: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. It also provides the same styles as classes so you can add inline headings to your documents. Figure 7.1 shows you how Bootstrap headlines look by default, and Listing 7.1 shows you how the HTML is written.
LISTING 7.1 HTML for Bootstrap Headlines
<h1><h1> Bootstrap heading</h1>
<p>This is a paragraph with an <span class="h1">inline <h1>
heading</span></p>
<h2><h2> Bootstrap heading</h2>
<p>This is a paragraph with an <span class="h2">inline <h2>
heading</span></p>
<h3><h3> Bootstrap heading</h3>
<p>This is a paragraph with an <span class="h3">inline <h3>
heading</span></p>
<h4><h4> Bootstrap heading</h4>
<p>This is a paragraph with an <span class="h4">inline <h4>
heading</span></p>
<h5><h5> Bootstrap heading</h5>
<p>This is a paragraph with an <span class="h5">inline <h5>
heading</span></p>
<h6><h6> Bootstrap heading</h6>
<p>This is a paragraph with an <span class="h6">inline <h6>
heading</span></p>
One nice feature Bootstrap includes is the ability to create an inline subheader on all your headlines using the <small> tag. This will create a lighter, inline block that complements the headline. Listing 7.2 shows how to do this, and Figure 7.2 shows what it looks like.
LISTING 7.2 Secondary Text in Headlines
<h1><h1> Headline <small>With Secondary Text</small></h1>
<h2><h2> Headline <small>With Secondary Text</small></h2>
<h3><h3> Headline <small>With Secondary Text</small></h3>
<h4><h4> Headline <small>With Secondary Text</small></h4>
<h5><h5> Headline <small>With Secondary Text</small></h5>
<h6><h6> Headline <small>With Secondary Text</small></h6>
Bootstrap also provides the .small class to add secondary text to inline headlines, as in Listing 7.3 and Figure 7.3.
LISTING 7.3 Secondary Headlines on Inline Headlines
<p>This is a paragraph with a <span class="h1">inline <h1>
heading <span class="small">and secondary headline</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h2">inline <h2>
heading <span class="small">and secondary headline</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h3">inline <h3>
heading <span class="small">and secondary headline</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h4">inline <h4>
heading <span class="small">and secondary headline</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h5">inline <h5>
heading <span class="small">and secondary headline</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>This is a paragraph with a <span class="h6">inline <h6>
heading <span class="small">and secondary headline</span></span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
But you aren’t limited to text headlines in Bootstrap. With the .text-hide class, you can create a graphic headline and replace the text while keeping the page accessible.
Try it Yourself: Replace a Headline with an Image
1. Open your Bootstrap page in an HTML editor.
2. Add an <h1> headline:
<h1>Headline</h1>
3. Add the class .text-hide to the headline:
<h1 class="text-hide">
4. Add the ID #mainhead to the headline:
<h1 class="text-hide" id="mainhead">
5. Add the following CSS to your style sheet:
#mainhead {
background-image: url(images/headline.png);
background-repeat: no-repeat;
width:458px;
height:76px;
}
LISTING 7.4 Image Replacement with Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Bootstrap Image Replacement</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5
elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page
via file:// -->
<!--[if lt IE 9]>
<script
src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">
</script>
<script
src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
#mainhead {
background-image: url(images/headline.png);
background-repeat: no-repeat;
width:458px;
height:76px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-hide" id="mainhead">Headline</h1>
<p>And here is the page content.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In sed erat facilisis, sollicitudin diam sed, condimentum est.
Sed lobortis pellentesque odio, eu tristique est commodo non.
Duis lacinia rhoncus elit, ut molestie mauris pulvinar ac.
Suspendisse ac quam sem. Vestibulum vestibulum porttitor
accumsan. Curabitur nunc nibh, fringilla vel sollicitudin sit
amet, tristique vel velit. Etiam mattis ante id tempor
convallis.</p>
<p>Morbi semper enim vitae metus viverra pretium. Aenean felis
orci, aliquet eu felis elementum, finibus iaculis arcu. Nullam
hendrerit laoreet aliquam. Fusce molestie consequat commodo.
Integer quis malesuada mi. Cras in libero erat. Sed elementum
metus nibh, sit amet tempor dolor dictum quis. Donec nec lectus
in justo porta lacinia sollicitudin ac orci. Donec interdum,
mauris ac tincidunt imperdiet, ex turpis lobortis nisi, ac
dictum sem nisi non augue. Maecenas scelerisque iaculis
tincidunt. Praesent eget augue interdum, imperdiet ex a,
pellentesque libero. Sed ante tortor, auctor id facilisis sit
amet, tristique id tellus.</p>
</div>
</body>
</html>
Headers
Bootstrap adds a component to help you call out the header on a web page. To use it, you add the .page-header class to a container element surrounding the <h1> element that titles the entire page.
This creates a box around the headline with a 9px bottom padding, adds more space around the top and bottom of the box, and adds a bottom border. Figure 7.5 shows what a header box looks like.
The HTML for this is easy to implement, as Listing 7.5 shows.
LISTING 7.5 Adding a Page Header
<div class="page-header">
<h1>Page Headline <small>For This Awesome Page</small></h1>
</div>
Body Copy Text
Body copy is the majority of text on a web page. It is text that is found inside paragraphs and divisions of text. With Bootstrap, you can put body copy straight into the <body> of the document, include it in <div> containers, or put it inside <p> tags.
The default font is, as mentioned in Table 7.1, 14px tall; uses the font stack Helvetica Neue, Helvetica, Arial, sans-serif; and has a line height of about 1.4.
Note: Line Height Doesn’t Require a Measurement Unit
You will often see people define the line height as 14px or 2em, but this isn’t required. If you use a value like 1.4, this tells the browser to create a line height that is 1.4 times the computed font size. Then if the browser font is resized in some way, the line height will remain 1.4 times the font size.
Bootstrap gives paragraphs a small typography boost by adding a bottom margin of half the computed line height. This adds a bit of space between paragraphs and other elements, making the text easier to read. As shown in Figure 7.6, the first paragraph does not have any space between it and the second because it is not inside <p> tags.
Best practices recommend that you always include blocks of text inside paragraph tags. This will keep all your text as legible as possible.
Bootstrap also lets you highlight lead copy with the .lead class. This creates a block of text that is slightly larger than the standard body copy. You can use it on a paragraph or a few words to make them stand out.
Try it Yourself: Add a Lead to Some Copy
1. Open your Bootstrap web page in an HTML editor.
2. Go to the first paragraph that you want to highlight, and add class="lead" to the paragraph tag:
<p class="lead">
3. View the page in a web browser and see that the first paragraph is larger than subsequent paragraphs. You can see this in Figure 7.7.
You can also make just the first three words the lead.
4. Open the page in your HTML editor.
5. Surround the first three words in the first paragraph with a <span></span> element. Note: if you’re editing the same page, remove the class="lead" from the <p> tag.
6. Add class="lead" to the <span> tag and view in your browser. Figure 7.8 shows how this looks.
Inline Text
A number of HTML elements are available that you can use to define different aspects of the text. Bootstrap styles these elements for you. The elements are
<del>—The text has been deleted from the document.
<em>—The text is emphasized in italics.
<ins>—The text has been inserted into the document.
<mark>—The text is highlighted for reference purposes.
<s>—The text has been struck from the document and has a line through it.
<small>—The text is in small print such as legalese.
<strong>—The text is emphasized in bold.
<u>—The text is underlined.
Figure 7.9 shows how Bootstrap styles these elements. If you need them to look differently, you can always add styles to your personal style sheet.
Aligning Elements
Bootstrap offers several classes to help you align both text and block elements:
text-left
text-center
text-right
text-justify
text-nowrap
pull-left
pull-right
center-block
Caution: Don’t Use the .pull-* Classes on Navigation Elements
Specific classes for navigation elements let you float navigation to the right or left that are optimized for navigation. This is covered in more detail in Hour 12, “Creating Navigation Systems with Bootstrap.”
The .text-left, .text-right, and .text-center classes do exactly what they appear to do and position text on the left, right, or center sides of the block in which they are contained. You can use the .pull-right, .pull-left, and .center-block classes in the same way on block elements as entire paragraphs. The .text-justify class justifies the text across both sides of the block, and the .text-nowrap class forces the text to ignore typical wrapping and scroll horizontally. Figure 7.10 demonstrates these styles.
Transforming Text Elements
Bootstrap offers several classes to let you transform text elements. Figure 7.11 shows text that has been transformed with these classes:
text-capitalize—Capitalizes the first letter of every word
text-lowercase—Makes every letter lowercase
text-uppercase—Makes every letter uppercase
In addition, standard Bootstrap helper classes are available that you can add to any element to change the text and background colors:
text-muted
text-primary
text-success
text-info
text-warning
text-danger
bg-primary
bg-success
bg-info
bg-warning
bg-danger
These classes change either the text color (.text-*) or the background color (.bg-*) on the elements. You can use them to visually convey specific information, but be sure to provide other contextual clues beyond the color if the classes impart important or relevant information. Figure 7.12 shows how these styles look.
Other Text Blocks
HTML offers many other types of text, including code samples, quotations, lists, abbreviations, and addresses. Bootstrap has special style options for each.
Code
The following are five HTML tags you can use to define code, and Bootstrap has styles for all of them:
<code>—Defines inline code samples inside paragraphs of text
<kbd>—Defines user input, typically entered via a keyboard
<pre>—Defines multiple lines of code, separated into a block
<samp>—Defines sample output from a computer code
<var>—Defines variables
Figure 7.13 shows how these look on a Bootstrap page.
You can add the class .pre-scrollable to the <pre> tag to set a maximum height on the <pre> blocks of 350px and add a scrollbar to see any additional text.
Quotations
Bootstrap uses the HTML tag <blockquote> to define long quotations. Best practices in Bootstrap are to use the <blockquote> tag around any quotation that itself has HTML tags around it. If the quote is short enough to be written inline, then you should just put quotation marks around it.
If you need to name a source for your quotation, include the quotation in a paragraph and then wrap the source in a <footer> tag inside the <blockquote>. Include the <cite> tag around the actual source. Listing 7.6 shows how.
LISTING 7.6 A Quotation with Source
<blockquote>
<p>`Twas brillig, and the slithy toves<br>
Did gyre and gimble in the wabe:<br>
All mimsy were the borogoves,<br>
And the mome raths outgrabe.</p>
<footer>by Lewis Carroll from <cite title="The Jabberwocky">"The
Jabberwocky"</cite></footer>
</blockquote>
Bootstrap makes the font larger and adds a gray border to the left side of standard quotations. The footer is then slightly smaller and in light gray text. If you want your quotation to be right-aligned, you can use the class .blockquote-reverse to align the quote to the right and move the border to the right side. Figure 7.14 shows what blockquotes look like in Bootstrap.
Lists
HTML has three types of lists: unordered lists, ordered lists, and definition lists. Bootstrap styles these with similar typography as the body copy. But there are also some extra classes to adjust the styles of the lists:
.list-unstyled—Removes the default styles and left margin on list items.
.list-inline—Places all the list items on a single line with a little padding between.
.dl-horizontal—This places the terms and descriptions in a definition list lined up side-by-side.
Figure 7.15 shows these list styles in a typical Bootstrap page.
Abbreviations
Bootstrap adds some default styles to the standard HTML <abbr> tag: a change to the cursor and a dotted line underneath the abbreviation. If you include the definition in the title attribute, most browsers will display that when the customer hovers over the element.
However, when you use abbreviations that are all caps, such as “NASA” and “HTML,” the capital letters can make the text look larger than it is. Bootstrap provides a class, .initialism, to display the abbreviation in a slightly smaller font size. Listing 7.7 shows how you might use this class.
LISTING 7.7 Using the .initialism Class on an Abbreviation
<p>I wrote a book on <abbr title="HyperText Markup Language 5"
class="initialism">HTML5</abbr> and another on <abbr
title="Responsive Web Design" class="initialism">RWD</abbr>.</p>
Remove the class from one of the two abbreviations to see the difference.
Addresses
HTML also provides a tag, <address>, to present contact information either about the preceding element or the document as a whole. Bootstrap adds a larger bottom margin and resets the font style and line height.
Summary
This hour covered a lot of Bootstrap styles that help adjust the typography of your web pages. You learned about the basic fonts, font sizes, and line heights Bootstrap assigns. You also learned how to create headlines and page headers.
Bootstrap styles many HTML elements that appear in the body copy. This hour covered more than 20 classes you can use to adjust the way different portions of the body copy look.
You also learned how Bootstrap styles text elements such as <code>, <blockquote>, <abbr>, <address>, and HTML lists (<ul>, <ol>, and <dl>). Plus, this hour covered some classes specific for those elements. Table 7.2 explains all the classes Bootstrap adds for typography.
Workshop
The workshop contains quiz questions to help you process what you’ve learned in this hour. Try to answer all the questions before you read the answers.
Q&A
Q. When I apply the .pull-right or .pull-left classes to my elements, they still take up the full width of the page. How do I fix that?
A. HTML automatically fills up all the horizontal space available unless you set a width. To fix this, add a width style to your style sheet for that element. For example,
<div id="pullRight" class="pull-right"> ... </div>
<style>
#pullRight {
width: 30%;
}
</style>
Q. Do I have to use the colors that are defined for the helper classes, like .bg-warning and .text-info?
A. You can change them with your personal style sheets or with Less mixins. You’ll learn more about that in Hour 23, “Using Less and Sass with Bootstrap.”
Quiz
1. What happens if a browser doesn’t have Helvetica Neue?
a. The page displays in Helvetica.
b. The page displays in the font the customer likes.
c. The page displays in a random font.
d. The page doesn’t display.
2. What does it mean that a font property is inherited?
a. The font property uses what the browser suggests.
b. The font property is defined by the parent element.
c. The font property stays the same.
d. The font property is defined by a personal style sheet.
3. What is the pixel size of the line-height of body copy in all devices?
a. The same as the body copy font size.
b. 1.42857143 pixels.
c. 1.4px.
d. Line height is not defined in pixels.
4. How do you define headlines in Bootstrap?
a. With the <h1> through <h6> tags
b. With the .h1 through .h6 classes
c. With the <headline> tag
d. Both a and b
e. All of the above
5. What does the .lead class do?
a. Adds extra leading to the text
b. Highlights the text with bold and colors
c. Makes the text larger
d. Makes the text smaller
6. How do you center paragraph text?
a. Use the <center> tag.
b. Use the .center class.
c. Use the .text-center class.
d. Use the .block-center class.
7. How do you make text uppercase in Bootstrap?
a. Use the .text-uppercase class.
b. Use the CSS property text-transform.
c. Use the <uppercase> tag.
d. You can’t make text uppercase with Bootstrap.
8. Which of these is not a Bootstrap helper class?
a. .text-danger
b. .text-info
c. .bg-danger
d. .background-danger
9. Which of these is not a code HTML tag that Bootstrap styles?
a. <code>
b. <kbd>
c. <tt>
d. <var>
10. Why use the .initialism class?
a. To make your text slightly smaller.
b. To make all caps abbreviations appear more the same size as the surrounding text.
c. To create an initial cap.
d. It is not a valid Bootstrap class.
Quiz Answers
1. a. The next family in the font stack is Helvetica, so that is what the browser will use.
2. b. The font property is set by the parent element.
3. d. The line height is defined as a unitless number (1.42857143).
4. d. You can define headlines with both the <h1> through <h6> tags and the .h1 through .h6 classes.
5. c. The .lead class makes the text larger.
6. c. The .text-center class will center the paragraph text inside a block.
7. a. Use the Bootstrap .text-uppercase class.
8. d. The .background-danger class is not a Bootstrap helper class.
9. c. The <tt> tag is not styled by Bootstrap.
10. b. The .initialism class resizes the font to make the text more uniform.
Exercises
1. Open your Bootstrap web page and add a list to the content. Try the different list classes to see whether there are any that work well in your design.
2. Create a blockquote in your page to highlight a quotation.