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.

The Department of Elementary and Secondary Education (DESE) uses the following standardized font styles to maintain consistency across digital and print materials:

Font Guidelines

Primary Font: Arial
Arial is a universally available, accessible font suitable for both print and digital use. It is also the official font used in DESE website content and documentation. To ensure accessibility:

• Use the “Styles” dropdown in Microsoft Word to apply fonts and headings.
• Always select plain Arial, not Arial Narrow.
• Text should be black, except for hyperlinks, which may be blue.
• Avoid using underlined text unless it is a hyperlink.
• Use bold and italics sparingly to maintain readability, especially in large blocks of text.

• View instructions for modifying styles manually in Word

Typography Hierarchy with Font Sizes

Heading 1 (Arial 20)

Heading 2 (Arial 16)

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Heading 3 (Arial 15)

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.

Heading 4 and/or Subtitle (Arial 14)

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.

Heading 5 (Arial 13)

Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.

Heading 6 and/or body copy (Arial 12)

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.