en   An official website of the U.S. Govt
Popular search terms:

TAS Style Menu – Text Styles

Text styles are an inherent part of HTML.  In order to ensure uniformity of font sizing and style, the below styles are built into the website’s master stylesheet.  In order to provide flexibility for longer-titled content, additional classes have been created for some heading levels, to make the font size smaller, without compromising the inherent visual hierarchy as well as the Section 508 / WCAG compliance.


Regular Text Style Examples

Heading Level 1

font-weight: 500
font-size: 44px

Heading Level 2

font-weight: (default 400)
font-size: 40px

Heading Level 3

font-weight: 500
font-size: 30px

Heading Level 4

font-weight: 500
font-size: 22px
Heading Level 5
font-weight: 500
font-size: 14px
Heading Level 6
font-weight: 500
font-size: 12px

Paragraph text

font-weight: (default 400)
font-size: 18px

Emphasized (Italics) Text

font-weight: (default 400)
font-size: 18px

Strong (Bolded) Text

font-weight: (default 400)
font-size: 18px

Unordered List

  • List Item 1
  • List Item 1
  • List Item 1

Ordered List

  1. List Item 1
  2. List Item 1
  3. List Item 1

 

Blockquote options are displayed on: Blockquote Templates

Blog Text Style Examples

Each of these are identical to the heading elements above, except they have a class of “blog” applied. As an example, the first one is <h1 class="blog"> instead of <h1>.

 

Heading Level 1

font-weight: 500
font-size: 30px

Heading Level 2

font-weight: (default 400)
font-size: 28px

Heading Level 3

font-weight: 500
font-size: 24px

Heading Level 4

font-weight: 500
font-size: 20px

This is a Header Module

Above has an H1 with the “blog” class applied.  This is additional paragraph text in the Header Module

White NTA Blog