A typographic (or type) scale is a series of type sizes that relate to each other because they increase by the same ratio. You start with a base font size and multiply it by the selected ratio.
The type for WSDOT public site is set up on a typographic scale.
To read more about implementing typographic scales in CSS, read this blog post by Kevin Powell and another by 24 Ways.
Sizes
The WSDOT type scale was designed with a specific set of font sizes that are increments of 16px and 18px increasing at a 1.25 scale.
All font sizes have been converted to Rems of 10px for ease of implementation.
Size naming
Each of these incremental steps (seen above) has been defined with a value at the end – either positive or negative.
For example, the root (10px) is Base0. 16px is Base4
These titles will be used to define size, line height, and paragraph spacing throughout the design spec.
They are important because they count the increments between steps up and down. For example - body copy has a line height that is four steps above font size. So if your font size is Base0, your line height is Base4. Count up from 0 to 4.
Please use type-scale.com to calculate additional sizes.
Default line height is two steps up from the font size.
For example, line height for a Base4 font size is two steps up, or Base6.
Paragraph spacing
Default paragraph spacing is six steps below the font size.
For example, paragraph spacing for a Base4 font size is six steps down, or Base-2.
Responsive sizing
Desktop font sizes are two steps above mobile font sizes. Once the layout changes to a desktop device, scale every font size/line height/p spacing up two steps.
For example, a mobile font size of Base4 would become Base6 on desktop.
