Cheat sheet: Type and colour

The 58 terms of this lesson, part by part, with the French word a team in France would use.

1. Typefaces and fonts

Typefacepolice de caractères: a family of letters drawn in one style, such as Helvetica or Garamond.
Fontfonte: one member of a typeface, in one weight and one style, such as Garamond Bold Italic.
Serifavec empattements: describes a typeface whose letters end in small strokes, such as Times or Garamond.
Sans-serifsans empattements, linéale: describes a typeface whose letters have plain ends, such as Arial or Helvetica.
Monospacechasse fixe: describes a typeface where every letter has the same width, like a typewriter.
Display typefacepolice de titrage: a typeface drawn for large titles and posters, too decorative for a paragraph.
System fontpolice système: a typeface already installed on the visitor's device, which the page can use without downloading it.
Web fontpolice web: a typeface downloaded with the page, often from Google Fonts, so every visitor sees the same letters.
Pairingassociation de polices: two typefaces chosen to work together, often one for the titles and one for the text.

Font sizecorps, taille de police: the size of the letters, given in pixels or in rem.
Weightgraisse: the thickness of the letters, named from light, regular and medium to semibold and bold.
Italicitalique: the sloping style of a typeface, used to stress a word or for the title of a work.
X-heighthauteur d'x: the height of the small letters such as x; a large x-height stays readable at small sizes.
Type scaleéchelle typographique: a short list of text sizes, each with a job, such as name, section title, body text and caption.
Typographic hierarchyhiérarchie typographique: the order of importance that sizes and weights give to the texts of a page.
Headlinetitre, gros titre: the large title at the top of a page or an article.
Body texttexte courant: the main text of a page, set in the size made for long reading.
Captionlégende: the short text that goes with a photo or a figure and says what it shows.
Pull quotecitation en exergue: a short sentence from the text, repeated in large type to catch the eye.

Line height or leadinginterlignage: the distance from one line of text to the next, often 1.4 to 1.6 times the size of the letters.
Letter spacing or trackingapproche: the space between all the letters of a word or a line.
Kerningcrénage: the space between two particular letters, such as A and V, adjusted so that the word looks even.
Line length or measurelongueur de ligne: the number of characters in one line of text, best at about 60 to 75.
Text alignmentalignement du texte: where the lines of a paragraph start and end: on the left, centred, on the right or justified.
Ragged rightfer à gauche, drapeau: text aligned on the left, with an uneven right edge.
Justified texttexte justifié: text stretched so that every line touches both edges, like a newspaper column.
Riverlézarde: a line of white gaps running down through justified text, made by stretched spaces.
Widowveuve: the last line of a paragraph left alone at the top of a column, or one word alone on a title's last line.
Orphanorpheline: the first line of a paragraph left alone at the bottom of a column or a page.

Palettepalette: the short list of colours that a site uses, each with its role.
Brand colourscouleurs de marque: the colours of an organisation's identity, taken from its logo and its documents.
Colour rolerôle de couleur: the job that a colour does on a page, such as text colour, link colour or error colour.
Primary colourcouleur principale: the main brand colour of a site, used for the main buttons and the links.
Secondary colourcouleur secondaire: a second brand colour, used less often than the primary colour.
Accent colourcouleur d'accent: a bright colour used in a few places only, to draw the eye.
Neutralsneutres, gris: the greys of a palette, from almost white to almost black, used for text, backgrounds and borders.
Backgroundfond, arrière-plan: the colour behind the whole page.
Surfacesurface: the colour of a box laid on the background, such as a card or a panel.
Semantic colourscouleurs sémantiques: colours with a fixed meaning: green for success, orange for a warning, red for an error.

Hueteinte: the colour itself, such as red, blue or purple.
Saturationsaturation: how strong a colour is, from grey to vivid.
Lightnessluminosité: how light or dark a colour is, from black to white.
Tint and shadeteinte claire, teinte foncée: a colour mixed with white, and a colour mixed with black.
Warm and cool colourscouleurs chaudes et froides: reds, oranges and yellows feel warm; blues, greens and purples feel cool.
Monochromemonochrome: describes a design that uses one hue only, in several tints and shades.
Gradientdégradé: a smooth change from one colour to another across a surface.
Opacityopacité: how solid a colour is; at low opacity, you see what is behind it.
Contrast ratiorapport de contraste: a measure of the difference in brightness between text and its background, at least 4.5 to 1 for main text.
Colour blindnessdaltonisme: difficulty telling some colours apart, often red and green, which affects about one man in twelve.

Feedbackretours: comments on a design, sent to the person or the tool that made it.
Blocking problemproblème bloquant: a problem that stops visitors, such as text they can't read or a button they can't find.
Off-brandhors charte: describes a design that doesn't fit the image an organisation wants to give.
Matter of tastequestion de goût: a personal preference, such as a favourite colour, which doesn't stop any visitor.
Defaultréglage par défaut: the choice a tool makes when nobody asks for anything else.
Mood boardplanche d'inspiration: one page of screenshots, photos, colours and fonts that shows the feeling a site should give.
Style guidecharte graphique: the document that fixes an organisation's logo, typefaces, colours and how to use them.
Design tokendesign token: a colour, font or spacing defined once under a name, such as "brand colour", which every style rule uses.
Dark modemode sombre: a second set of colours for a site, with dark backgrounds and light text.

Web Technologies · Talking shop · wt.thomasjuldo.com/course/talking-shop/type-and-colour