Website content typography should align with brand typography. Fonts which have licensing restrictions are replaced by open source fonts available at fonts.google.com.

Slab serif type is seldom used on institute websites unless it is represented by a graphic. This is due to licensing restrictions on Vitesse, the brand's preferred slab-serif typeface. Top level headings are instead set in Roboto Bold Condensed to maximize accessibility and developer usability. If a slab serif typeface is needed for a website, Roboto Slab can be used.

Heading Typefaces

The main heading typeface for site content is Roboto Condensed Bold. Tech Gold text on a white background is not accessible. Gold headings on a white background should be #A4925A (Tech Gold Medium). The smallest heading size, H6, should be #857437 (Tech Dark Gold).

A second heading option is Abel, which may be used as needed to differentiate content. Abel is also used in the main site title in the site's header. Gold Abel text is not accessible. Any type set in Abel should be #545454 or darker for accessibility.

Subtitle Alternative Style Options

Subtitles and kickers may be differentiated (optionally) by applying #545454 (Medium Gray) or by using Abel.

Correct Heading Hierarchy

A heading tag's level (h2, h3, etc.) communicates valuable information to search engines about the content that follows it and the level of specificity of that content. For SEO optimization, a site's heading tag hierarchy must be logical and must not skip a heading level.

Controlling Text Size

To control the size of text without disrupting proper heading hierarchy, use heading classes (.h1, .h2, .h3) applied to the appropriate tags. Do not change a heading's tag (<h1>, <h2>, <h3>) in order to control the size of text.

Paragraph Typefaces

Body copy is Roboto Sans, weight 400, size of 16px (1rem), color #262626. To optimize legibility, the horizontal line length of a paragraph should not exceed 75 characters. Paragraphs have a margin-bottom of 1.3rem.

Link Styling

Links should inherit color from the containing elements. They are differentiated by a heavier font weight (700) and either a text-underline or a border-bottom in #eeb211 ("Buzz Gold"). On hover, links transition to a background color of #eeb211. Visited links have an inherited (usually black) text-underline or border-bottom. External links may be denoted with an external link icon which helps to warn the visitor that they are being directed to another site.

When a link causes the visitor to automatically download a file, specify the type of file which will be downloaded onto the visitor's device.

Lists

Lists feature the same type styling as paragraph text with additional margins below each list item and below the list.