Typography
State of California websites have common typographic needs: clear and consistent headings, highly legible body paragraphs, clear labels, and easy-to-use input fields. We recommend a font system that uses open-source font family: Source Sans Pro, which is designed for legibility and can beautifully adapt to a variety of visual styles.
Typeface
Source Sans Pro
Source Sans Pro is an open-source sans serif typeface created for legibility in UI design. With a variety of weights that read easily at all sizes, Source Sans Pro provides clear and highly-readable body text.
Inspired by twentieth-century American gothic typeface design, its slender but open letters offer a clean and friendly simplicity. Advanced hinting allows Source Sans Pro to render well on Windows systems which run Cleartype, and across browsers and devices. Moreover, it supports a variety of languages and alphabets, including Western and European language, Vietnamese, pinyin Romanization of Chinese, and Navajo.
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
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
Asap Condensed
Asap Condensed is an open-source sans serif typeface that in this template is used in page headings. It's a contemporary sans-serif family with subtle rounded corners. Designed by Pablo Cosgaya and Nicolás Silva, Asap (“as soon as possible”) goes with a variety of weights.
This family, specially developed for screen and desktop use, offers a standardized character width on all styles, which means lines of text remain the same length. This useful feature allows users to change type styles on-the-go without reflowing a text body.
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
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
Web Hierarchy
font-weight: 400
font-size: 38px
line-height: 1.1
font-weight: 400
font-size: 31px
line-height: 1.1
font-weight: 400
font-size: 25px
line-height: 1.1
font-weight: 400
font-size: 20px
line-height: 1.1
font-weight: 400
font-size: 16px
line-height: 1.1
font-weight: 400
font-size: 14px
line-height: 1.1
Applying Web Font Into a Website
To apply web font into a webpage following code needs to be copied into the <head> section of the HTML document:
<link href='https://fonts.googleapis.com/css?family=Asap+Condensed:400,600|Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
Also, use the following CSS rules to specify web font familiy:
font-family:'Source Sans Pro', sans-serif;
font-family:'Asap Condensed', sans-serif;