Typography and Icons
The set of typefaces and icons used in Zirconium.
Inter
Zirconium uses Inter as its only sans serif typeface. Use this for all headings and user interface components. Use the class .sans to override elements with this typeface.
Font sizes for headings use the CSS clamp() function. Minimum font sizes use the perfect fourth ratio, and the maximum font sizes use the perfect fifth ratio. h4, h5, and h6's minimum font size are 1em. Also, h5 and h6 do not participate in the ratio sizing.
Lora
Zirconium uses Lora as its only serif typeface. Use this for longform content only (blog articles, course lessons, etc.). Use the class .serif to override elements with this typeface.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ut velit enim aut quaerat neque?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe illum temporibus perferendis. Provident alias corporis inventore reiciendis quaerat autem ipsam porro, dolorum dicta tempora dignissimos.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt optio impedit tempora repudiandae, facilis, doloribus eaque dolorem quibusdam illo animi nesciunt id atque excepturi odit hic fugit exercitationem voluptate molestias ad nobis ducimus quasi quos!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quaerat nostrum corporis, consequuntur soluta ad cumque consectetur dolores recusandae quae nam ex incidunt reiciendis est?
Cascadia Code
Zirconium uses Cascadia Code as its only monospaced typeface. Use the class .mono to override elements and apply this font.
Including fonts
The typefaces are not embedded within the CSS. You can do any of the following:
Download the typefaces
Download the typefaces and host them in your server. Place them in the same folder as your zirconium.css or zirconium.min.css file.
Add a link to the typefaces
Both of these fonts are hosted in Google Fonts. You can choose to use this service to use the typefaces.
Add the following to your HTML's <head> tag.
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
/>Icons
Zirconium uses icons from Feather Icons. Using icons from other sources is only recommended if the icon needed is missing from Feather Icons, or an icon from that set cannot be repurposed to fit the need.
It is preferred to use the SVG inline instead of including it via the <img> tag. Including it inline makes it possible for the icons to take its fill and stroke colors from the colors of text around it.
When used inside user interface components, the icons are automatically sized to the font size of the component or slightly larger than that. Otherwise, the sizes of SVG icons follow whatever is inside their width and height attributes.