Skip to main content

3.2 - Typography

Theme Customizer → Appearance → Typography. This is where you choose the body font, the heading font, their weight and the overall size.

By default Corpus downloads no font at all. It uses whatever is already installed on the visitor's device: Segoe UI on Windows, San Francisco on macOS and iOS, Roboto on Android, the desktop font on Linux. Nothing to load, no request, no data transferred.

That is the best setting for most sites. The others only make sense when your brand guidelines require a specific typeface.

Two independent choices

Body font and heading font are set separately, and each can come from any source. The most common case - the system font for text, a brand font for headings - therefore takes two clicks.

Leave "Same as body" for headings if unsure: a single font remains the safest and the fastest choice.

A preview appears under each list, with a sentence showing accents, digits and the group 0 O 1 l I - that is where typefaces either distinguish themselves or fail.

A system-font preview shows what YOUR computer renders. You are on Windows, you see Segoe UI; your visitor on macOS will see something else. That is the very principle of this choice, and its trade-off.

The four sources

System stacks

Seven families, named by typographic classification rather than by typeface - since the actual font depends on the device:

EntryWhat it gives
SystemThe interface font, neutral.
HumanistWarm, open.
GeometricModern, drawn with a compass.
Neo-grotesquePlain, very neutral.
TransitionalSerif, made for long texts.
Old styleSerif, classical.
Slab serifSquare serifs, assertive. Headings only.

Slab serif is not offered for body text: it reads poorly at small sizes and over long lines.

Roboto

Shipped with Joomla, served by your own site. Not a single byte is added to Corpus's package, no request leaves your server, and Joomla keeps it updated. Rendering is identical on every device.

This is the simplest way to get predictable rendering without handling a file.

Your font, hosted by your site

The right way to use a Google font. You download it, you put it on your site, and your visitors receive it from you.

  1. Get the font in .woff2 format. On Google Fonts, Get font then Download all: you get .ttf files, to be converted with any online converter.
  2. Drop the files into media/templates/site/corpus/fonts/ - by FTP or through your host's file manager. A README waits for you there and repeats these steps.
  3. In the Your font, hosted by your site group, enter the exact family name - for example Atkinson Hyperlegible - then pick the files from the lists (regular, bold, italic, bold italic).
  4. Go back to the top and choose "Your hosted font" for the body, the headings, or both.

The bold, italic and bold italic files are optional. Without them the browser thickens and slants the regular weight itself: less handsome than a properly drawn weight, but readable, and with no extra file to download.

Check the licence. Most Google Fonts are under the SIL Open Font License, which allows commercial use. Not all of them are, and hosting the file changes nothing about the licence.

Are your files variable fonts? A variable font fits in a single file for all weights. In that case, set the Variable files switch to Yes. The regular and italic files then serve every weight, the body's as well as the headings', and the bold file becomes unnecessary. Leave it on No for ordinary files.

The files are found from Corpus's stylesheet, so this also works when your site is installed in a subfolder.

A second hosted font, for headings

Many brand guidelines have two families: one for the body, one for headings. Corpus can host both. In the A second hosted font, for headings group, you give:

  • the Heading font name, for example Quicksand;
  • the Heading font file: a single .woff2 file, dropped into media/templates/site/corpus/fonts/ like the others.

This file is shown as it is, whatever the heading weight. So drop the one you want to see, for example the medium version, or a variable file.

Then, in the Heading font list, choose "Your hosted heading font". If the name is empty, this entry falls back to the system font: the site is never left without a font.

An external font

A web address, typically the one Google Fonts gives you.

What this means, and it is your responsibility. Every visitor's browser will fetch the font from that server, handing over their IP address. Under the GDPR this may require their prior consent: several European court rulings have held so for Google Fonts. Hosting the font yourself - the previous source - removes the question entirely.

If you take this route, fill in the family name as well: without it the stylesheet loads but no rule uses it.

In every case the system stack stays as a fallback. If the file is missing or slow, text shows in the system font - never in Times New Roman.

Weight

Body: regular (400) or medium (500).

Headings: medium (500), semi-bold (600), bold (700) or extra-bold (800). A heading is large: at that size, the medium weight does not weaken reading the way it would on running text.

No lighter weight is offered for body text, and that is deliberate: thin text lowers perceived contrast, which no contrast calculation detects. The rule would pass, the page would be less readable.

Overall size

100%, 105%, 110% or 115%. The setting enlarges all the site's text at once, keeping the proportions between headings and body.

No reduction is offered. Corpus guarantees that no text goes below 16 px - modules, cards, captions and small print included - and that guarantee must not be bypassable by a setting.

If a client finds the text too small, this is the field to raise. If another finds it too large, leave it: their browser already knows how to shrink, and that is their choice, not yours.

What still cannot be set

The type scale itself. The ratio between an h1, an h2 and body text comes from the design reference and is checked by tooling on every release. Only the global factor moves.

Spacing and the grid, for the same reason.

The monospace font used by code blocks: it always follows the system.

A closing piece of advice

Every downloaded font is one more file to load, on every page, for every visitor. Two fonts means two files at least, often four once italics and bolds are included.

The question to ask is not "which is prettier" but "what does this one give me that the system font does not". When the answer is not obvious, the system stack is the right choice.

Up to date for Corpus 2.1.684.