Text Manipulation with CSS
Learn how to style and manipulate text using CSS properties
🎯 ✍️ The Power of Typography
- Think about your favorite websites. What makes their text easy or difficult to read?
- How do different fonts and text styles affect your perception of a brand or message?
- What role does text styling play in making content accessible to all users?
Learning Objectives
By the end of this lesson, you'll be able to:
- ✓ Apply Apply font families and font stacks for cross-browser text consistency
- ✓ Control text size, weight, and style using appropriate CSS properties
- ✓ Adjust line height and letter spacing to improve readability
- ✓ Transform text case and add decorative effects like shadows
- ✓ Create Create text alignment and indentation for professional layouts
- ✓ Implement web fonts to expand typographic possibilities
- ✓ Practice typography principles through real-world exercises
Understanding Typography
Typography is the art and technique of arranging type to make written language legible, readable, and appealing. Its history spans from ancient handwritten texts to modern digital displays.
Type Anatomy
Historical Evolution
Historical Context
3000 BCE
Early writing systems and pictographs
1440s
Gutenberg's movable type revolutionizes printing
1980s
Digital typography emerges with desktop publishing
1990s
Web fonts and CSS bring typography to the internet
Key Concepts
- Type Anatomy: The parts of letters (baseline, x-height, ascenders, descenders)
- Typography Terms: Leading, kerning, tracking, and other essential concepts
- Type Classification: Serif, sans-serif, display, and decorative fonts
- Digital Evolution: From bitmap to vector fonts, web fonts to variable fonts
Basic Text Properties
Master the fundamental properties for styling text in CSS.
Font Family
Historical Context
The concept of font families emerged from traditional typesetting, where related fonts were grouped into families. Each family included variations like regular, bold, and italic, designed to work harmoniously together.
In digital typography, font families help maintain consistency across different devices and platforms, leading to the development of web-safe fonts and later, web fonts services.
The font-family property specifies the typeface for text elements.
Web Safe Fonts
Web safe fonts are typefaces that are pre-installed across most operating systems and devices. They're considered "safe" because:
Why They're "Safe"
- Universal Availability: Pre-installed on 99%+ of devices
- Zero Loading Time: No download required, instant rendering
- Consistent Performance: No FOUT (Flash of Unstyled Text)
- Fallback Reliability: Perfect for system font stacks
- Legacy Support: Work on older browsers and systems
Historical Context
Web safe fonts emerged in the early days of the web when:
- Bandwidth was limited and expensive
- @font-face wasn't widely supported
- Operating systems came with a standard set of fonts
- Web designers needed reliable typography solutions
Font Stacks
Modern System Font Stack
Modern approach: Using system UI fonts for native feel
Common Web Safe Fonts by Category
| Category | Font Names | Best Used For | OS Availability |
|---|---|---|---|
| Sans-serif | Arial, Helvetica, Verdana | Body text, UI elements | Windows, macOS, Linux |
| Serif | Times New Roman, Georgia | Headlines, long-form content | Windows, macOS |
| Monospace | Courier New, Monaco | Code, technical content | Universal |
- Web safe fonts might render differently across operating systems
- They often lack the design sophistication of modern web fonts
- Limited selection of weights and styles
- Best used as reliable fallbacks in font stacks
- Always include fallback fonts
- Use web-safe fonts or Google Fonts
- Consider loading times with web fonts
- Test fonts across different devices
- Use quotes for font names with spaces
- End with a generic font family
Web Font Formats
Modern web typography uses several font file formats, each with specific browser support and use cases:
| Format | Extension | Description | Support |
|---|---|---|---|
WOFF2 | .woff2 | Web Open Font Format 2.0. Best compression and performance. | Modern browsers |
WOFF | .woff | Original Web Open Font Format. Good fallback option. | Wide support |
TTF/OTF | .ttf/.otf | TrueType/OpenType fonts. Original font formats. | Legacy support |
Using @font-face
- Always include WOFF2 format first for best performance
- Provide WOFF as fallback for broader compatibility
- Consider using variable fonts for multiple weights/styles
- Implement font loading strategies to prevent FOUT/FOIT
- Use local() to leverage system-installed fonts when available
Font Size
Control the size of your text using different CSS units.
Size Units
Size Examples
- Use rem for consistent sizing across the site
- Em units are relative to parent element's font size
- Pixels provide precise control but less flexibility
- Consider responsive design when choosing units
Font Weight
Adjust the thickness of your text with font-weight property.
Weight Values
Weight Examples
Text Color
Control the color of your text using CSS. We'll cover the basics here, but for a deeper dive into colors, check out the Colors tutorial.
Color Examples
Text Alignment
Control how text is aligned within an element using the text-align property.
Alignment Examples
Code Example
- Use left alignment for most body text (default in left-to-right languages)
- Center alignment works well for headings and short pieces of text
- Right alignment is useful for numbers in tables or specific design elements
- Use justify with caution as it can create uneven spacing between words
- Consider text direction in different languages when setting alignment
Vertical Alignment
Text Vertical Alignment Examples
Text Vertical Alignment Examples
Code Example
Vertical Align Properties
- baseline: Default, aligns with text baseline
- sub: Subscript alignment
- super: Superscript alignment
- text-top: Aligns with top of parent's font
- text-bottom: Aligns with bottom of parent's font
- middle: Aligns with middle of parent
- Length values: Raise or lower by specific amount
- Use vertical-align only with inline or table-cell elements
- Consider using flexbox or grid for complex vertical alignments
- Be consistent with baseline alignment in typography
- Test alignment across different font sizes and families
- Use percentage values for responsive designs
Text Spacing
Control the spacing between lines, letters, and words to improve readability and visual appeal.
Spacing Examples
Default Spacing
Expanded Spacing
Condensed Spacing
Code Example
Property Details
- line-height: Controls the height of each line of text
- Can be unitless (recommended)
- Common values: 1.5-1.7 for body text
- letter-spacing: Adjusts space between characters
- Use em units for relative spacing
- Negative values bring letters closer
- word-spacing: Controls space between words
- Default is normal (0)
- Use em units for relative spacing
- Use unitless values for line-height to maintain proportional spacing
- Keep letter-spacing subtle for body text (±0.05em or less)
- Test readability across different screen sizes
- Consider using tighter spacing for headings
- Use expanded spacing sparingly for emphasis or style
Additional Text Properties
Text Decoration
text-decoration: underline;Underlined texttext-decoration: line-through;Strikethrough texttext-decoration: overline;Overlined texttext-decoration: underline wavy red;Styled underlineText Transform
text-transform: uppercase;uppercase texttext-transform: lowercase;LOWERCASE TEXTtext-transform: capitalize;capitalized textText Spacing
letter-spacing: 0.2em;Spaced out lettersword-spacing: 1em;Words with extra spacewhite-space: nowrap;This text won't wrap to new lineText Shadow
text-shadow: 2px 2px 4px #000;Basic shadowtext-shadow: 0 0 5px #ff0000;Glowing texttext-shadow: 1px 1px #ff0000, -1px -1px #00ff00;Multiple shadowsBest Practices
- Use text-decoration sparingly to maintain readability
- Consider accessibility when using text-transform (screen readers may read uppercase text as acronyms)
- Ensure text shadows maintain sufficient contrast
- Be cautious with letter-spacing as it can affect readability at extreme values
⏸️ Pause & Check: Do You Understand?
Before moving forward, can you answer these?
- What is the difference between font-size, line-height, and letter-spacing?
- When should you use em versus rem units for font sizing?
- What is the purpose of font fallback stacks in font-family?
- How do text-align and text-decoration affect readability and user experience?
Check Your Answers
- font-size controls the height of text characters, line-height controls the vertical space between lines of text (affecting readability), and letter-spacing adjusts horizontal space between characters. Together, they create typography rhythm and readability.
- rem units are relative to the root (html) font size and are predictable across the page. em units are relative to the parent element and compound, making them useful for component-level scaling but potentially confusing. rem is generally preferred for consistency.
- Font fallback stacks provide alternative fonts if the primary font fails to load or is unavailable. Example: font-family: "Helvetica Neue", Arial, sans-serif; ensures text displays even if Helvetica Neue is missing. Always end with a generic font family for reliability.
- text-align controls horizontal alignment (left, center, right, justify). Left alignment is most readable for body text in left-to-right languages. text-decoration adds underlines, overlines, or strikethroughs—use carefully as underlines imply links. Both affect readability and user expectations.
How confident are you with this concept?
😕 Still confused | 🤔 Getting there | 😊 Got it! | 🎉 Could explain it to a friend!
Practical Exercises
Exercise 1: Black Swan Bistro Typography
Requirements
- Implement the brand fonts (Playfair Display and Source Sans Pro)
- Set up proper font sizes and weights as specified in the style guide
- Ensure proper line heights for readability
- Apply appropriate text colors from the brand palette
Steps
- Add the Google Fonts link to your HTML:
- Set up your base typography CSS:
- Style specific elements:
Success Criteria
- Brand name uses Playfair Display (700 weight)
- Headings use correct font sizes (2.5rem, 2rem, 1.5rem)
- Body text uses Source Sans Pro with proper line height
- Menu descriptions are properly styled and readable
Exercise 2: Personal Profile Page Typography
Requirements
- Create a clear typographic hierarchy for the profile sections
- Style headings to distinguish between sections
- Format the skills list for easy scanning
- Ensure proper spacing and readability for Alex Chen's bio
Steps
- Set up a system font stack:
- Create your typography scale:
- Style content sections:
Success Criteria
- Clear distinction between content sections
- Readable paragraphs with appropriate line height
- Consistent spacing between elements
- Proper emphasis for important information
Lesson checkpoint
Test Your Knowledge
Strengthen your understanding of Text by answering the quiz below.
Text Quiz
Test your understanding of Text concepts.
Lesson Complete: What You Learned
Key Takeaways:
- font-family, font-size, font-weight, and font-style control typeface appearance and emphasis
- line-height affects readability—1.5 to 1.6 is optimal for body text
- letter-spacing and word-spacing adjust character and word spacing for visual effect
- text-align, text-indent, and text-decoration control text layout and decoration
- rem units provide consistent, predictable sizing relative to the root element
- Web fonts via @font-face or Google Fonts expand typography options beyond system fonts
- Good typography improves readability, hierarchy, and overall user experience
Learning Objectives Review:
Look back at what you set out to learn. Can you now:
- ✅ Master font properties: family, size, weight, style Check!
- ✅ Control text spacing with line-height, letter-spacing, word-spacing Got it!
- ✅ Apply text alignment and decoration effectively Can explain it!
- ✅ Use relative units (em, rem) for responsive typography Could teach this!
- ✅ Load and use web fonts from Google Fonts or custom sources Check!
- ✅ Create readable, accessible typography hierarchies Got it!
If you can confidently answer "yes" to most of these, you're ready to move on!
Think & Reflect:
Typography Hierarchy
- How do font size, weight, and spacing create visual hierarchy?
- What makes text readable and comfortable to read for long periods?
Responsive Typography
- Why are relative units important for responsive design?
- How can typography adapt to different screen sizes?
🤔 Real-World Test:
Typography is fundamental to professional web design. Sites like Medium, The New York Times, and Stripe are renowned for their typography—careful font choices, spacing, and hierarchy that make content pleasant to read. Good typography isn't noticed; bad typography drives users away.
Modern web typography leverages variable fonts, fluid typography (responsive font sizing), and careful performance optimization to deliver beautiful, fast-loading text across all devices. Understanding CSS text properties is the foundation for these advanced techniques.
🎯 Looking Ahead:
With typography mastered, you're ready to tackle CSS layout—one of the most powerful aspects of CSS. In the next lesson, you'll learn positioning, display modes, floats, and layout strategies that control where elements appear on the page.
Layout is what transforms static HTML into dynamic, visually interesting web pages. Understanding layout fundamentals prepares you for Flexbox, Grid, and modern CSS layout techniques.
Recommended Next Steps
Practice Projects
Apply what you've learned with these hands-on projects:
Additional Resources
Deepen your understanding with these helpful resources:
- MDN: Fundamental text and font styling - Guide to CSS typography
Progress tracking is disabled. Enable it in to track your completed tutorials.
Cookie Settings