Type scales without the maths

A type scale sounds like mathematics: ratios, modular steps, golden sections. For a grid’s cards it is much simpler. It is a short list of sizes you use again and again, so that every card looks like it belongs to the same family.

Three sizes are enough for almost any card. The grid below uses one font, two weights and exactly three sizes.

Try it

One font, two weights, three sizes

The recipe of the grid above:

Step	Used for	Size / line height	Weight
Small	the line above the title	13 px / 18 px	600
Text	the description	16 px / 24 px	400
Title	the title	24 px / 28 px	600

People sort what they see by size first and weight second. With three sizes the order is clear at a glance: title, text, small print. A fourth or fifth size rarely adds order; it adds noise, and the cards start to look unrelated.

Two weights do the same for emphasis: a regular one for reading, a bolder one for what should stand out. The small line is bold so it holds its own next to the bigger text.

Start from the text

Choose the size people read most first, then the others from it.

• Text: 15 or 16 px for a sentence or two on a card. Smaller than 14 px tires the eye on a phone.
• Small: one step down, 12 or 13 px, for a date, a category, a price. Not below 12 px, and bold or in capitals if it must be read at a glance.
• Title: one and a half times the text or a little more, 22 to 28 px, depending on how wide the cards are and how long the titles run.

No formula needed: if the title does not look clearly bigger than the text, make it bigger; if it shouts, make it smaller.

Line height

Line height is the space a line takes, the text’s size plus the air between lines.

• For text, about one and a half times the size: 16 px text, 24 px lines.
• For titles, tighter: about 1.15 to 1.2 times. 24 px titles on 28 px lines keep a two-line title together as one block.
• For a one-line small print, the size plus a few pixels: 13 px on 18 px.

Three ready-made scales

Cards	Small	Text	Title
Dense (four columns and more)	12 / 16	14 / 20	18 / 22
Regular (two or three columns)	13 / 18	16 / 24	24 / 28
Large (one or two wide columns)	14 / 20	18 / 28	32 / 36

Sizes and line heights in px. Take one, use it on every card, and change it only as a set.

Where you set it

Each text layer of a skin has its own type. In the skin editor, choose the layer and open Layer › Look › Style:

• Font: the font family and, below it, its weight (400 Regular, 600 Semi bold, 700 Bold …).
• Size: the font size and the line height, both in px.
• Colour and Background; Align shows when the layer has a line of its own (Box & position › Line › Own line); under More text options, Capitals and Letter spacing.

Set the three steps once, layer by layer: the small line, the title, the text. The Presets at the top of Style apply a ready style to a layer in one click; afterwards, set its size to your scale.

One font for the whole skin

One family for every layer keeps a grid calm, and the easiest one is the font your site already uses: a grid made in Essential Grid 4.0 takes your site’s font. Card › Look › Colours & fonts lists every font the skin’s layers use under Fonts, with its weights and the layers that use it; a layer without a font of its own is listed as Your theme’s font.

Click a font to change it everywhere at once: pick the new one under To, keep the layers ticked and press Change n. Below the lists, Colour and font themes has font themes that set the skin’s fonts in one click:

Font theme	What it sets
Your theme’s font	Takes the font off every layer, so on a grid made in 4.0 they show your site’s font.
System sans	Arial and Helvetica on every layer, no web font.
Raleway + Open Sans	Raleway for titles, Open Sans for the other text (needs the Fonts add-on).
Playfair Display + Open Sans	Playfair Display for titles, Open Sans for the other text (needs the Fonts add-on).

The grid above uses this site’s own font, typed into each layer’s Font (the field takes any font name), so its cards match the page around them. A font your page already loads costs nothing extra; a web font that only the grid uses is one more file for every visitor to load (Does Essential Grid load Google Fonts?).

Check at every card size

A scale that looks right on a wide card can crowd a narrow one. Use the buttons above the live grid: at a phone’s width the cards are one column, at a tablet’s two, and the sizes stay the same. That is the point of a scale: the type stays put, the layout adapts.

• Read the longest title on the narrowest card. Two lines are fine, four are too many: shorten the title before you shrink the type.
• On very small cards, hide a layer rather than shrink it: Layer › Look › Visibility › Hide on small items (The art of the useful headline).
• Check the preview at each device in the grid editor (Small screens, strong grids).

Good to know

• A layer can change its style on hover (Layer › Hover › When this layer is hovered › Change style). Keep the size out of it: text that grows on hover pushes the lines below it.
• Capitals need a little letter spacing to read well (1 px at 12 or 13 px), and they read slower: keep them for one short line.
• A skin is shared: every grid that uses it gets its type. Duplicate the skin before you change one grid’s sizes.

Read on

• In the manual: The skin editor, Fonts, colours and icons, Does Essential Grid load Google Fonts?
• The guides: The art of the useful headline, Small screens, strong grids