Typography

Font family

$font-serif: 'Work Sans', sans-serif;
$font-mono: 'Overpass Mono', monospace;
$font-sans: 'Source Sans Pro', 'Helvetica Neue', 'Helvetica', 'Roboto', Arial, sans-serif;
1rem = 10px

Work Sans

Aa

A B C D E F G H I J K L M N O P Q R S T U V W Z Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

More information

Overpass Mono

Aa

A B C D E F G H I J K L M N O P Q R S T U V W Z Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

0 1 2 3 4 5 6 7 8 9

More information

Typesetting

Headings

Heading 1. Page Title

Heading 2

Heading 3

Heading 4

Heading 5

Alternate Headings

Heading bar

Heading light

Paragraphs

P Large. Current grantees and alumni, learn how you can help spread the word about the NSF SBIR/STTR program.

P medium. Current grantees and alumni, learn how you can help spread the word about the NSF SBIR/STTR program.

P (default). Current grantees and alumni, learn how you can help spread the word about the NSF SBIR/STTR program.

P small. Current grantees and alumni, learn how you can help spread the word about the NSF SBIR/STTR program.

P alt. Current grantees and alumni, learn how you can help spread the word about the NSF SBIR/STTR program.

P subhead. Current grantees and alumni, learn how you can help spread the word about the NSF SBIR/STTR program.

Lists

  • List item one
  • List item one
  • List item one
  1. List item one
  2. List item one
  3. List item one
  •   
    
    
    
  • To use headers, either use the semantic element, or reference it with a dot-delimited class.

    For example:

    <p class =".h1"></p> would render the same as <h1></h1>.

    For size reference:

    Element Font size (rem) Font size (px)
    h1 3.8rem 38px
    h2 3.4rem 34px
    h3 2.3rem 23px
    h4 2.1rem 21px
    h5 1.4rem 14px
    p 1.8rem 18px

    Additional resources:


Font weights

There are only two font weights used on 18f.gsa.gov.

Bold

Normal

  •   
    <p class="p-bold">Bold</p>
    <p>Normal</p>
    
    
  • Font weight is directly inherited from the U.S. Web Design Standards.

    Quick usage reference:

    SCSS variable CSS class Font weight
    $font-bold p-bold 700
    $font-normal p-normal (only needs to be used to be used to override another class) 400

    Additional resources: