Bold, plain, sure.
One sans family for everything you read. One mono for every number. One serif, used for a single word in marketing headlines. The shop’s own name is the only decoration on a shop’s page.
The families
Grilli Type. Regular, Medium and Bold.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 $ & @ . , ’ “ ” − ×
Grilli Type. Variable font, weights 100 to 900.
0123456789 $ − × · : # %
9.50 16.00 6.90 32.40
6:15 #SS-0412
The accent
PP Fragment Glare Regular. It adds warmth to prefstore.com’s marketing headlines and appears nowhere else.
<span class="ps-accent">internet.</span>
One word or short phrase per headline
Usually the last one. Headlines of 34px and larger only.
Never in the product
Not in the logo, on a shop’s page, in checkout, on receipts, buttons or body text.
The scale
Nine styles, plus the accent. If a screen needs another, the screen is too complicated.
| Display .ps-display | Your shop’s counter. | 44 to 84px line 0.98 · Bold 700 tracking −0.025em |
| Heading 1 .ps-h1 | Check your order. | 34 to 52px line 1.02 · Bold 700 tracking −0.02em |
| Heading 2 .ps-h2 | Three promises on every page | 30px line 1.1 · Bold 700 tracking −0.015em |
| Heading 3 .ps-h3 | Pickup time | 21px line 1.2 · Bold 700 tracking −0.005em |
| Lead .ps-lead | A Prefstore is one page with your name on it. | 19px line 1.5 · Regular 400 tracking 0 |
| Body body | Customers order ahead and pay before they arrive. Prices include tax. | 16px line 1.55 · Regular 400 |
| Small .ps-small | Only used to text you when it’s ready. | 14px line 1.45 · Regular 400 tracking 0 |
| Caption .ps-caption | For local shops | 12px line 1.3 · Medium 500 tracking +0.14em, caps |
| Number .ps-num | −10.00 $22.40 6:15 | 14 to 19px Mono Regular 400 / Medium 500 tabular figures |
Rules
Sentence case, always
Headings, buttons and labels. Capitals only for the 12px caption.
Every number in mono
Prices, times, order numbers and quantities, with two decimals on money.
Two weights do the work
Regular for reading, Bold for headings. Medium only on buttons and captions.
No italics, no underlines for emphasis
Use bold. Underline is for links only.
The fonts and their licences
Everything Prefstore uses is in assets/fonts/. I have not seen your licence terms, so check the points in the second table with each foundry.
| Family | Styles in use | Used for |
|---|---|---|
| GT Walsheim Grilli Type · in use | Pro, standard width: Regular, Medium, Bold. You have these. Medium does the job of Semibold on buttons and captions. | All text, all headings, the wordmark’s eight letters |
| GT America Mono Grilli Type · in use | Variable font. Regular 400 and Medium 500 are the weights used. | Prices, times, receipts, order numbers |
| PP Fragment Glare Pangram Pangram · in use | Regular only | The accent word in marketing headlines |
Licences to check
| Licence | Why Prefstore needs it |
|---|---|
| Web | prefstore.com and every shop page. Web licences are usually sized by monthly page views, and every merchant’s traffic counts toward yours. Size it for the whole network, not the marketing site. |
| App | Only if you ship a native iOS or Android app with the fonts bundled. |
| Desktop | For whoever designs window stickers, print and social images. |
| Logo or trademark use | The wordmark’s letters are drawn from the font. Some licences need an add-on for this. Ask. |
| Third-party use | You mentioned offering the network to other developers one day. Standard licences cover one company. Raise it with the foundry now so the price is known. |
Where the fonts live
| File | CSS family | Token |
|---|---|---|
| GTWalsheimPro-Regular.woff2 GTWalsheimPro-Medium.woff2 GTWalsheimPro-Bold.woff2 | GT Walsheim Pro 400, 500 to 600, 700 | --ps-font |
| GTAmericaMono-VF.woff2 | GT America Mono variable, 100 to 900 | --ps-mono |
| PPFragmentGlare-Regular.woff2 | PP Fragment Glare 400 | --ps-accent |
The @font-face rules are in assets/css/fonts.css. The wordmark is outlined, so it needs no font to display. Its letters are drawn from GT Walsheim Pro Bold with the p rebuilt to match (stem 160, ring 274). Have a designer check the letter spacing by eye before it goes to print.