CSS Font Family, Size, and Weight

Fonts establish hierarchy, legibility and tone. CSS can apply a shared font family to a card while emphasizing just its heading.

font-family lists preferred fonts followed by fallbacks; the browser uses the first available face that can render the text. font-size controls the size of glyphs; font-weight selects a supported weight such as 400 or 700. A font may synthesize a missing weight.

Font settings generally inherit, so a container can establish a baseline. A relative rem size uses the root font size; do not use small fixed fonts merely to fit text.

The font family often passes from parent to child through inheritance; a more specific child rule can create a heading hierarchy.

Start with one family, an explicit fallback, and a baseline font size.

HTML

<section class="type-card"><h3>Weekend reads</h3><p>A short article collection with clear typography.</p></section>

CSS

.type-card { font-family: Arial, Helvetica, sans-serif; font-size: 16px; padding: 16px; background: #eff6ff; border-radius: 10px; }
.type-card h3 { margin: 0 0 8px; }
.type-card p { margin: 0; }

Rendered output

Observe: The card uses a consistent sans-serif face; its heading remains distinct because of the browser default heading weight.

Override heading size and weight while retaining the shared family.

HTML

<section class="type-card"><h3>Weekend reads</h3><p>A short article collection with clear typography.</p></section>

CSS

.type-card { font-family: Arial, Helvetica, sans-serif; font-size: 1rem; padding: 16px; background: #eff6ff; border-radius: 10px; }
.type-card h3 { font-size: 1.5rem; font-weight: 700; color: #1e40af; margin: 0 0 8px; }
.type-card p { color: #475569; font-weight: 400; margin: 0; }

Rendered output

Observe: The heading becomes larger and bolder while the paragraph stays at normal weight.

The font family often passes from parent to child through inheritance; a more specific child rule can create a heading hierarchy.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• A font name without a fallback may render differently on devices that do not have it.
• Font-weight:700 can look different when a font lacks a true bold face.

Switch the base stack to Georgia, serif and compare the paragraph texture. Increase the heading to 1.75rem.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use an intentional font stack and a small, readable size and weight system.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.