Foundations
Text style
Explore reusable text styles that define hierarchy, emphasis, and reading rhythm across SGDS interfaces.
The SGDS typography system is responsive by default. Font sizes and line heights are defined through shared tokens so type scales consistently across mobile, tablet, and desktop layouts.
This gives products a predictable hierarchy while reducing the need for custom breakpoint logic in individual pages and components.
Style names match Figma text styles and map directly to SGDS utility classes — designers and developers can reference the same page. Each style is a named combination of utility classes that must be applied together to reproduce the intended typography.
One typography style is made from a few variables applied together. For example, sgds-display-md-bold is built by combining the font size, weight, line height, and letter spacing variables below.
Display medium bold
SGDS uses three primary breakpoints:
Mobile: 0px and above. This is the default layer before any larger breakpoint overrides.
Tablet: 1024px and above. Type scales up selectively to preserve hierarchy and readability on wider layouts.
Desktop: 1440px and above. Larger display and heading styles expand again to suit large canvases and denser layouts.
Automatic responsive scaling
Foundation typography scales with the viewport automatically. No additional per-component media queries are needed when you use the system tokens.
Consistent typography hierarchy
Headings keep a clear hierarchy across screen sizes. For example, H1 moves from 32px on mobile to 36px on tablet and 40px on desktop, while H2 moves from 28px to 30px and then 32px.
Body text handling
Smaller body sizes stay stable for comfortable reading. Larger body sizes increase only where extra emphasis is helpful, such as sgds-font-size-body-lg scaling from 18px on mobile to 20px on tablet and desktop.
Typography variables are grouped by use case so they are easy to apply in both design and code.
Headings use tokens such as sgds-font-size-heading-sm, sgds-font-size-heading-md, sgds-font-size-heading-lg, and sgds-font-size-heading-xl.
Body text uses sgds-font-size-body-sm, sgds-font-size-body-md, and sgds-font-size-body-lg.
Links use sgds-font-size-link-xs, sgds-font-size-link-sm, sgds-font-size-link-md, and sgds-font-size-link-lg.
Line heights are handled through sgds-line-height-xs up to sgds-line-height-3-xl, allowing larger text styles to keep comfortable reading rhythm as they scale.
Typography variables are defined at the root level with mobile defaults, then updated through media queries at each breakpoint. This keeps the system consistent while allowing the typography to scale without per-component overrides.
:root {
--sgds-font-size-heading-xl: 32px;
--sgds-font-size-heading-lg: 28px;
--sgds-font-size-heading-md: 24px;
--sgds-font-size-heading-sm: 20px;
}
@media (min-width: 1024px) {
:root {
--sgds-font-size-heading-xl: 36px;
--sgds-font-size-heading-lg: 30px;
--sgds-font-size-heading-md: 28px;
--sgds-font-size-heading-sm: 24px;
}
}
@media (min-width: 1440px) {
:root {
--sgds-font-size-heading-xl: 40px;
--sgds-font-size-heading-lg: 32px;
--sgds-font-size-heading-md: 28px;
--sgds-font-size-heading-sm: 24px;
}
}