Module 12 : Typography Basics in Bootstrap
1) Typography fundamentals
Typeface vs. font: Typeface = family (e.g., Roboto), font = a specific weight/style (e.g., Roboto Bold).
Type scale: A consistent set of font sizes (e.g., 12, 14, 16, 20, 24, 32). Important for rhythm.
Line-height (leading): Vertical spacing between lines — critical for readability. Typical: 1.4–1.6 for body text.
Measure: Optimal characters per line (~45–75 chars).
Contrast & weight: High contrast improves legibility, but excessive weight harms reading speed.
Hierarchy: Headings, subheadings, body, captions—establish hierarchy using size, weight, spacing.
2) Bootstrap’s typography building blocks
Bootstrap provides:
Semantic elements: <h1>…<h6>, <p>, <small>, <blockquote>, <figcaption>, <mark>.
Utility classes: fs-* (font-size), lh-* (line-height), fw-* (font-weight), fst-* (font-style), text-* (color/alignment/wrapping), text-decoration-*, text-break, text-truncate, display-*, lead.
Display headings: .display-1 to .display-6 (large, attention headings).
Responsive utilities: add breakpoint suffixes like fs-3 fs-md-2.
Text wrapping & truncation: .text-wrap, .text-nowrap, .text-truncate, .text-break.
Blockquotes: .blockquote and .blockquote-footer.
Lists and inline text helpers.
In Bootstrap 5 the naming uses short, consistent utility classes — those keys and how to compose them.
How to include Bootstrap
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.x/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.x/dist/js/bootstrap.bundle.min.js"></script>
NPM / SASS workflow (for customization):
npm install bootstrap # then import in your SCSS: @import "node_modules/bootstrap/scss/bootstrap";
Use SASS customization to change variables before importing.
examples
Example 1 — Basic semantic layout + Bootstrap utilities
<section class="container py-4"> <h1 class="display-4">Designing with Type in Bootstrap</h1> <p class="lead">A short intro paragraph using the lead class for emphasis and slightly larger text.</p> <h2 class="mt-5">Subheading</h2> <p class="fs-5 lh-lg"> Body text sized with <code>fs-5</code> and a larger line-height from <code>lh-lg</code> to improve readability. </p> <blockquote class="blockquote ps-3 border-start"> <p class="mb-0">Good typography is invisible — it helps content flow.</p> <footer class="blockquote-footer">Type Theory — <cite title="Source Title">Design Books</cite></footer> </blockquote> </section>
Why these classes?
display-4 → big heading for lead → slight increase in font-size and softer weight for intro lines.
fs-5 & lh-lg → explicit font-size and line-height combination gives predictable rhythm across devices.
.border-start on blockquote gives visual cue without extra CSS.
Example 2 — Responsive font sizes
<h1 class="fs-1 fs-md-2 fs-lg-1">Responsive heading</h1>
The class fs-1 is default on mobile; on md screens we use fs-md-2 to slightly reduce size; on lg we revert to fs-lg-1. Use breakpoints to tune hierarchy.
Example 3 — Truncation and wrapping
<p class="text-truncate" style="max-width: 200px;">This is a long paragraph that will be truncated with an ellipsis at the end.</p> <p class="text-break">If you have long strings (like URLs or long words) use text-break to avoid overflow: a_very_long_word_without_any_breakpoints_will_wrap.</p>
text-truncate only works inside a block with constrained width and d-inline-block or similar; text-break enables breaks inside long words.
Example 4 — Using custom fonts (Google Fonts example)
HTML head
<link rel="preconnect" href="https://fonts.googleapis.com"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap" rel="stylesheet"> <style> :root { --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; } body { font-family: var(--bs-body-font-family); } </style>
Setting --bs-body-font-family overrides default at root; display=swap in Google Fonts encourages better performance and prevents invisible text.
Bootstrap typography with SASS
Key variables (you can override before importing Bootstrap)
$font-family-sans-serif
$font-family-base
$font-size-base (base font size)
$font-size-lg, $font-size-sm (components)
$headings-font-family, $headings-font-weight
$headings-line-height
$body-line-height
$headings-margin-bottom etc.
Example custom.scss:
// 1. Set variables $font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; $font-family-base: $font-family-sans-serif; $font-size-base: 1rem; // 16px $body-line-height: 1.6; $headings-font-weight: 700; // 2. Import Bootstrap @import "node_modules/bootstrap/scss/bootstrap";
Changing these SASS variables before import ensures Bootstrap's generated CSS uses your values everywhere consistently (utilities and components).
Responsive typography
Utility-based: Use fs-* with breakpoint variants (fs-sm-4 fs-md-3) to tune specific elements.
Scale-based: Define a modular scale (e.g., 1.125 ratio) in SASS and generate utility classes or use existing heading classes mapped to that scale.
Clamp() for fluid typography:
h1 { font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem); }
Why clamp? clamp(min, preferred, max) gives fluid resizing without JS — combine with Bootstrap containers to make headings scale smoothly.
Accessibility
Minimum tappable/legible size: body text should generally not be below 16px on mobile (or use font-size: 100% base and allow user scaling).
Contrast: Ensure color contrast meets WCAG AA (>=4.5:1 for normal text). Use text-* utilities carefully — ensure custom colors keep contrast.
Semantic HTML: Use heading order (h1 → h2 → h3) for screen readers and SEO; avoid skipping heading levels.
Line-height and measure: Use lh-* utilities or custom line-height: 1.5 to improve readability; constrain line length (max-width) for long paragraphs.
Performance
Limit font families and weights — each weight adds file size. Use font-display: swap and preload critical fonts.
Use variable fonts if possible to consolidate weights into a single file.
Only load the character sets you need (subset).
fixes
Truncation not working: Ensure parent has width and overflow: hidden and element set to display: inline-block or appropriate block-level with text-truncate.
Inconsistent spacing: Heading margins may differ from Bootstrap defaults if you override base variables. Keep a consistent rhythm by controlling margins in SASS.
Long words overflow: Use .text-break or CSS word-break: break-word; for robustness.
Font loading causing layout shift (CLS): Preload critical fonts, use font-display: swap, reserve space by setting font-size and line-height early.
exercises
Exercise A — Semantic and utility usage
Create a small article layout with:
heading and subheading.
Lead paragraph.
Two-column content: left column article, right column with short author bio (avatar & caption).
Apply accessible line-height and ensure author bio text truncates gracefully if long.
Starter HTML
<div class="container py-4"> <!-- student fills this --> </div>
Solution (concise)
<div class="container py-4"> <header class="mb-4"> <h1 class="display-5">Understanding Bootstrap Typography</h1> <p class="lead">Practical tips for readable, accessible interfaces.</p> </header> <div class="row"> <article class="col-lg-8"> <h2>Introduction</h2> <p class="fs-5 lh-lg">Bootstrap provides many utilities...</p> <!-- more content --> </article> <aside class="col-lg-4"> <div class="d-flex align-items-start"> <img src="avatar.jpg" alt="Author avatar" class="rounded-circle me-3" width="60" height="60"> <div style="max-width: 220px;"> <strong>Alex Dev</strong> <p class="mb-0 text-truncate">Frontend engineer, designer, long-title-may-be-truncated-if-too-long</p> </div> </div> </aside> </div> </div>
Key teaching points: semantic tags, lead, fs-5, lh-lg, text-truncate, responsive columns.
Exercise B — Custom SASS variables
Create a custom SASS build that:
Sets base font to Inter (weights 400 & 600).
Sets $font-size-base to 1rem and $body-line-height to 1.6.
Recompiles Bootstrap and produces a minimal CSS file.
hints: override variables before @import "bootstrap";, use node-sass or sass to compile.
Sample custom.scss solution
// custom.scss $font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; $font-family-base: $font-family-sans-serif; $font-size-base: 1rem; $body-line-height: 1.6; @import "node_modules/bootstrap/scss/bootstrap";
Compile
sass custom.scss custom.css --style=compressed
points: variable override order matters; you must set before importing main Bootstrap SASS.
Exercise C — Advanced: Fluid type using clamp() and utility integration
Implement a heading using clamp() that:
Is at least 28px, scales with viewport, and maxes at 64px.
Integrates with Bootstrap such that .hero-title can be used in markup.
Solution (CSS)
.hero-title { font-weight: 700; line-height: 1.05; font-size: clamp(1.75rem, 4vw + 1rem, 4rem); /* ~28px — 64px range */ }
HTML usage
<h1 class="hero-title">Scale-first hero title</h1>
points: test on multiple viewports, ensure text wrap behavior; pair with max-width on container for measure.
Advanced topics & research
Variable fonts: benefits (reduced file size when using many weights) and techniques to animate weight.
Optical sizing (font-optical-sizing): How modern fonts adjust letterforms depending on size.
Performance tradeoffs: Subsetting fonts, automatic fallbacks, FOUT vs FOIT strategies.
International typography: Handling CJK, Arabic, RTL — measure/line-height considerations, lang attribute, font fallbacks.
CSS Container Queries + responsive typography: Instead of viewport-based sizing, adapt type to container size.
Automated testing: Visual regression testing for typography using Percy/Chromatic — how to detect regressions.
Typography tokens & design systems: Map Bootstrap typographic tokens to design tokens (Figma/shared tokens) and export pipeline.
Bootstrap typography utilities
display-1 … display-6 — large display headings
lead — larger introductory paragraph
fs-1 … fs-6 — font-size utilities (numeric scale)
fw-light, fw-normal, fw-bold — font-weight
fst-italic, fst-normal — font-style
lh-1, lh-sm, lh-base, lh-lg — line-height helpers
text-start, text-center, text-end — alignment
text-wrap, text-nowrap, text-truncate, text-break — wrapping/truncation
text-decoration-none, text-decoration-underline, text-decoration-line-through — decoration
Responsive: append -sm, -md, -lg, -xl, -xxl when supported, e.g., fs-3 fs-md-2.
project
Type audit: perform a typography audit on an existing website and propose improvements (font size, line-height, color contrast).
Design token mapping: Convert Bootstrap typography tokens into a JSON token file for a design system.
A/B test: Build two versions of the same content with different type scales and measure readability (time on task, comprehension quiz).
Example answers And questions
Q: Should I always use fs-* utilities or set font-size in CSS?
A: Utilities are fast and consistent for small changes and prototyping. For system-wide scale changes or semantic control use SASS variables or a dedicated CSS class (e.g., .hero-title) to centralize control.
Q: How many font weights should I include?
A: Keep it minimal. Typical production picks: 300 (optional light), 400 (regular), 600/700 (semibold/bold). Consider variable fonts to cover many weights in one file.
Q: Is line-height: 1.6 always best?
A: It's a sensible default for body text. Shorter headings often use tighter line-height (1.1–1.2). Adjust for font metrics and the content's reading context.
References
Bootstrap official docs — Typography section (exact utility names).
MDN Web Docs — font-family, line-height, font-variant, text-wrap, text-overflow.
Articles : Designing with Type, The Elements of Typographic Style (for theory).
Research : variable font whitepapers, WCAG guidelines for text contrast and accessibility.
coding specialist
Demo live: build one example from scratch in the (show SASS variable override and the resulting CSS differences).
Encourage: typography is both technical and aesthetic — provide tools (Figma, type scale calculators)
Check browsers: test font features (variable fonts, font-optical-sizing) across target browsers.
Provide starter repo: include a minimal project with custom.scss, index.html, and npm scripts to compile — makes frictionless.
No comments:
Post a Comment