18F UI style guide

Typography

Font family

$font-sans: Helvetica Neue (Helvetica, Arial, sans serif)
$color-base: #000000
1rem = 10px

Helvetica Neue, Regular

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

Helvetica Neue, Bold

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


Typesetting

h1 – 3.8rem, 38px

h2 – 3.4rem, 34px

h3 – 2.3rem, 23px

h4 – 2.1rem, 21px

h5 – 1.4rem, 14px

p – 1.8rem, 18px

  •   
    <h1>h1 – 3.8rem, 38px</h1>
    <h2>h2 – 3.4rem, 34px</h2>
    <h3>h3 – 2.3rem, 23px</h3>
    <h4>h4 – 2.1rem, 21px</h4>
    <h5>h5 – 1.4rem, 14px</h5>
    <p>p – 1.8rem, 18px</p>
    
    
  • 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 System.

    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: