# 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 Quick we added Nunito Sans font family.

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", 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 Quick. 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/core/_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

## Examples

### Headings

`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

### Display headings

### Lead