Text and font CSS controls how readable, scannable, and polished a page feels. Font family, size, line-height, weight, spacing, alignment, and decoration all affect how easily learners can read content.
Good typography starts with restraint. Choose clear font stacks, keep line lengths comfortable, use unitless line-height for body text, and avoid decorative effects that make reading harder.
Add one worked example that compares the normal path with the boundary case for CSS Fonts font family, font size, Google Fonts.
CSS Fonts font family font size Google Fonts should be studied as a practical CSS lesson, not as a label. Start by naming the input, the rule that changes the input, and the result a learner should be able to predict after reading the page.
In the css > text-and-fonts page, the notes should connect the definition with a working scenario, a mistake that beginners actually make, and the exact check that proves the fix. That makes the topic useful for coding, debugging, and interview revision.
Text properties affect the characters after the font has been chosen. They control alignment, decoration, casing, spacing, line height, truncation, and shadows.
| Property | Values | Description |
|---|---|---|
| color | any color | Text color |
| text-align | left | right | center | justify | Horizontal alignment |
| text-decoration | none | underline | overline | line-through | Text decoration line |
| text-transform | uppercase | lowercase | capitalize | none | Case transformation |
| text-indent | 20px | 2em | First line indent |
| letter-spacing | 2px | -1px | Space between characters |
| word-spacing | 5px | Space between words |
| line-height | 1.5 | 24px | 150% | Space between lines |
| white-space | normal | nowrap | pre | pre-wrap | Whitespace handling |
| text-overflow | clip | ellipsis | Overflow text handling |
| text-shadow | h v blur color | Shadow behind text |
/* Text alignment */
.center { text-align: center; }
.justify { text-align: justify; }
/* Text decoration */
a { text-decoration: none; } /* remove underline from links */
del { text-decoration: line-through; }
.underline { text-decoration: underline dotted red; }
/* Text transform */
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
/* Spacing */
.heading {
letter-spacing: 3px; /* tracking */
word-spacing: 5px;
line-height: 1.6; /* unitless - relative to font-size */
}
/* Text overflow - truncate with ellipsis */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
/* Text shadow: offset-x offset-y blur-radius color */
.shadow-text {
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.glow-text {
text-shadow: 0 0 10px #3498db, 0 0 20px #3498db;
}
/* Writing mode */
.vertical { writing-mode: vertical-rl; }
/* Text indent */
p { text-indent: 2em; }Font properties choose the typeface and shape of the text. Always provide fallback fonts so the page still looks acceptable if the first font fails to load.
| Property | Values | Description |
|---|---|---|
| font-family | 'Arial', sans-serif | Font stack (fallbacks) |
| font-size | 16px | 1rem | 1.2em | 120% | Text size |
| font-weight | normal | bold | 100-900 | Thickness |
| font-style | normal | italic | oblique | Italic/oblique |
| font-variant | normal | small-caps | Small caps |
| font | shorthand | All font properties |
/* Font family - always provide fallbacks */
body {
font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}
.code {
font-family: 'Fira Code', 'Courier New', monospace;
}
.serif {
font-family: 'Georgia', 'Times New Roman', serif;
}
/* Font size */
html { font-size: 16px; } /* base size */
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */
small { font-size: 0.875rem; } /* 14px */
/* Font weight */
.thin { font-weight: 100; }
.regular { font-weight: 400; }
.bold { font-weight: 700; }
.black { font-weight: 900; }
/* Font shorthand: style variant weight size/line-height family */
h1 {
font: italic small-caps bold 2rem/1.2 'Georgia', serif;
}
/* @font-face - custom fonts */
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap; /* prevents invisible text during load */
}<!-- Google Fonts - add in <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=Roboto:wght@300;400;700&family=Open+Sans&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
font-weight: 400;
}
h1 {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
}
</style>CSS Fonts font family font size Google Fonts matters in CSS because it changes how a program is written, tested, or debugged. The page should explain the normal flow first: what the developer writes, what the runtime or platform does, and what result should appear.
When teaching CSS Fonts font family font size Google Fonts, avoid stopping at syntax. Show the surrounding decision: why this feature is chosen, what problem it removes, and what would become harder if the feature were not used.
.lesson-box {
display: block;
max-width: 42rem;
padding: 1rem;
}.lesson-box:empty::before {
content: "CSS Fonts font family font size Google Fonts: add visible content";
}Using text-align: justify on narrow mobile paragraphs.
Use left alignment for narrow reading columns.
Setting line-height in fixed pixels for all text sizes.
Use unitless line-height like 1.6 for scalable body text.
Using text-shadow behind small body text.
Reserve shadows for large display text or very controlled backgrounds.
Memorizing CSS Fonts font family font size Google Fonts without the situation where it is useful.
Connect CSS Fonts font family font size Google Fonts to a concrete CSS task.
A unitless line-height multiplies by the element font size, so it scales naturally across headings, paragraphs, and nested text.
It is a list of preferred fonts and fallbacks, such as "Inter", Arial, sans-serif.
Use white-space: nowrap, overflow: hidden, text-overflow: ellipsis, and a constrained width.
Only when the link remains clearly recognizable through context, layout, or another visible affordance.
Explore 500+ free tutorials across 20+ languages and frameworks.