Typography
Font family
$font-mono: 'Overpass Mono', monospace;
$font-sans: 'Source Sans Pro', 'Helvetica Neue', 'Helvetica', 'Roboto', Arial, sans-serif;
Work Sans
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 informationOverpass Mono
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-
We are overriding the font used by the U.S. Web Design Standards with the font used by the 18F Brand.
Additional resources:
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
- List item one
- List item one
- 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:
Links
-
<div class="styleguide-links-section"> <a href="#">Active Link</a> <a href="#" class="visited">Visited</a> </div>
-
To use a link, specify the text, direction that the arrow is pointing, and reference the SVG file for the corresponding arrow.