Typography defaults

Last reviewed May 28, 2026 Content v20260528

Track mode

iframe_html

Means

HTML preview sandbox

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Typography defaults—the ideas, syntax, and habits you need before moving on in Pico CSS.

Class-light frameworks teach when semantic HTML alone should carry the design.

You will apply Typography defaults in contexts like: Documentation sites, blogs, internal tools, and side projects where you want polish without a large class vocabulary.

Read the lesson, edit HTML/CSS in the playground, press Run to preview, then answer the lesson MCQs.

When the previous lesson's MCQs feel easy and you can explain Typography defaults in your own words.

Pico sets a responsive type scale on the root and maps h1–h6, paragraphs, and inline elements to rem sizes that grow with viewport width. You get readable line length and contrast without importing a typography plugin.

What is styled automatically

Body copy — p, small, mark, del, ins
Inline emphasis — strong, em, kbd, abbr
Code — code, pre, samp with monospace stacks
Links — a with hover/focus treatments matching the active theme

Foundations from CSS still matter: Pico does not teach you when to bold vs italic—that is content semantics. Compare Tailwind, where text-lg font-semibold replaces many of these element defaults.

Self-check

Why does Pico use rem for heading sizes?
Name two inline elements Pico styles without extra classes.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Readable without classes?
Line length comfortable?

No discussion yet. Be the first to ask a question.