Type and colour

Open Le Monde, then Doctolib. Le Monde's headlines have small strokes at the ends of the letters, like a printed newspaper. Doctolib's letters have plain ends. These are the two large groups of typefaces. A serif typeface has small strokes, called serifs, at the ends of its letters. It looks classic, literary or serious. A sans-serif typeface has none. It looks plain and modern, and it stays clear on small screens. Two more groups are useful to know. A monospace typeface gives every letter the same width, like a typewriter or a code editor. A display typeface is made for large titles only, such as a festival poster. In a paragraph, it becomes hard to read.

The diagram names the parts of a letter. The letters sit on a line called the baseline. The x-height is the height of the small letters, such as a and e. An ascender is the part of a letter above the x-height, as in f or d. A descender is the part below the baseline, as in p and y.

A typeface is the whole family of letters, such as Helvetica or Garamond. A font is one member of the family: one weight and one style, such as Garamond Bold Italic. Many people use the two words for the same thing, and designers understand both.

System fonts are the typefaces already installed on the visitor's phone or computer. They load instantly, but they look a little different on an iPhone and on Android. Web fonts are downloaded with the page, often from Google Fonts, a free library of more than a thousand typefaces. Every visitor then sees the same letters. Each extra web font makes the page slower to load.

Most good sites use one or two typefaces. Pairing means choosing two that work well together, often a serif for the titles and a sans-serif for the text. AI design tools tend to put the same plain sans-serif everywhere. It's never wrong, and it makes every portfolio look the same. A typeface also gives a tone: a law firm and a children's festival need different ones.

The example below shows the same project description twice. On the left, it's in a serif typeface. On the right, it's in a sans-serif. Look at the ends of the letters, and at the feeling each version gives. Then, in the code on the left, replace Georgia, serif with monospace to see a third family.

Look at an article on Le Monde. The headline is large and bold. The introduction is a little smaller. The body text, the main text of the article, is smaller again, in a regular weight. The captions under the photos are the smallest. You know at once what to read first. This is typographic hierarchy: the order of importance that the type shows.

Designers create it with a type scale, a short list of text sizes where each size has a job. On your portfolio, the jobs could be your name, the section titles, the project titles, the body text, and small text such as captions. Sizes are given in pixels, or in rem, a unit that follows the reader's own text size setting. On a screen, body text is rarely smaller than 16 pixels.

Weight is the thickness of the letters. The usual names, from thin to thick, are light, regular, medium, semibold and bold. Italic is the sloping style, used to stress a word or for the title of a book. Two or three weights are enough. When everything is bold, nothing stands out.

Two typefaces at the same size can look very different in size. The reason is the x-height, the height of the small letters such as x, a and e. A typeface with a large x-height stays readable at small sizes, which matters for captions and on phones.

A pull quote is a short sentence taken from the text and shown in large type, to catch the eye. On a project page, it could be one sentence from your client or your tutor.

The example below shows the same top of a portfolio twice. On the left, every line has the same size and the same weight. On the right, the lines follow a type scale. Compare what you read first in each version. Then, in the code on the right, change the size of the name from 32px to 44px.

Paragraphs need space in two directions. Line height, also called leading, is the distance from one line to the next. Designers often give it as a number: 1.5 means one and a half times the size of the letters. Body text usually needs between 1.4 and 1.6. When the lines are too tight, they seem to touch, and the eye slips to the wrong line. Large titles can have tighter lines.

Line length, also called the measure, is the number of characters in one line. About 60 to 75 characters is comfortable. On a wide screen, text that runs across the whole page makes lines of 150 characters or more. At the end of each line, the eye must travel back across the screen to find the start of the next one. It gets lost, and the reader gets tired. The fix is a maximum width for the text, even when the page is wider.

Letter spacing, also called tracking, is the space between all the letters of a word or a line. Kerning is the space between two particular letters, such as A and V, adjusted so that a word looks even. Bad kerning is most visible in large titles and logos.

Alignment says where the lines start and end. Left-aligned text starts every line at the same edge and leaves the right edge uneven, which is called ragged right. It's the easiest to read on a screen. Centred text suits a short title or a button. In a long paragraph, each line starts in a different place, and the eye has to search for it. Justified text fills each line from edge to edge, like a newspaper column. On the web, the browser stretches the spaces to do this, and white gaps can line up from one line to the next. These gaps are called rivers. A widow is the last line of a paragraph left alone at the top of a new column, and an orphan is the first line left alone at the bottom of one. On the web, people also say "widow" for one word alone on the last line of a title.

The example below shows two paragraphs. The first one runs across the whole width of the result, with tight lines. On a laptop, its lines hold well over 100 characters. The second one stops at about 65 characters per line, with more space between the lines. Read a few lines of each. Then, in the code, give the first paragraph max-width: 65ch (65 characters wide), or change its line height to 1.6.

Look at SNCF Connect. Almost everything is white, grey or dark blue. A few elements have a bright colour, and these are the ones you can act on. Error messages are red, and confirmations are green. That's a palette with roles. The palette is the short list of colours a site uses. A role is the job each colour does.

The brand colours come from the organisation's identity: its logo, its shop signs and its printed documents. The primary colour is the main one. It goes on the main buttons, the links and sometimes the header. A secondary colour is a second brand colour, used less often, for example in illustrations. The accent colour is a bright colour used in a few places only, to draw the eye, such as a "New" label.

Neutrals are the greys, from almost white to almost black. They do most of the work. The background is the colour behind the whole page. Surfaces are the colours of the boxes laid on it, such as cards and panels. The text colour is usually a very dark grey, which is softer for the eyes than pure black.

Semantic colours carry a meaning that visitors already know: green for success, orange for a warning, red for an error or a dangerous action, and blue for information. Keep them for these meanings. A red "Buy" button can look like a warning.

For your portfolio, a white background, light grey cards, dark grey text, one primary colour for links and buttons, and red for the form's errors are often enough.

The example below shows a small palette, with the role of each colour, and a project card that uses it. At the top of the code, each colour is named once, by its role. Try changing the value of --primary to #047857, a green: the button and the swatch change together.

Three words describe any colour. Hue is the colour itself: red, orange, blue or purple. Saturation is how strong it is, from grey to vivid. Lightness is how light or dark it is, from black to white. With these words, "make it more modern" becomes "the blue is too saturated, so it tires the eyes. Can we try a softer, greyer blue?"

A tint is a colour mixed with white, such as a pale blue for a background. A shade is a colour mixed with black, such as a dark blue for a button under the mouse. Warm colours, such as red, orange and yellow, feel close and full of energy. Cool colours, such as blue, green and purple, feel calm and distant. A monochrome design uses one hue in several tints and shades. A gradient is a smooth change from one colour to another. AI design tools often add purple and blue gradients, which is one reason their pages look alike. Opacity is how solid a colour is. At 50%, you see half of what's behind it.

Contrast is the difference in lightness between text and its background, measured as a ratio. A ratio of 1 to 1 means no difference, and black on white is 21 to 1. The accessibility rules, the international WCAG and the French RGAA, ask for at least 4.5 to 1 for body text. Large text and icons need at least 3 to 1. Light grey text on white, common in AI mockups, often fails. In the browser's developer tools, click a colour in the Styles panel to see its ratio.

Colour must never be the only signal. About one man in twelve has a form of colour blindness, often between red and green. For him, a field that only turns red when it's wrong shows nothing. Add a written message, or an icon.

The example below shows a short text and a form field with an error, twice. On the left, the text is light grey on white, with a ratio of 2.6 to 1, and only a red border shows the error. On the right, the text is dark grey, at 7.7 to 1, and a sentence explains the error. In the code on the left, try #71717a, a grey that just passes.

"I don't like it" and "make it pop" give a designer nothing to work on. An AI design tool such as Stitch answers them with a random change: more colour, a gradient, a bigger title. "Make the text darker" is more precise. However, it chooses the fix before naming the problem, and there may be a better fix.

Useful feedback has three parts: what you see, its effect on visitors, and what you want. Use the words of this lesson for the first part:

• "The line height is too tight: the lines of the descriptions touch. Can we go to about 1.5?"
• "The descriptions run across the whole screen, in lines of about 150 characters, so they're tiring to read. Could the text stop at about 70 characters per line?"
• "The body text is light grey on white, with a contrast of 2.6 to 1. Older visitors will struggle to read it. It needs at least 4.5 to 1."
• "The page uses three typefaces and five weights, so it looks busy. Can we keep one typeface for the titles and one for the text?"

Then sort your remarks before you send them. Blocking problems come first: text that people can't read, a button that nobody sees, an error shown only in red. Next comes what's off-brand, meaning it doesn't fit the image the site should give, such as a playful display typeface on a serious engineering profile. Matters of taste come last, such as "I'd prefer blue". Ten small remarks about shades of blue can hide the one blocking problem. If needed, send the blocking problems on their own.

AI design tools start from the same defaults: one plain sans-serif everywhere, purple and blue gradients, light grey text. "It looks like every AI site" becomes useful when you name the defaults you see. Then give your references: a mood board, or the organisation's style guide, the document that fixes its logo, typefaces and colours. Ask for the final colours and type sizes as design tokens, so that the coding agent reuses the same values. If the site gets a dark mode later, each colour role then only needs a second value. With Stitch, ask for one change at a time, and compare the result with what you asked for.