Set readable type and color
Choose font properties, align text and use color with enough contrast.
- Set text color and font size
- Choose a font family and weight
- Use alignment intentionally
CSS has properties for text size, color, alignment, weight and line spacing. Use a readable font size and line height, and keep foreground text distinct from its background. Color should support the message, not carry meaning by itself.
1.notice {
2 color: #17324d;
3 font-family: Arial, sans-serif;
4 font-size: 1.125rem;
5 line-height: 1.6;
6}A clear, comfortable notice
CSS accepts named colors, hexadecimal values such as #17324d, and many other formats. font-family lists preferred fonts with fallbacks. rem sizes scale with the root text size, while line-height controls space between lines.
Key takeaways
Use font-size and line-height to support comfortable reading.
Choose text and background colors with strong contrast.
Provide fallback fonts in font-family.
Lesson quiz
5 questions · pass with 4 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write CSS
Style the sample page, see your changes in the sandboxed preview, and run checks against the computed styles.
Make a readable note
Style .note with dark text #17324d, a 20px font size, and centered text.
- Notice styles
Your CSS is applied to a sample page in a sandboxed preview. Tests check computed styles.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…