Web Environments
In our web environments, we lean toward a concept inspired by the decentralised mental model. Instead of imposing a singular font choice, we rely on the default web fonts present on users' browsers and systems. Our strategy offers key advantages:
- Accessibility: We design in a way that works harmoniously with whatever default font a user's system provides. Our commitment is to ensure that our design retains its integrity and functionality regardless of the specific default font. By not making an overriding decision, we respect the inherent variability and trust that our content will be consistently presented and accessed.
- Optimisation: Bypassing the need for additional font downloads ensures quicker page load times, which is crucial for those with limited internet bandwidth or in challenging network conditions.
By specifying the font category (serif, sans-serif, or mono) in your CSS, the user's operating system is allowed to determine the best font choice. This approach also guarantees extensive language script support.
/**
* System font stack for sans-serif fonts
*
* `-apple-system` ('San Francisco' font) – Support Safari 9+ macOS and iOS, Firefox macOS
* `BlinkMacSystemFont` ('San Francisco' font) – Chrome 48+ macOS and iOS
* `Segoe UI` – Windows Vista & newer
* `Roboto` – Android 4.0+
* `Lato` – Wikimedia Design choice, OFL licensed
* `Helvetica, Arial, sans-serif` – (Generic) Web fallback
* Note that standard `system-ui` value has resulted in unresolved side-effects in certain OS/language combinations as of now and is therefore not included.
*/
font-family: Serif
| Font Type | Suggested Default Font Family |
|---|---|
| Mono | Consolas (Windows), Monaco (macOS), DejaVu Sans Mono (Linux) |
| Serif | Georgia (Windows), Times New Roman (macOS), DejaVu Serif (Linux) |
| Sans-Serif | Segoe UI (Windows), Helvetica (macOS), DejaVu Sans (Linux) |