Documentation and examples for typography, including global settings, headings, body text, lists, and more.
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.
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-familyfor 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
$line-height-baseattributes as our typographic base applied to the
- Set the global link color via
$link-colorand apply link underlines only on
$body-bgto set a
The default sans-serif provided by Bootstrap is loading the native font family provided by the device:
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.
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.
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
- Go to
scss/purpose/_variables, copy the
$font-family-custom-sans-serifvariables 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
linktag 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-serifvariable’s existing value with the one copied
- Save and compile the new stylesheet