Chapter 12 Intermediate 55 Questions

Practice Questions — Typography and Google Fonts

← Back to Notes
16 Easy
19 Medium
10 Hard

Topic-Specific Questions

Question 1
Easy
What does this declare?
font-family: 'Poppins', Arial, sans-serif;
Commas mean fallback fonts.
Try Poppins first. If not available, use Arial. If Arial is also missing, use the default sans-serif font.
Question 2
Easy
Why must 'Times New Roman' be in quotes?
The name has spaces.
Because it contains spaces. Font names with spaces must be quoted so the parser treats them as a single name.
Question 3
Easy
What is the default font-weight for normal?
Weights run 100 to 900 in steps of 100.
400
Question 4
Easy
What is the unit-free line-height of 1.6 relative to?
Unitless line-heights multiply the element's font-size.
The element's own font-size. A 20px font with line-height 1.6 gets a 32px line-height.
Question 5
Easy
What does text-transform: uppercase do?
Does it change the HTML?
Displays the text in all capital letters, without changing the actual HTML.
Question 6
Easy
What does font-size: 2rem produce if the root font-size is 16px?
rem = root em.
32px.
Question 7
Easy
What does text-decoration: none do?
Think about what links look like by default.
Removes the underline from links (or the line from tags).
Question 8
Easy
What three values does text-shadow need at minimum?
Think position and color.
x-offset, y-offset, and color. Blur is optional.
Question 9
Easy
What does letter-spacing: 0.1em do?
Think about space between characters.
Adds space equal to 10% of the font size between every character.
Question 10
Easy
Which is a monospace font?
Think code editors.
Fira Code, Courier New, and Monaco are monospace fonts. Every character has the same width.
Question 11
Medium
What is the result?
font-size: clamp(16px, 3vw, 24px);
clamp takes min, preferred, max.
The font-size is at least 16px, grows to 3% of the viewport width at medium sizes, and never exceeds 24px.
Question 12
Medium
What is the font-family of system-ui?
It is a generic family like sans-serif.
Whatever font the user's operating system uses for its UI (San Francisco on macOS, Segoe UI on Windows, Roboto on Android).
Question 13
Medium
Why is unitless line-height better than px for a parent element?
Think about a h1 with bigger font inside.
Unitless line-heights multiply the child's own font-size, so headings and paragraphs each get proportional spacing. Fixed px line-heights inherit as-is and may be too tight for large children.
Question 14
Medium
What does this shorthand set?
font: italic bold 18px/1.5 'Poppins', sans-serif;
Order: style weight size/line-height family.
font-style: italic, font-weight: bold, font-size: 18px, line-height: 1.5, font-family: 'Poppins', sans-serif.
Question 15
Medium
What does &display=swap do in a Google Fonts URL?
Think about what happens while the font is loading.
Tells the browser to show the fallback font immediately, then swap to the web font once it finishes downloading.
Question 16
Medium
What is the difference between em and rem?
What are they each relative to?
em is relative to the parent element's font-size (compounds when nested). rem is relative to the root (html) font-size (no compounding).
Question 17
Medium
What happens if the browser cannot load a Google Font?
Fallbacks.
The browser uses the next font in the font-family fallback list (Arial, Georgia, sans-serif, etc.).
Question 18
Medium
What does text-decoration: underline wavy #a855f7 do?
Modern shorthand allows style and color.
Applies a wavy purple underline under the text.
Question 19
Medium
Which text-align value justifies text to both left and right margins?
Newspaper layout.
justify
Question 20
Medium
What does font-weight: 800 mean?
Weight scale is 100-900.
Extra bold (heavier than regular bold which is 700).
Question 21
Hard
What is the computed line-height in px?
body { font-size: 18px; line-height: 1.6; }
Multiply.
28.8px (18 x 1.6).
Question 22
Hard
Why does this cause a problem?
@font-face { font-family: 'MyFont'; src: url('font.woff2') format('woff2'); }
/* No font-display */
Think about what the user sees while the font is downloading.
The browser hides text until the font loads (FOIT - Flash of Invisible Text), causing blank content for up to 3 seconds.
Question 23
Hard
What is this element's final font-size?
html { font-size: 18px; }
body { font-size: 1rem; }
h1 { font-size: 2em; }
body is 1rem (relative to root), h1 is 2em (relative to body).
36px. (root=18, body=18, h1=2*18=36).
Question 24
Hard
When should you pick a system font stack over Google Fonts?
Think load time and design intent.
Use system fonts when performance is critical (no download), when you want a native platform look, or when the design doesn't need a custom personality. Use Google Fonts when you want a specific brand look or a font that is consistent across all devices.
Question 25
Hard
Why use max-width: 60ch or max-width: 65ch for paragraph text?
ch = width of the '0' character. Think readability studies.
Typography research shows paragraphs are easiest to read when lines contain 45-75 characters. max-width: 65ch limits line length to roughly 65 characters, improving reading comfort and reducing eye fatigue.

Mixed & Application Questions

Question 1
Easy
What is font-weight: bold equal to numerically?
Weights go 100-900.
700
Question 2
Easy
Which unit is relative to the viewport width?
vw.
vw
Question 3
Easy
What does text-transform: capitalize do?
Think first letter.
Capitalizes the first letter of each word.
Question 4
Easy
What does text-decoration: line-through look like?
Think crossed-out text.
Text with a horizontal line through the middle, like crossed-out text.
Question 5
Easy
Which generic font family is always monospace?
Fixed character width.
monospace
Question 6
Easy
What is the advantage of rem over px?
Think accessibility - users changing the default font-size.
rem scales with the root font-size. If a user sets a larger default font-size in their browser for accessibility, rem values scale up too. px stays fixed.
Question 7
Medium
What does this shorthand NOT include?
font: 18px/1.5 Arial;
Minimal form with just size, line-height, and family.
font-style and font-weight are not specified. They will use their default values (normal, normal).
Question 8
Medium
How do you make link text NOT underlined?
text-decoration.
a { text-decoration: none; }
Question 9
Medium
How do you make fallback text visible while a web font loads?
font-display.
Use font-display: swap in @font-face or &display=swap in the Google Fonts URL.
Question 10
Medium
What does this do?
text-shadow: 2px 2px 0 black, 4px 4px 0 #a855f7;
Two shadows stacked.
Creates a 3D/layered effect with a black shadow 2px down-right and a purple shadow 4px further down-right.
Question 11
Medium
What does font-style: italic do?
Slanted text.
Displays text in the italic variant of the font (slanted characters).
Question 12
Medium
Why load only the font weights you need from Google Fonts?
Each weight is a separate file.
Each weight is a separate font file that the browser must download. Loading 9 weights instead of 3 can add hundreds of kilobytes and slow page load noticeably.
Question 13
Medium
What is a good line-height for body paragraphs?
Typographers recommend 1.5-1.8.
Unitless 1.5 to 1.8. Lower (1.2) for headings, higher for body paragraphs.
Question 14
Medium
Which is a web-safe font available on almost every device?
Classic names.
Arial, Georgia, Times New Roman, Courier New, Verdana, Tahoma, Trebuchet MS, and Impact are widely available.
Question 15
Medium
Why would you combine a serif font for body and a sans-serif for headings?
Readability and contrast.
Serif fonts have decorative strokes that improve readability in long paragraphs. Sans-serif fonts look clean and modern for headings. Combining them creates visual contrast and hierarchy.
Question 16
Hard
What is the result?
p::first-line { font-weight: bold; }
::first-line is a pseudo-element.
Makes only the first line of every paragraph bold.
Question 17
Hard
What is the effect?
h1 { font: 600 clamp(32px, 5vw, 72px)/1.1 'Inter', sans-serif; letter-spacing: -0.02em; }
Shorthand plus clamp plus tighter letter-spacing.
A semibold h1 in Inter with fluid font-size (32-72px), tight line-height (1.1), and slightly tightened letter-spacing for a polished modern heading.
Question 18
Hard
What is the difference between FOIT and FOUT?
Both are font loading issues. One flashes invisible, one flashes unstyled.
FOIT (Flash of Invisible Text) is when the browser hides text completely while the font loads. FOUT (Flash of Unstyled Text) is when the browser shows fallback text first then swaps to the web font. font-display: swap causes FOUT, which is usually preferred.
Question 19
Hard
How does ch unit work?
It is based on a character.
The ch unit equals the width of the '0' (zero) character in the current font. max-width: 60ch limits a container to about 60 characters wide, regardless of font-size.
Question 20
Hard
Why add <link rel="preconnect"> before the Google Fonts link?
Performance.
preconnect tells the browser to start establishing a connection to fonts.googleapis.com and fonts.gstatic.com early, before it actually needs the font. This shaves milliseconds off font loading time.

Multiple Choice Questions

MCQ 1
Which CSS property sets the font?
  • A. font-name
  • B. font-face
  • C. font-family
  • D. text-font
Answer: C
C is correct. font-family sets the typeface. It accepts a list of fallback fonts ending with a generic family.
MCQ 2
Which unit is relative to the ROOT font-size?
  • A. em
  • B. rem
  • C. px
  • D. vw
Answer: B
B is correct. rem = 'root em'. Relative to the html element's font-size. em is relative to the parent.
MCQ 3
What is font-weight: bold numerically?
  • A. 400
  • B. 500
  • C. 600
  • D. 700
Answer: D
D is correct. The keyword bold corresponds to numeric weight 700. normal is 400.
MCQ 4
Which line-height is correct?
  • A. line-height: 16px (best)
  • B. line-height: 1.6 (unitless, best)
  • C. line-height: 160% (wrong)
  • D. line-height: auto
Answer: B
B is correct. Unitless line-heights scale correctly with the element's own font-size. Preferred for almost all cases.
MCQ 5
Which removes the underline from a link?
  • A. text-decoration: remove
  • B. text-decoration: none
  • C. underline: off
  • D. text-style: plain
Answer: B
B is correct. text-decoration: none removes underlines, overlines, and line-throughs.
MCQ 6
How do you display text in all uppercase without changing the HTML?
  • A. font-case: upper
  • B. text-transform: uppercase
  • C. text-style: caps
  • D. font-variant: all-uppercase
Answer: B
B is correct. text-transform: uppercase renders the text in caps visually without modifying the source.
MCQ 7
Which generic font family is for code?
  • A. serif
  • B. sans-serif
  • C. monospace
  • D. cursive
Answer: C
C is correct. monospace guarantees every character has the same width, which is ideal for code.
MCQ 8
How do you center text horizontally?
  • A. align: center
  • B. text-align: center
  • C. text-position: center
  • D. center-text: true
Answer: B
B is correct. text-align: center centers inline content within its block container.
MCQ 9
Which is a web-safe font?
  • A. Poppins
  • B. Inter
  • C. Arial
  • D. Merriweather
Answer: C
C is correct. Arial is preinstalled on virtually every device. The others are web fonts that require loading.
MCQ 10
What does &display=swap do?
  • A. Swaps the font color
  • B. Shows fallback text until the web font loads, then swaps to the web font
  • C. Disables the font
  • D. Rotates through multiple fonts
Answer: B
B is correct. swap keeps text visible during font loading by showing fallback first, then swapping to the web font.
MCQ 11
What does clamp(16px, 2vw, 24px) return?
  • A. Always 16px
  • B. Always 24px
  • C. A value between 16px and 24px based on viewport width
  • D. An error
Answer: C
C is correct. clamp(min, preferred, max) returns the preferred value (2vw), but clamped to never go below 16px or above 24px.
MCQ 12
Which font property quoting is correct?
  • A. font-family: Times New Roman
  • B. font-family: 'Times New Roman', serif
  • C. font-family: "Arial" sans-serif
  • D. font-family: Poppins Bold
Answer: B
B is correct. Names with spaces must be quoted. Multiple fonts are separated by commas, ending with a generic family.
MCQ 13
What is the font shorthand order?
  • A. family size weight
  • B. style weight size/line-height family
  • C. size family weight style
  • D. weight family size
Answer: B
B is correct. The order is: font-style font-variant font-weight font-size/line-height font-family. Family must be last.
MCQ 14
Which is better for accessibility: px or rem for font-size?
  • A. px (it is absolute)
  • B. rem (it respects user's default font-size setting)
  • C. em (it is compact)
  • D. They are identical
Answer: B
B is correct. rem scales with the root font-size, which users can increase for accessibility. px stays fixed regardless.
MCQ 15
Which text-shadow creates a soft glow?
  • A. text-shadow: 0 0 0 red
  • B. text-shadow: 0 0 20px red
  • C. text-shadow: 5px 5px red
  • D. text-shadow: none
Answer: B
B is correct. Zero offsets with a large blur produce a soft glow around the text.
MCQ 16
What is a reasonable max-width for comfortable reading?
  • A. 1200px
  • B. 65ch or around 680px
  • C. 100%
  • D. 40ch
Answer: B
B is correct. 45-75 characters per line is the sweet spot. 65ch or around 680px work well for body text.
MCQ 17
Why add preconnect links before Google Fonts?
  • A. Required by Google
  • B. Faster font loading by establishing connections early
  • C. Better SEO
  • D. For caching
Answer: B
B is correct. preconnect warms up the DNS and TLS handshake before the browser needs the font file, reducing load time.
MCQ 18
Which declares a custom font from your own file?
  • A. @import-font
  • B. @font-face
  • C. @custom-font
  • D. @load-font
Answer: B
B is correct. @font-face declares a custom font with its file location, format, weight, style, and display strategy.
MCQ 19
What does letter-spacing: -0.02em do to big headings?
  • A. Expands spacing
  • B. Tightens characters slightly, which looks better for large display text
  • C. Has no effect
  • D. Only works for uppercase
Answer: B
B is correct. Big headings look better with slightly tightened letter-spacing. Positive spacing is for small uppercase labels.
MCQ 20
Which is NOT a valid font-weight value?
  • A. 400
  • B. bold
  • C. heavy
  • D. 700
Answer: C
C is correct. 'heavy' is not a CSS keyword. Valid keywords: normal, bold, bolder, lighter. Numeric: 100-900.
MCQ 21
What is the FOIT problem with web fonts?
  • A. The font file is too big
  • B. Text is invisible while the web font downloads
  • C. Fonts look different on mobile
  • D. Fonts cost money
Answer: B
B is correct. Flash of Invisible Text: the browser hides text until the web font loads. font-display: swap fixes this by showing fallback text immediately.
MCQ 22
Why use unitless line-height on the body element?
  • A. It looks nicer
  • B. Unitless values multiply the element's own font-size, so headings and paragraphs get proportional spacing
  • C. It is the only way it works
  • D. It is faster to parse
Answer: B
B is correct. Unitless line-heights scale per-element. A fixed px line-height on body would be inherited as-is and cause overlapping lines on big headings.
MCQ 23
Which combination creates clean modern blog typography?
  • A. Comic Sans, size 11, center aligned
  • B. Merriweather serif body, Inter sans-serif headings, line-height 1.7, max-width 65ch
  • C. Arial bold everywhere, justify align, single line
  • D. Times New Roman 12px, black background
Answer: B
B is correct. A serif for body improves reading comfort. Sans-serif for headings adds contrast. Airy line-height and a sensible max-width round out the recipe.
MCQ 24
Which is the best way to include Google Fonts for performance?
  • A. Load all 9 weights you might ever need
  • B. Load only the 2-3 weights you actually use with display=swap and preconnect
  • C. Download the font files and host them yourself always
  • D. Use @import in the CSS file
Answer: B
B is correct. Minimum weights, swap for visible fallback, preconnect to warm up the connection. @import blocks rendering and is slower than a link tag.
MCQ 25
What is the difference between em and rem when font-size changes?
  • A. They behave identically
  • B. em compounds through nested elements; rem always references the root
  • C. em is pixel-based; rem is percent-based
  • D. rem is older than em
Answer: B
B is correct. em is relative to the parent and compounds: 1.5em inside 1.5em = 2.25x root. rem always references the html element.

Coding Challenges

Challenge 1: Import and Apply Poppins

Easy
Create a page with a heading 'Hello from Priya' and a short paragraph. Import Poppins from Google Fonts with weights 400 and 800. Apply Poppins to the whole body. Heading should be weight 800, paragraph weight 400.
Sample Input
Open the HTML file
Sample Output
A page with a bold Poppins heading and a regular Poppins paragraph.
Use preconnect, display=swap, and load only the needed weights.
<!DOCTYPE html>
<html>
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap" rel="stylesheet">
  <style>
    body { font-family: 'Poppins', sans-serif; padding: 40px; color: #1a1a2e; line-height: 1.6; }
    h1 { font-weight: 800; font-size: 48px; margin: 0 0 12px; }
    p { font-weight: 400; font-size: 18px; max-width: 600px; }
  </style>
</head>
<body>
  <h1>Hello from Priya</h1>
  <p>This page uses the Poppins font loaded from Google Fonts. The heading is weight 800, the paragraph is weight 400.</p>
</body>
</html>

Challenge 2: Fluid Heading with clamp

Easy
Create a page with a heading that uses clamp() to scale smoothly from 32px (minimum) to 64px (maximum) based on viewport width. Resize the window to test.
Sample Input
Resize the browser
Sample Output
The heading grows and shrinks smoothly as the window changes width.
Use clamp(32px, 5vw, 64px). No media queries.
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: system-ui, sans-serif; padding: 40px; background: #0f172a; color: white; }
    h1 { font-size: clamp(32px, 5vw, 64px); line-height: 1.1; margin: 0; }
    p { font-size: 16px; color: #94a3b8; max-width: 500px; }
  </style>
</head>
<body>
  <h1>Resize me, Aarav!</h1>
  <p>This heading scales smoothly between 32px and 64px as the window width changes. No media queries.</p>
</body>
</html>

Challenge 3: Blog Post Layout

Medium
Build a blog post with Merriweather serif for body and Inter sans-serif for headings. Include a title, meta line (author + date in uppercase tracked label style), 2 paragraphs, and an italic blockquote with colored left border.
Sample Input
Open the HTML file
Sample Output
A clean blog post with serif body, sans-serif title, uppercase meta, and a styled blockquote.
Use two Google Fonts. max-width 680px, line-height 1.75, letter-spacing on meta line.
<!DOCTYPE html>
<html>
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@600&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body { font-family: 'Merriweather', Georgia, serif; max-width: 680px; margin: 0 auto; padding: 60px 20px; line-height: 1.75; color: #1a202c; }
    h1 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 44px; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 8px; }
    .meta { font-family: 'Inter', sans-serif; font-size: 12px; color: #64748b; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 30px; }
    p { font-size: 18px; margin-bottom: 20px; }
    blockquote { border-left: 4px solid #a855f7; padding: 8px 20px; margin: 30px 0; font-style: italic; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Why I Love Coding</h1>
  <p class="meta">By Kavya Reddy - April 11, 2026</p>
  <p>Coding gives me a superpower. I can take an idea from my head and turn it into something I can click, play with, and share with my friends. That feeling never gets old.</p>
  <blockquote>The only way to learn a new programming language is by writing programs in it.</blockquote>
  <p>Last week I built a calculator app, and today I am learning typography. Every day is a new adventure.</p>
</body>
</html>

Challenge 4: Neon Text Effect

Medium
Create a dark background page with the text 'RIYA CODES' as a big heading that glows neon purple using multiple text-shadows. Add a subtitle below it with a softer cyan glow.
Sample Input
Open the HTML file
Sample Output
Big neon purple 'RIYA CODES' glowing on a dark background with a cyan subtitle.
Use multiple stacked text-shadows. Dark body background. Center everything.
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; background: #0a0a0f; color: white; text-align: center; padding: 120px 20px; min-height: 100vh; margin: 0; box-sizing: border-box; }
    h1 {
      font-size: 80px;
      letter-spacing: 4px;
      margin: 0;
      text-shadow:
        0 0 4px #fff,
        0 0 12px #a855f7,
        0 0 25px #a855f7,
        0 0 50px #a855f7,
        0 0 90px #a855f7;
    }
    p {
      font-size: 22px;
      color: #06b6d4;
      margin-top: 20px;
      letter-spacing: 2px;
      text-shadow: 0 0 10px #06b6d4, 0 0 25px #06b6d4;
    }
  </style>
</head>
<body>
  <h1>RIYA CODES</h1>
  <p>Until The Sun Rises</p>
</body>
</html>

Challenge 5: Product Card Typography

Hard
Build a product card with an uppercase amber 'LIMITED OFFER' eyebrow label (tracked letter-spacing), a bold heading, a price with a line-through original price next to it in gray, and a description paragraph. Use proper type hierarchy.
Sample Input
Open the HTML file
Sample Output
A card showing all elements with clear typographic hierarchy.
Use the font shorthand. text-transform and letter-spacing on the eyebrow. text-decoration line-through on original price.
<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: system-ui, sans-serif; padding: 40px; background: #f9fafb; color: #1a1a2e; }
    .card { max-width: 360px; background: white; padding: 28px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
    .eyebrow { font: 700 11px/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.15em; color: #f59e0b; margin: 0 0 10px; }
    .title { font: 800 24px/1.2 system-ui, sans-serif; margin: 0 0 12px; }
    .price { font: 800 28px/1 system-ui, sans-serif; color: #a855f7; margin: 0 0 12px; }
    .old { font-size: 18px; color: #9ca3af; text-decoration: line-through; font-weight: normal; margin-left: 8px; }
    .desc { font-size: 15px; line-height: 1.6; color: #4b5563; margin: 0; }
  </style>
</head>
<body>
  <div class="card">
    <p class="eyebrow">LIMITED OFFER</p>
    <h2 class="title">Frontend Masterclass</h2>
    <p class="price">Rs 2,999<span class="old">Rs 4,999</span></p>
    <p class="desc">A 12-week course for teens by Ishaan. Learn HTML, CSS, and JavaScript by building real projects.</p>
  </div>
</body>
</html>

Challenge 6: Typography System Page

Hard
Build a 'Typography System' demo page that shows H1, H2, H3, paragraph, blockquote, ordered list, and code elements with consistent professional styling. Use one sans-serif Google Font.
Sample Input
Open the HTML file
Sample Output
A design-system style documentation page showing every text element with clear hierarchy.
All sizes use rem. Unitless line-heights. max-width 700px. Clean spacing between elements.
<!DOCTYPE html>
<html>
<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
  <style>
    :root { font-size: 16px; }
    body { font-family: 'Inter', sans-serif; max-width: 700px; margin: 0 auto; padding: 60px 20px; line-height: 1.6; color: #1a202c; background: white; }
    h1 { font-weight: 800; font-size: 3rem; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
    h2 { font-weight: 700; font-size: 2rem; line-height: 1.2; margin: 2.5rem 0 0.75rem; color: #a855f7; }
    h3 { font-weight: 600; font-size: 1.25rem; line-height: 1.3; margin: 1.75rem 0 0.5rem; }
    p { font-size: 1.0625rem; margin: 0 0 1rem; }
    blockquote { border-left: 4px solid #06b6d4; padding: 4px 16px; margin: 1.5rem 0; font-style: italic; color: #4b5563; }
    ol { padding-left: 1.5rem; }
    ol li { margin-bottom: 0.5rem; }
    code { font-family: 'Fira Code', 'Courier New', monospace; background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-size: 0.95em; color: #a855f7; }
    .intro { font-size: 1.25rem; color: #64748b; }
  </style>
</head>
<body>
  <h1>Typography System</h1>
  <p class="intro">A consistent type scale for everything Meera builds.</p>
  <h2>Heading 2: Section Title</h2>
  <p>This is a paragraph of body text. Good typography feels effortless to read. The line-height is 1.6 and the max-width keeps lines at a comfortable length.</p>
  <h3>Heading 3: Subsection</h3>
  <p>Use <code>font-family</code> with fallbacks and <code>line-height</code> as an unitless value for best results.</p>
  <blockquote>"Typography is two-dimensional architecture." - Hermann Zapf</blockquote>
  <h3>Ordered list</h3>
  <ol>
    <li>Pick one sans-serif font for the UI.</li>
    <li>Use 2-3 weights (400, 600, 800).</li>
    <li>Set unitless line-height on the body.</li>
    <li>Limit line length to 65ch for readability.</li>
  </ol>
</body>
</html>

Need to Review the Concepts?

Go back to the detailed notes for this chapter.

Read Chapter Notes

Want to learn web development with a live mentor?

Explore our Frontend Masterclass