Stop 02 · Design Principles & Visual DesignTopics · 3/11

Typography Fundamentals

In short

Most of any app is text: labels, prices, messages, buttons. Get the type right and a plain screen looks professional. Get it wrong and even great colours can't save it.

Choosing and pairing typefaces, and setting size, weight, line-height and letter-spacing deliberately — typography carries most of a product's information, making it one of the highest-leverage design skills.

The jaadu, as a teacher, speaks into a small microphone in front of a class with blank papers.

Think of it like this

A good teacher's voice

A good teacher speaks loudly for the chapter title, normally for the explanation, and softly for a side note. If they shouted everything, you'd tune out. Type sizes and weights are your screen's voice.

Watch it happen

A type scale built around 16px body text

1/416px is the body text size. It's a common default for comfortable reading on web and phones.

The big ideas

What you need to know

One or two typefaces

One good sans-serif like Inter can carry a whole app. If you pair two, make them clearly different in role.

Weight shows importance

Regular for body, semibold for headings and buttons. Too many weights on one screen feel noisy.

Line height matters

Body text reads best at roughly 1.4 to 1.6 times the font size. Headings can be tighter.

Keep lines short

Around 45 to 75 characters per line is comfortable to read. Very wide paragraphs tire the eyes.

See it in code

Walk through the code

css

1:root {2  --font-body: "Inter", system-ui, sans-serif;3  --text-sm: 0.875rem;  /* 14px */4  --text-base: 1rem;    /* 16px */5  --text-lg: 1.25rem;   /* 20px */6  --text-xl: 1.563rem;  /* 25px */7}8 9body {10  font-family: var(--font-body);11  font-size: var(--text-base);12  line-height: 1.5;13}14 15h2 { font-size: var(--text-xl); line-height: 1.2; font-weight: 600; }

1/4One font family with sensible fallbacks if it fails to load.

A designer's type scale, written the way developers will build it. Naming sizes once means every screen uses the same steps.

Save yourself the pain

Common mistakes

Oops

Using four different fonts to show creativity.

Do this instead

Stick to one or two. Create variety with size and weight instead.

Oops

Setting light grey 12px text for anything important.

Do this instead

Important text needs a readable size and strong contrast. Light, tiny text is hard to read for many people.

Your mission

Set up a type scale in Figma

~30 min

Quick check

Your paragraph text feels cramped and hard to read. Which change helps most?

Go deeper

1Build a simple type scale (e.g. 4-5 sizes) for headings and body text.
2Practice pairing 2 typefaces that contrast well (e.g. a serif heading with a sans-serif body).
3Learn why line-height (leading) matters as much as font size for readability.