Settings in Typography and Layout & shape.
Fonts
| Font | Style | Use |
|---|---|---|
| Atkinson Hyperlegible Next | Sans-serif designed by the Braille Institute for low-vision readers | Headings and text |
| Public Sans | Neutral, civic | Headings and text |
| Inter | Crisp neo-grotesque | Headings and text |
| Figtree | Friendly geometric | Headings and text |
| Source Serif 4 | Classic book serif | Headings and text |
| Lora | Warm calligraphic serif | Headings and text |
| Bitter | Sturdy slab serif | Headings and text |
| Fraunces | Soft, old-style display serif | Headings only |
| Playfair Display | High-contrast display serif | Headings only |
The web fonts are served from your own site: no requests to Google or another font service, which also helps with privacy rules. They cover Latin and Latin Extended; other characters use a matching system font. Only the fonts a site uses are loaded.
Eight system font choices (System sans-serif, Humanist, Geometric, Neo-grotesque, Transitional, Old-style, Didone, Slab) use fonts already on the visitor's device, so nothing downloads.
Your own fonts
If your organization licenses a brand font, Vitrine can use it from wherever it is served:
| Setting | What to enter |
|---|---|
| Font stylesheet (your own fonts) | The address of the stylesheet that loads your fonts. |
| Custom heading font | The font's name, exactly as the stylesheet gives it. Used for headings. |
| Custom body font | The font's name for text. |
Where the stylesheet comes from:
- Adobe Fonts: create a web project with your fonts and copy its address, such as
https://use.typekit.net/abc1234.css. The names to enter are listed in the project (for exampleproxima-nova). - Google Fonts: select the fonts and styles, and copy the address from the embed code, such as
https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap. Enter the font name as shown (Merriweather). - Your own server: put the font files and a CSS file with
@font-facerules on your server (licensed fonts usually come with web versions, ideally WOFF2), and enter the CSS file's address. A path on your site such as/files/fonts/brand.cssworks too.
A custom font replaces the heading or body font chosen above. That choice still matters: it sets the style of the system font (serif or sans-serif) shown while your font loads, or if it can't load. Only your font downloads; Vitrine's own font of that kind is no longer loaded.
Fonts from an outside service send each visitor's IP address to that service, which privacy rules such as the GDPR may require you to mention. The included fonts and fonts on your own server do not.
Type
| Setting | Choices |
|---|---|
| Base text size | 16 to 20 pixels (18 recommended). Text scales down slightly on phones and always follows each visitor's browser text size. |
| Heading size contrast | Subtle (1.2) · Balanced (1.25) · Pronounced (1.333) · Dramatic (1.414) |
| Heading weight | Regular to Extra bold |
| Heading capitalization | As written · All capitals (for short headings only) |
| Link underlines | Standard · Thin underline that thickens on hover. Links in text are always underlined, so they can be found without relying on color. |
Layout & shape
| Setting | Choices |
|---|---|
| Maximum page width | Narrow (1100 px) · Standard (1240 px) · Wide (1360 px) · Extra wide (1480 px) · Full window width |
| Reading width | Narrow (about 60 characters) · Standard (about 70) · Wide (about 80): the longest line of text in paragraphs |
| Corners | Square · Slightly rounded · Rounded · Very rounded |
| Button shape | Match the corners · Pill |
| Button style | Solid · Outline |
| Spacing | Compact · Comfortable · Spacious |
| Shadows | None (flat) · Soft · Raised |