Typography and Colour for UI: beginner rules that work

What does typography actually mean in UI design?

Typography is not "choosing a pretty font". It is five decisions about text on a screen:

1. Typeface, which font family (for example, a plain sans-serif).
2. Size. How big each level of text is.
3. Weight, regular, semibold or bold.
4. Line height, the space between lines of the same paragraph.
5. Spacing, the space between paragraphs and between text and other elements.

Beginners usually obsess over decision 1 and ignore decisions 2–5. In practice, size, weight and line height do far more for readability than the font name. A plain, well-sized sans-serif beats a beautiful font set at the wrong size every time.

How do I pick a font without getting lost?

Start boring. For screens, a clean sans-serif (letters without the small feet, like the text you are reading now) is the safe default for both headings and body. Serif fonts (with feet) suit long-form reading and editorial pages, but they are harder to get right at small sizes on screens, so leave them for later.

Three rules keep the choice simple:

• Readability first. If you have to squint at 16px, the font is wrong, however fashionable it looks. Test with a real paragraph, not a single stylish word.
• Use a font with at least three weights: regular (400), semibold (600) and bold (700). Without those weights you cannot build a hierarchy from one family, and you will be forced to add a second font to do weight's job.
• Free is fine. The system fonts on any computer and the free families in Figma and Google Fonts cover everything a beginner needs. Do not buy a font to solve a sizing problem.

If you use one family for everything, vary weight and size to create the levels. That single decision already removes the most common beginner failure: a screen set in four unrelated fonts.

What sizes should I use?

Use a scale, not a feeling. A scale is a short list of sizes you reuse everywhere, so every heading on every screen matches. This one works for most screens and builds directly on the hierarchy tutorial:

Two supporting rules:

• Body text stays at 16px. Smaller body text is the single most common readability failure in beginner work. 14px is for detail only. Never for paragraphs people must actually read.
• Line height: 1.5 for body text, 1.2 for headings. That means a 16px paragraph gets about 24px of line height, so lines do not crowd each other, while a 32px heading gets about 38px, so it stays tight and headline-like. In Figma this is the "line height" field in the text panel; in CSS it is line-height: 1.5.

How do I pair two fonts?

If one family feels flat and you want a second, pair for contrast, not similarity. Two fonts that look almost the same (two plain sans-serifs) just look like a mistake. A pairing works when the two fonts are clearly different in one obvious way and alike in the rest:

• Different job, different feel. A strong, heavier sans-serif for headings with a lighter, rounder sans-serif for body is a safe pair. The difference is visible at a glance.
• Same x-height feel. The "x-height" is the height of a lowercase x. Fonts whose lowercase letters are roughly the same height sit comfortably together; a font with very tall lowercase letters next to one with very short ones looks mismatched even if you cannot name why.
• Test the pair on real text. Set a heading and two paragraphs in the pair, then zoom out. If you cannot tell at a glance which lines are headings, the pairing has failed, increase the size or weight gap before blaming the fonts.

The honest shortcut: one family, three weights, four sizes. It is what this tutorial's worked example uses, and it is enough for almost every beginner screen.

What is a colour palette for a screen?

A palette is a budget, and a beginner's budget has four slots:

That is the whole palette. A fifth colour needs a reason, an error state, a success state, or a brand mark, and it must not compete with the primary action colour.

The 60–30–10 rule keeps the proportions honest: roughly 60% of the screen is the light neutral, 30% is white space and quiet surfaces, and 10% at most is the strong colour. When a screen feels loud, the strong colour has almost always escaped its 10%.

How do I choose colours that work together?

Pick the primary colour first, then build the neutrals around it. The steps:

1. Choose one primary. Pick a colour you can imagine on exactly one button per screen. Teal, deep blue and warm amber all work; what matters is that it is clearly different from your text and background colours.
2. Derive the neutrals from it, or keep them truly neutral. Grey text and a white-ish background go with any primary. Coloured backgrounds (a pale tint of the primary for a banner, for instance) are the one exception, and they must stay pale enough that dark text on them is still easy to read.
3. Check contrast before you commit. Body text must be dark against a light background. Medium grey text on light grey may look refined in a screenshot and be unreadable in sunlight. If you are unsure, darken the text, nobody ever complained that body text was too easy to read.
4. Never rely on colour alone. An error shown only in red fails for people who cannot tell red from green. Add words ("Error:") or an icon, the same rule the hierarchy tutorial gives for colour as a tool.

A note on meaning: colours carry associations (red for danger and errors, green for success, amber for warnings), so do not use red for your main action button or green for a destructive "Delete" button. The association will fight the label.

Worked example: fix a course card's type and colour in Figma

Open a free Figma file and follow along. This continues the course card from the visual hierarchy tutorial, so the reading order is already decided: title first, action second, detail last.

Step 1: Make the frame. Create a frame 360px wide and 220px tall, filled with a light neutral background.

Step 2: Add the "before" version. Add three text layers, all in the same font at 18px regular, all in medium grey: "UI Design Fundamentals", "Beginner · 7 hours", "Enrol now". Add a bright red rectangle behind "Enrol now" and a bright blue border around the card.

Expected result: the card looks busy and the text is hard to read, three fonts' worth of confusion from one font, because size, weight, colour and contrast are all doing nothing.

Step 3: Set the type scale. Select the title and set it to 20px, semibold (600). Select "Enrol now" and set it to 16px, semibold (600). Select the detail line and set it to 14px, regular (400), in quiet grey. Set the body line height to 1.5 where text wraps.

Step 4: Set the colour budget. Fill the button rectangle with your single primary colour and set its text to white. Remove the blue border; give the card a thin quiet-grey border instead, or none at all. The card now has exactly one strong colour.

Step 5: Check contrast. Select the detail line and check it against the card background: it should be clearly readable, not a whisper. If it is hard to read, darken the grey rather than enlarging the text. Size is not the fix for a contrast problem.

Step 6: Squint test. Zoom out and squint, as in the hierarchy tutorial. You should still read the order: big semibold title, coloured button, small grey detail. If the button disappears, the primary colour is too pale; if the detail shouts, its grey is too dark.

Expected result: a card with one font family, three sizes, three weights and one strong colour, and it looks finished, because every decision follows a rule.

The same scale in code

If you build the card on the web, the scale above is four lines of CSS. Paste this into a stylesheet and every heading, paragraph and caption on the page follows the same rules:

:root {
  --text: #1f2937;        /* neutral dark: body text and headings */
  --background: #fafaf9;   /* neutral light: page background */
  --muted: #6b7280;        /* quiet grey: detail text and borders */
  --primary: #0f766e;      /* one action colour: buttons and links */
}

body {
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--background);
}

h1 { font-size: 32px; line-height: 1.2; font-weight: 700; }
h2 { font-size: 20px; line-height: 1.2; font-weight: 600; }
small, .detail { font-size: 14px; color: var(--muted); }

button, .button {
  background: var(--primary);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

Expected result: a page heading at 32px bold, section headings at 20px semibold, body text at 16px with 1.5 line height, detail text at 14px in quiet grey, and buttons in the single primary colour with white text. Change the four values in :root and the whole page's type and colour change together. That is what a scale and a palette are for.

Common mistakes

• Body text smaller than 16px. 14px or 12px paragraphs look tidy in a design file and tire real readers. Reserve 14px for captions and metadata only.
• Three or more font families. Each new font adds noise and none adds meaning. One family with three weights beats three families every time.
• Sizes 1–2 pixels apart. A 20px heading over 18px body text is not a hierarchy. Make the steps obvious: 32, 20, 16, 14.
• A rainbow palette. Five bright colours on one screen means five things shouting for attention. Budget one strong colour for actions and keep the rest neutral.
• Light grey text on a white background. Low contrast is the quietest readability failure because it looks elegant. If in doubt, darken the text.

Frequently asked questions