Typography
One typeface, three roles. Roboto carries the whole system — ExtraBold for titles, SemiBold for subtitles, Regular for body — and each style is a composed variable that re-resolves at every breakpoint.
Typeface
Font/Roboto is the family token, bound by every composed type
style, so a change of typeface is a one-variable edit.
Load weights 300, 400, 500, 600, 700 and 800. Light 300 is used only by Caption 1; Medium 500 and Bold 700 appear in the strong body and subtitle styles.
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & ? ! % @ # € $
Type scale
Three composed styles are confirmed in the library. Each is a design token of type Font, binding family, style, size, weight, line height and letter spacing at once — which is why the CSS below sets all of them from tokens rather than from hard-coded values.
Your reliable solution in routine maintenance
type system / Title / In-container / Title 1
Roboto ExtraBold
size var(--font-title-in-container-1) → 32px
weight 800
line-height 100%
letter-spacing 0
Explore our flagship lineup of tool sets
type system / Subtitle / Subtitle 2
Roboto SemiBold
size var(--font-subtitle-2) → 18px
weight 600
line-height 22px
letter-spacing 0
Designed to streamline your everyday tasks with precision and convenience. Body 1 is the default running text for the whole system and the size every other measurement is judged against.
type system / Body / Body 1
Roboto Regular
size var(--font-body-1-regular) → 16px
weight 400
line-height 20px
letter-spacing 0
Responsive behaviour
Type does not scale fluidly. The same named token holds a different value in each
breakpoint section of the library, and tokens.css mirrors
that with media queries rather than with clamp().
The practical consequence: component CSS never mentions a pixel size. Resize this page past 768 px and the specimens above change on their own.
| Style | Large ≥1200 | Medium 768–1199 | Small <768 |
|---|---|---|---|
| Title 1 | 32 / 100% | 32 / 100% | 28 / 100% |
| Subtitle 2 | 18 / 22 | 18 / 22 | 14 / 16 |
| Body 1 | 16 / 20 | 16 / 20 | 14 / 20 |
Using the styles
Reach for the token, not the value. A component that hard-codes 16 px silently opts out of the Small breakpoint.
.product-card__title {
font-family: var(--font-roboto);
font-size: var(--font-subtitle-2);
line-height: var(--font-line-height-subtitle-2);
font-weight: var(--font-subtitle-2-weight);
}
/* Or use the ready-made helper classes */
<p class="sg-type-body">Running text</p>
Setting text
Measure is capped at roughly 70 characters. Longer lines lose the reader; shorter ones break the rhythm of the block structure.
Titles are set tight — 100 % line height — and are never centred over more than two lines. Body copy is left-aligned in every language the system supports in LTR.
A comfortable measure lets the eye return to the start of the next line without searching. Around 60 to 70 characters is the target for Body 1.
A long title centred across four lines forces the reader to hunt for the start of every line, and the ragged edges fight the block structure the layout depends on.