Typography

Documentation and examples for typography, including global settings, headings, body text, lists, and more.

Usage

Keep in mind these general web typography guidelines when building your applications.

  • The default text color in all components is compliant with the recommended WCAG 2.0 minimum contrast ratio.
  • If you choose to go with a custom text color, make sure the background behind it provides proper contrast.
  • Try not to explicitly write pixel values for your font-size or line-height CSS rules. Instead, reference the classes and variables.

Fonts

Native

Since using Bootstrap, this sets basic global display, typography, and link styles. When more control is needed, check out the textual utility classes.

  • Use a native font stack that selects the best font-family for each OS and device.
  • For a more inclusive and accessible type scale, we assume the browser default root font-size (typically 16px) so visitors can customize their browser defaults as needed.
  • Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base applied to the <body>.
  • Set the global link color via $link-color and apply link underlines only on :hover.
  • Use $body-bg to set a background-color on the <body> (#fff by default).

The default sans-serif provided by Bootstrap is loading the native font family provided by the device:

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-family-base: $font-family-sans-serif !default;

Custom

In Purpose we added Nunito font family. Nunito is a well balanced sans serif typeface superfamily, with 2 versions: The project began with Nunito, created by Vernon Adams as a rounded terminal sans serif for display typography. Jacques Le Bailly extended it to a full set of weights, and an accompanying regular non-rounded terminal version

We created an additional variable to store the custom font family so you can choose anytime to use the native option. Using this variable you can switch to any font family you want after importing it from Google or any other place.

$font-family-custom-sans-serif: "Nunito", sans-serif !default;
$font-family-base: $font-family-custom-sans-serif !default;

Want to go back to the native version? No worries. Simply replace the $font-family-base variable with $font-family-sans-serif in your custom variable file.

Customization

You can esily change the font families used in Purpose. Follow the next steps in order to import a new font family and replace the default one and remove the !default flag.

Google Fonts

  • Go to scss/purpose/_variables, copy the $font and $font-family-custom-sans-serif variables and paste them in your custom variable file
  • Go to Google fonts and choose your webfont.
  • In the Embed section, go to the Standard tab and copy the link
  • Go in your HTML page and replace the link tag corresponding to the Google Fonts
  • Go back to Google Fonts in the Specify in CSS section and copy the font’s name
  • Replace the $font-family-custom-sans-serif variable’s existing value with the one copied
  • Save and compile the new stylesheet

Make sure you read the Customization guidelines and use the Build Tools

Summary