Chapter 12: Typography and spacing

Introduction

The chapter introduces typography and element spacing as related parts of refining a page’s design.

• Typography and spacing connection: Explain why the chapter treats font choices and element spacing together: they interact, and CSS controls the layout, spacing, and size of fonts.
  Why it matters: Considering fonts and spacing together helps you refine how a page looks.

Key terms: spacing, fonts, layout

12.1 Spacing

This section frames matching a designer’s element spacing as an iterative task that usually starts with margins.

• Margins as a spacing starting point: Explain why setting element margins is a useful first step when matching a designer’s spacing, and why further adjustments may still be needed.
  Why it matters: It gives you a practical starting point without treating the first spacing pass as final.

Key terms: spacing, margins

12.1.1 Using ems vs. px

This subsection shows how to choose relative or pixel units for spacing and how to place that space around navbar items and larger page elements.

• Spacing unit choices: Explain when the author favors ems or rems over pixels for spacing, and apply the navbar’s 10 px measurement using its 16 px base font size.
  Why it matters: The unit choice determines whether spacing responds to changes in font size.
• Placement of page spacing: Distinguish why the navbar uses container padding and a flexbox gap, while the gaps below the hero image and between the columns use margins.
  Why it matters: Choosing where to apply space helps match the intended boundaries of each element.

Key terms: ems, rems, px, base font size, padding, margins, flexbox gap, nav-container__inner

12.1.2 Factoring in line height

This section shows how to account for line height when matching the visible spacing around text to a design mockup.

• Line height and visible gaps: Explain why a CSS margin does not necessarily equal the visible gap between two lines of text. Describe how line height adds space above and below the characters within each content box.
  Why it matters: It explains why copying a measured gap directly into a margin can make text look too far apart.
• Tile text spacing adjustments: Describe how the section adjusts tile padding and the heading-to-paragraph margin to match the mockup’s visible spacing. Explain why the heading and paragraph margins do not add together.
  Why it matters: It helps translate measured tile spacing into CSS without inadvertently enlarging the gap.
• Hero slogan spacing calculation: Trace how the slogan’s font size and line height affect the padding and gap needed to match the hero-image mockup.
  Why it matters: The hero example applies the same line-height reasoning to larger text and unequal gaps.

Key terms: line height, content box, margin, perceived space, ems, padding, margin collapsing, hero__inner, slogan, top padding

12.1.3 Spacing inline elements

This section shows how to space a wrapping list of inline tags without overlap and how that choice differs from flex or inline-block layouts.

• Inline padding and line height: Explain why padded inline tags can overlap when the list wraps and how increasing their line height fixes it.
  Why it matters: It helps you diagnose tags that look fine on one line but overlap at narrower widths.
• Inline tag layout tradeoffs: Distinguish inline tags from flex items or inline-blocks in how they space items and wrap text.
  Why it matters: The layout choice affects both the spacing you must add and what happens when a tag reaches the end of a line.

Key terms: inline element, padding, line height, tag-list module, inline elements, flex item, inline-block, natural whitespace, line wrap

12.2 Web fonts

This section explains how web fonts expand font choices, affect a page’s tone, and can be selected and paired for headings and body text.

• Web Fonts and Fallbacks: Distinguish web fonts from web-safe system fonts, and explain why a custom font that is only installed on some users’ systems needs a fallback.
  Why it matters: This distinction explains why a chosen typeface can appear for users who do not already have it installed.
• Typeface Choice and Tone: Explain how changing typefaces can change the impression a page makes, even when its text stays the same.
  Why it matters: Font selection helps communicate the character of a site, not just make its text legible.
• Web Font Service Tradeoffs: Describe why a developer might use an online font service and when they might instead need to host a font themselves.
  Why it matters: The source of a font affects both how it is provided and whether you have the right to use it.
• Heading and Body Font Pairing: Describe the common practice of choosing fonts for headings and body text, including the serif and sans serif distinction.
  Why it matters: This gives you a way to describe font choices for different roles in a page.

Key terms: web-safe fonts, system fonts, web fonts, @font-face, fallback, typeface, tone, Google Fonts, Adobe Fonts, hosting

12.3 Google fonts

This section shows how to select Google Fonts, limit the variants downloaded, embed the supplied stylesheet, and apply the fonts with CSS.

• Google Fonts family selection: Describe how to find Sansita and Roboto in Google Fonts, add them to the selected families, and obtain embed code.
  Why it matters: Selecting the families is the first step toward using them on the page.
• Font variant download tradeoff: Explain why the example deselects unneeded weights and styles, and identify the variants it keeps.
  Why it matters: Choosing only needed variants avoids unnecessary font downloads.
• Font stylesheet and preconnect: Explain what the supplied stylesheet link and preconnect links do when added to the page’s head.
  Why it matters: The links make the font definitions available and help the browser begin loading them sooner.
• Font family application: Describe how the example applies Roboto and Sansita after adding the Google Fonts stylesheet.
  Why it matters: Loading a font makes it available, but font-family rules determine where it appears.

Key terms: Google Fonts, font families, Get Font, Get Embed Code, typeface, font, variants, weights, Roboto Light (300), Sansita Extra-bold (800)

12.4 How @font-face works

This section explains how @font-face rules connect a font name and rendering requirements to a downloadable file, and why Google splits character sets across font files.

• Font face rule mapping: Explain how an @font-face rule tells the browser which font file to use for a particular font family, style, weight, and set of characters. Describe the roles of font-family and src.
  Why it matters: This lets you understand a provider’s font CSS and define a rule for a font you host yourself.
• Character range font splitting: Explain why Google uses unicode-range to split commonly used Latin characters and extended character sets among font files.
  Why it matters: It explains why a provider’s stylesheet may contain several rules for character sets of a font.

Key terms: @font-face, font-family, src, font style, weight, unicode-range, Latin characters, extended character sets

12.4.1 Font formats and fallbacks

This section explains why a web font declaration may offer multiple file formats and how an installed font can avoid a download.

• Font format fallback: Explain why a web font declaration might provide URLs for both WOFF2 and a newer format, and why several older format fallbacks are generally unnecessary now.
  Why it matters: Offering supported formats keeps a web font usable as formats change without retaining unnecessary old fallbacks.
• Local font preference: Describe what the local() function checks before a browser downloads a web font.
  Why it matters: An already-installed font can save a font download.

Key terms: WOFF2, Web Open Font Format, font formats, local(), network request

12.4.2 Multiple variants of the same typeface

The section explains how to define multiple variants of a web typeface and why pages should use only variants they have supplied.

• Separate typeface variant definitions: Explain that each needed style or weight of a typeface requires its own @font-face rule, whether the CSS comes from a font provider or from fonts you host yourself. Describe how the browser selects the definition matching a requested weight.
  Why it matters: Separate definitions let the browser select the font variant your page requests.
• Missing variant approximation: Describe what the browser may do when CSS requests a weight or style that was not supplied, and explain why the section recommends using only weights and styles specified in @font-face rules.
  Why it matters: Supplying the variants you actually use helps avoid poorer-looking approximations.

Key terms: @font-face, typeface, font-weight, font-style, faux bold, faux italic

12.5 Performance considerations

This section explains the performance tradeoffs users experience while web fonts load and shows how to test font-loading behavior on a slow connection.

• Font loading display tradeoffs: Distinguish FOUT from FOIT and explain why neither is ideal when a web font is slow to load.
  Why it matters: The choice between visible fallback text and temporarily invisible text affects whether readers can use the page while its fonts load.
• Slow connection font testing: Describe how to use browser DevTools to observe font-loading behavior under conditions resembling a first visit on a slower connection.
  Why it matters: Testing a fresh load on a slower connection can reveal font behavior that a fast, cached development session hides.

Key terms: web fonts, system font, fallback, FOUT, FOIT, DevTools, Network tab, Regular 3G, Disable Cache

12.5.1 The font-display property

This section explains how font-display controls what readers see while web fonts load, then introduces font-relative units and their layout risks.

• Font loading display behaviors: Explain how font-display in an @font-face rule controls whether text is initially invisible or shown in a fallback font, and what happens when the web font becomes available.
  Why it matters: The setting determines whether visitors see readable fallback text or temporarily invisible text while a font loads.
• Font display strategy choices: Justify the section’s suggested font-display choices for fast and slow connections and for a font that is less vital to the design.
  Why it matters: Choosing a loading behavior lets you balance an immediate reading experience against displaying the intended typeface.
• Additional font relative units: Describe what lh, rlh, ch, and ex measure and give a use for lh or ch from the section.
  Why it matters: These units let spacing and dimensions relate to the text’s actual line height or font metrics.
• Font dependent layout shifts: Explain why the section advises against sizing large portions of a page with ch or ex when using web fonts.
  Why it matters: A font change can otherwise move large parts of the page after the visitor has begun reading.

Key terms: font-display, @font-face, FOIT, FOUT, block, swap, fallback, optional, &display=swap, lh

12.5.2 Variable fonts

This section explains how variable fonts provide multiple font styles in one file and how CSS controls their supported variation axes.

• Variable font file efficiency: Explain why a variable font can be a more efficient choice when a page needs multiple weights of the same typeface.
  Why it matters: It explains why the author recommends variable fonts when a design needs multiple styles of one typeface.
• Supported font weight ranges: Describe how a variation axis and an @font-face weight range let CSS use precise weights supported by a variable font.
  Why it matters: The declared range determines which precise weights you can actually use on the page.
• Registered variation axis controls: Explain how registered variation axes relate to ordinary CSS font properties and give examples of what they control.
  Why it matters: It helps you choose a straightforward font property while recognizing what the lower-level axis settings do.
• Custom font variation axes: Distinguish a font designer's custom axis from a registered axis and describe how CSS adjusts it.
  Why it matters: A font's documentation tells you how to use controls that have no matching CSS font property.

Key terms: variable fonts, font weights, typeface, variation axis, weight axis, @font-face, font-weight, font-variation-setting, registered axes, 'wght'

12.6 Adjusting space for readability

The section explains how balanced line and letter spacing make web-font text more comfortable to read.

• Balanced text spacing: Explain what line-height and letter-spacing control and why neither cramped nor overly spread-out text is easy to read.
  Why it matters: Comfortable spacing helps readers stay with the text instead of struggling through it.

Key terms: line-height, letter-spacing

12.6.1 Body copy spacing

This section explains how to tune line height and letter spacing for readable body copy and how to translate designers’ leading and tracking values into CSS.

• Readable body line height: Explain how to choose a line height for body copy and why longer lines may need more space between them.
  Why it matters: Line height helps readers move from one line of body text to the next without losing their place.
• Subtle body letter spacing: Describe when and how to adjust letter spacing, including the scale of useful changes.
  Why it matters: Small, restrained adjustments can improve readability without calling attention to the spacing itself.
• Leading and tracking conversions: Explain what designers mean by leading and tracking and convert their values to the corresponding CSS values using the section’s examples.
  Why it matters: These conversions let you implement spacing values supplied in a designer’s terminology.

Key terms: line-height, normal, body copy, letter-spacing, em, leading, tracking

12.6.2 Headings, small elements, and spacing

This section shows how to check heading spacing and adjust typography for short text and navigation without disrupting layout or tying design choices to HTML content.

• Wrapped heading spacing: Explain why headings need a spacing check separate from body copy and how to test headings that wrap.
  Why it matters: A heading that looks fine on one line may have awkward spacing when real content wraps.
• Short text letter spacing: Distinguish the readability needs of body copy from the spacing choices available for short, stylistic text.
  Why it matters: The amount of text determines how far you can push typography without hurting readability.
• Navigation typography and layout: Trace how the navigation text changes affect the surrounding layout and spacing units.
  Why it matters: A typography change can alter both an element’s position and its padding unless those effects are accounted for.
• Presentational capitalization in CSS: Justify using text-transform rather than editing HTML when capitalization is purely a design choice.
  Why it matters: Keeping visual capitalization in CSS makes redesigns easier without changing the underlying content.

Key terms: headings, line height, line wrap, body copy, letter-spacing, negative letter spacing, slogan, nav-container, align-items: end, ems

12.7 Summary