Our brand font
Within product experiences, we use Proxima Nova for everything. This font has been chosen for its exceptional versatility, legibility and accessibility on all devices, providing a seamless experience throughout all Productboard products.
Other typefaces
If you’re working with our marketing materials, you’ll most likely use Eina. This is the preferred option when available, as it’s great for large headings and provides our brand more character.
Fallbacks
We also define font fallbacks in case the main font family doesn’t load or isn’t available. Both default and fallback fonts are defined in a single token so you don’t have to specify them separately.
"font-family": {
"default": {
"$type": "fontFamilies",
"$value": "{typography.font-family.0}, {typography.font-family.fallbacks}",
// Value resolves to "Proxima Nova", "Helvetica", "Roboto", "Arial", sans-serif.
"$description": "Default font family for Productboard app."
}
}
Base font size
Global font size stored as design token. Works the same as the css property and allows us to scale type based off breakpoint in design tools as well as in code.
"typography": {
"base-font-size": {
"$type": "dimension",
"$value": "1rem",
"$description": "Global base font size variable"
}
}
In use:
"small": {
"font-size": {
"$type": "dimension",
"$value": "{typography.rem-base} * 0.75",
//If rem-base = 16px, this results in 12px.
"$description": "Use for not-as-important information, ideally with larger contrast in background and foreground color."
}
}
Font weights
Font weights are stored as primitives and can be attached to any font size in code. We usually these inside complete text styles, but you can also use them separately in case you need to define a custom text string.
Other properties
We also provide design tokens for text case, text decoration, font smoothing and more. You can access full list of type primitives from the distributed packages.