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 headers as well as 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
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=Source+Sans+Pro' rel='stylesheet' type='text/css'>
Also, use the following CSS rules to specify web font familiy:
font-family:'Source Sans Pro', sans-serif;