This shows our previous typography scale and brand type face:
Page Title (H1)
Use underlines for links in body copy with no underline on hover/focus. For standalone links, such as a privacy link at the bottom of a page, use no underline and show underline on hover/focus.
For abbreviations, such as HRIS, show the expanded text after the first use, such as "HRIS (human resource information system)" and abbreviations thereafter. If there's not enough space or only one use, you might instead show an abbreviation using a dotted underline and use a tooltip to expand the abbreviation on hover/focus.
Some font families, such as Ideal Sans, include numeric font variants for alternate figures. That might include "proportional old style", "proportional lining", "tabular old style", or "tabular lining" numbers:
Note: Ideal Sans does not include tabular old style numbers.
In Figma, you can set these in the Design panel > under Text > 3 dots icon > under Numbers > Style.
In Sketch, you can set these in Fonts > cog icon > Typography > Number spacing (monospace), Number case (Lining Figures).
In code, you can set the
font-variant-numeric and different type face.
Here are some examples of typography in existing design systems and typography references: