---
title: "Fonts"
description: "Clover takes your page's font and sizes its text from your 1rem: four text sizes you can set, and titles that follow your heading styles."
url: https://clover.iiif.library.northwestern.edu/docs/styling/fonts
version: "4"
---

# Fonts

Clover sets no font and no base size. It takes both from your page.

Font

\[x]Google Sans\[ ]Open Sans\[ ]Libre Franklin\[ ]Inter\[ ]System UI\[ ]Lora\[ ]EB Garamond\[ ]Merriweather\[ ]Georgia

> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.
>
> [Example: the Viewer in Google Sans](https://clover.iiif.library.northwestern.edu/examples/stylesheets/styles.html)

```css
/* Clover sets no font: its text takes your page's. */
html {
  font-family: "Google Sans", sans-serif;
}
```

## Your page’s size

Clover sizes its text, spaces and controls on a [golden scale](https://clover.iiif.library.northwestern.edu/docs/styling/spacing#the-scale) from your page’s `1rem`. That’s the root’s font size, 16px unless your page or the browser sets another. Change it, and Clover scales with it:

```css
html {
  font-size: 112.5%;
}
```

## Text sizes

Clover’s text inherits your page’s font size, or takes one of four sizes a little above or below your `1rem`. Each is a [custom property](https://clover.iiif.library.northwestern.edu/docs/styling/variables#sizes-and-spaces) you can set. Change your `1rem` in the table: the text sizes follow, and so does the Viewer above it.

[Clover's Viewer, its 1rem the size set below](https://clover.iiif.library.northwestern.edu/test/viewer?r=catalog)

| Variable                | Size     | At 16px | What it sizes                                                                      |
| ----------------------- | -------- | ------- | ---------------------------------------------------------------------------------- |
| Your page               |          |         |                                                                                    |
| HTML page               | 1rem     | 16px    | Your page’s root `font-size`                                                       |
| Text                    |          |         |                                                                                    |
| `--clover-text-xs`      | 0.764rem | 12.2px  | A badge: a duration on a thumbnail                                                 |
| `--clover-text-s`       | 0.854rem | 13.7px  | Secondary text: times, formats, legends                                            |
| Automatically inherited | 1rem     | 16px    | Baseline text content                                                              |
| `--clover-text-m`       | 1.146rem | 18.3px  | A section’s heading                                                                |
| `--clover-text-l`       | 1.236rem | 19.8px  | An error’s headline, a sound Canvas’s label beside others, captions in a wide Body |

## Headings

Every title in Clover is a heading at its `headingLevel` (web components: `heading-level`), with the [class](https://clover.iiif.library.northwestern.edu/docs/styling/classes#classes-and-states) `.clover-title`, such as a template’s title or the resource’s label in About. Its size is your page’s for that level. Clover gives it only a regular weight, no margin and lines a little closer than running text’s, and lets a long word wrap, all with no specificity, so your rule for that level, or for `.clover-title`, wins:

```css
.clover-title:is(h2, h3) {
  font-size: 1.25rem;
}
```

Set [`--clover-title-weight`](https://clover.iiif.library.northwestern.edu/docs/styling/variables#templates) to change every title’s weight. Clover styles the Panel’s headings itself: each section’s, and those of the groups in it, such as Search’s pages.