Smile Generation
Smile Generation
SGEN Typography
Universal type scale for Smile Generation — headline styles scale across mobile, tablet, and desktop; body, form, nav, and footer styles are universal at every breakpoint. Specs pulled from the O2 Design System Figma.
Typeface
Where to get it
Smile Generation uses two families, Poppins and Roboto Serif. Both are Google fonts, so they are free to download and use — there is no licence to buy and no account required.
Poppins — headlines
| Detail | |
|---|---|
| Family | Poppins — geometric sans, by Indian Type Foundry |
| Role | Headlines |
| Source | fonts.google.com/specimen/Poppins — free, no account or licence purchase needed |
| Licence | SIL Open Font License 1.1. Free for commercial use in web and print, and may be embedded in documents and applications. |
| Weights in use | Bold 700 |
| Desktop install | On the specimen page choose Get font, then Download all, and install the .ttf files you need. |
| On brand sites | Already loaded by the site clientlib — do not add your own font link or @import to a page or embed. |
| In a standalone embed | Only if the embed must render outside the site styles:@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); |
| In Figma | Available in Figma’s font picker for web files. The desktop app needs it installed locally. |
Roboto Serif — body
| Detail | |
|---|---|
| Family | Roboto Serif — the serif companion to Roboto |
| Role | Body |
| Source | fonts.google.com/specimen/Roboto Serif — free, no account or licence purchase needed |
| Licence | SIL Open Font License 1.1. Free for commercial use in web and print, and may be embedded in documents and applications. |
| Weights in use | Regular 400 |
| Desktop install | On the specimen page choose Get font, then Download all, and install the .ttf files you need. |
| On brand sites | Already loaded by the site clientlib — do not add your own font link or @import to a page or embed. |
| In a standalone embed | Only if the embed must render outside the site styles:@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:wght@400&display=swap'); |
| In Figma | Available in Figma’s font picker for web files. The desktop app needs it installed locally. |
Type Scale — size/line-height by breakpoint
Live demo: the headline samples below are responsive — resize your browser and they re-scale at the 768px and 1200px breakpoints, exactly as production text should behave.
Display & Headlines — responsive
Body
Source of truth: O2 Design System Figma — Universal Type Sizes (node 2064-6232). Breakpoint mapping: Mobile <768px, Tablet 768–1199px, Desktop ≥1200px. Per-brand versions (GP on GP template, etc.) pending the brand page template rollout to Prod.
© 2026 PDS Health — Oxygen Design System