Typography

Custom Fonts and Headings

Typography should be defined at the project level, and as such the framework only has a few common fonts set as default. In this documentation, we have .heading-1, .heading-2, .heading-3, and .paragraph, for examples.

General SEO & Accesibilty Notes

Only use one <h1> per page. It doesn't necessarily need to be the biggest text on the page, but it should concisely describe the page's content or main focus.

Don't use other h's just as a method of setting the font size in places like buttons and navigation as it will confuse screen readers. (Looking at you, LOU 2.0.) Use <h2>, <h3>, <h4>, <h5>, and <h6> as they are intended.

Tags like <strong> and <em> give screen readers specific instructions on how the text is said (importance, emphasis respectively). Sometimes its appropriate to use strong and em, other times it may be better just style with css. For style uses, .text_bold and .text_italic are availble, as are the semantic tags <b> and <i>.

Text can be struck through with .text_strike. Example.

Text can be set to uppercase with .text_uppercase. Example. Includes letter-spacing for better legibility.

Text Alignment

Text aligns to the left by default. For aligning text to the right and center, use .text_align-right, and .text_align-center.

Long Strings of Text that Escape Containers

Long strings have different break behavior in different browsers; this class will guarantee that long strings, like a url, will line break instead of overflowing their container. Place .text_break-word directly on the element that contains the text.

Long Strings of Text that we want to Trim to One Line

Place .text_truncate directly on the element that contains the text. Commonly used in tables where we don't really care if we can see all the text in the cell.

Fill Remaining Space with Ellipses

Place .text_ellipses directly on the element that contains the text. Only works for single line of text.