CSS Color & Text: The Art of Typography
"Web design is 95% typography." By mastering text alignment, font selection, and color contrast, you ensure your content is not only beautiful but readable and accessible to everyone.
The Spectrum: Working with Colors
The color property defines the text color of an element. While you can use simple keywords like red or blue, professional web design relies on exact values:
- HEX (#RRGGBB): The most common format. e.g.,
#FF0000is pure red. - RGB(A): Red, Green, Blue, and an optional Alpha (opacity) channel. e.g.,
rgba(0, 0, 0, 0.5)is 50% transparent black. - HSL(A): Hue, Saturation, Lightness. Excellent for creating intuitive color themes, like shading or tinting a base hue.
Typography: Font Families and Fallbacks
The font-family property specifies the typeface. Because not all computers have the same fonts installed, we must provide a list of "fallback" fonts.
font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;In the example above, the browser tries to load "Open Sans" first. If it fails, it tries "Helvetica Neue", and so on, finally defaulting to the system's generic sans-serif font.
Form & Spacing: Sizing, Weight, and Alignment
- font-size: Determines the scale. It's heavily recommended to use
rem(relative to the root HTML size) rather thanpxfor accessibility. - font-weight: Controls thickness. Values range from 100 (thin) to 900 (black), or keywords like
normal(400) andbold(700). - line-height: The vertical space between lines of text. A value of
1.5or1.6is standard for readable paragraphs. - text-align: Positions text horizontally (
left,center,right, orjustify).
View Accessibility Tips+
Never use pure black text on a pure white background.The extreme contrast can cause eye strain. Instead, use a very dark grey like #333333 or #1a1a1a for your main text. Additionally, ensure your text-to-background contrast ratio meets WCAG standards (at least 4.5:1 for normal text).
❓ Frequently Asked Questions
Why use REM instead of PX for font-size?
Accessibility: Pixels (`px`) are absolute units. If a user with visual impairments changes their default font size in their browser (for example, to 24px instead of 16px), text defined in `px` will not adjust, breaking accessibility.
By using `rem` (Root EM), the size is relative to the root font. If you define `font-size: 2rem`, it will be exactly double the size that the user has configured in their browser, respecting their preferences.
How do I add custom fonts (like Google Fonts)?
You can import fonts from services like Google Fonts in two main ways:
- Adding a
<link>tag in the<head>of your HTML. - Using the
@importrule at the beginning of your CSS file.
/* In your CSS file */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); body {font-family: 'Roboto', sans-serif;}What is the difference between text-align and justify-content?
text-align: Controls the alignment of text inside a block element (e.g., centering words inside a paragraph).
justify-content: Is a property of Flexbox or CSS Grid, and it is used to align the child elements themselves (boxes, divs) within their parent container, not necessarily the text inside them.