CSS Part 4: Colour, units and fonts

Whether people read your page or give up on it often comes down to how the text looks.

Colours

CSS accepts colours in several forms:

color: tomato;                 /* a named colour */color: #1a73e8;                /* hex: red, green, blue */color: rgb(26 115 232);        /* the same blue */color: rgb(26 115 232 / 50%);  /* half see-through */color: hsl(220 80% 50%);       /* hue, saturation, lightness */

Hex is what you'll see most, because design tools hand you hex codes. HSL is handy when you want a lighter or darker shade of a colour: keep the first number and change the last one.

color sets the text colour and background-color the background. Keep strong contrast between the two. Light grey text on white looks elegant on your laptop and is unreadable on a phone in sunlight. In Chrome's DevTools, click the small colour square next to a color value: the picker that opens shows the contrast ratio. Aim for at least 4.5.

Units

• px is a fixed size. Good for borders and small details.
• rem is relative to the root font size, which is usually 16px, so 1.5rem is 24px. Use it for font sizes and most spacing. When someone sets a bigger text size in their browser, everything in rem grows with it, and your layout stays in proportion.
• % is relative to the parent element. width: 50% is half the parent's width.
• vw and vh are percentages of the browser window: 50vw is half its width. On phones, 100vh can be taller than what's visible while the address bar shows, so for a full-screen section use 100dvh.

A safe starting point: rem for text and spacing, px for borders, % for widths.

Fonts

body {  font-family: "Inter", system-ui, sans-serif;  font-size: 1rem;  line-height: 1.6;}
h1 {  font-size: 2.5rem;  font-weight: 700;  line-height: 1.2;}

font-family takes a list. The browser uses the first font it has and falls back along the list, so always end with a general family like sans-serif or serif. system-ui uses the device's own font, which looks native and costs nothing to load.

line-height is the space between lines. Between 1.5 and 1.7 makes paragraphs comfortable to read, while big headings look better tighter, around 1.2. Write it without a unit, so it scales with the font size.

To use a font like Inter, pick it on fonts.google.com and paste the <link> it gives you into your <head>.

Keep it consistent with variables

Repeating #1a73e8 in twenty places means twenty edits when the brand colour changes. CSS variables solve that:

:root {  --brand: #1a73e8;  --text: #222;  --space: 1rem;}
.button {  background-color: var(--brand);  padding: var(--space);}

Variable names start with two dashes. Defined on :root, they're available to the whole page, and you read them with var(). Change one line and every use updates. They'll make dark mode much easier later, too.

Try it

Pick a brand colour for your portfolio page. Put it and your text colour in variables, set a font and a line-height on the body, and size your headings in rem.

Next: CSS Part 5: Line things up with flexbox