DESE DesignED Playbook

Typography

Typeface

The DESE website uses Bootstrap 4.0 CSS Framework, which is a free, open source front–end development framework for the creation of websites and web applications. Bootstrap uses "native font stack" for optimum text rendering on every device and OS. By using native stack fonts, we ensure that the intended font will always display properly on a web page.

font-family-sans-serif:
// Safari for OS X and iOS (San Francisco)
–apple-system,
// Chrome < 56 for OS X (San Francisco)
BlinkMacSystemFont,
// Windows
"Segoe UI",
// Android
"Roboto",
// Basic web fallback
"Helvetica Neue", Arial, sans–serif,
// Emoji fonts
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Styles and Usage

Headings must be hierarchical and properly nested. Numbered headings create a hierarchy so users can scan them easily, but they are also used by search engines and screen readers to navigate the content. The H1 is most important, with only one per page, followed by H2 through H6 in decreasing size and importance.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body text

Font Weight and Italics

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Font Size

While our heading classes (e.g., .h1–.h6) apply font–size, font–weight, and line–height, these utilities only apply font–size.

.fs–1 text

.fs–2 text

.fs–3 text

.fs–4 text

.fs–5 text

.fs–6 text

License

Native font stack is a free open source font.

Last Updated: November 5, 2024

Top