We use 2 web font families from the Freight Pro group.
In addition, for smaller screens, we use a system font stack when rendering sans-serif text. This has to following benefits:
Small screen san-serif font stack
font-family: "San Francisco", Roboto, "Helvetica Neue", Helvetica, "Noto Sans", "Segoe UI", Arial, sans-serif;
For maintainability, each font stack can be referenced using the following SASS variables:
Font weights are set specific to the font family with regular and bold weights for each that can be referenced with the following SASS variables:
Font sizes are responsive and include line height settings and can be referenced using the following SASS placeholder classes:
In most scenarios the following typography styles are used that combine font faces, weights, sizing and line heights: