Open Sans is used for web applications, and Lato is used for headers. The following code should be included in the head
tag of the application:
link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet"
and
link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap" rel="stylesheet"
.
This will provide all Open Sans options used in the applications.
For a more inclusive and accessible type scale, the assumption is the browser default root font-size (typically 16px) so visitors can customize their browser defaults as needed.
Typography is generally based on Bootstrap's default settings, which can be found here.
Heading Tags
Heading | Example | Colors | Weight | Size |
---|---|---|---|
|
h1. heading |
|
600 | 2.5rem |
|
h2. heading |
|
600 | 2rem |
|
h3. heading |
|
600 | 1.75rem |
|
h4. heading |
|
600 | 1.5rem |
|
h5. heading |
|
600 | 1.25rem |
|
h6. heading |
|
600 | 1rem |
.h1
through .h6
classes are also available for instances where matching the font styling of a heading is needed but use of the associated HTML element is not available.
Inline Text Elements
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.