Typographic utilities

There are different typographic utilities, that allow you to change font-related properties of elements.

Font size

You can set the font-size to any of a list of "named" values. This is called a "gradient" in our framework. Unless you override it in the "_child.scss", you can use the following values:

To set the font size, you need to give the element the class has-font-size-X, where X is replaced with the font-size name.

Example

<div class="has-font-size-display">3 questions</div>
<div class="has-font-size-larger">matched your query</div>

Font family

You can set the font-family to either "primary" (the default sans serif font), "brand" (the sans serif font used in headers and other branding-specific components) or "code" (the monospace font). Unless you override it in the "_child.scss", each option uses this font stack:

To set the font family, you need to give the element the class has-font-family-X, where X is replaced with the font stack name.

Example

<div class="has-font-family-primary">This is the primary font.</div>
<div class="has-font-family-brand">This is the brand font..</div>
<div class="has-font-family-code">This is the code font.</div>

Font decoration

It is possible to override the font weight and whether it is italic for an element.

You have the classes has-font-weight-normal, has-font-weight-medium, has-font-weight-bold and has-font-weight-black for font-weight and has-font-style-normal and has-font-weight-italic for italic style or not.

Example

<p class="has-font-weight-normal">This is normal</p>
<p class="has-font-weight-medium">This is medium</p>
<p class="has-font-weight-bold">This is bold</p>
<p class="has-font-weight-black">This is black</p>
<p class="has-font-style-italic">This is italic</p>
<p class="has-font-weight-black has-font-style-italic">This is black and italic</p>

Text align

It is possible to override the text alignment for an element.

You have the classes has-text-align-left, has-text-align-center, has-text-align-right and has-text-align-justify, which determine, whether the text in an element is on the left, centered, on the right or justified, respectively. Justification should not be used in the most cases, though.

Example

<p class="has-text-align-left"><strong>Left aligned.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
<p class="has-text-align-center"><strong>Centered.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</p>
<p class="has-text-align-right"><strong>Right aligned.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
<p class="has-text-align-justify"><strong>Justified.</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>