Typography
Fonts
The following fonts are recommended for use on Stanford websites. Our primary fonts are Source Sans Pro and Source Serif Pro.
Source Sans Pro
Source Sans Pro is our primary sans-serif font. It should be used in headings and body text as the primary sans-serif font on your website. When Sources Sans Pro is not available, we have a fallback sans-serif font stack with Helvetica Neue, Helvetica and Arial.
The quick brown fox jumps over the lazy dog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum consectetur mi, non accumsan sapien porttitor in. Cras dapibus non mauris eu lacinia. Vestibulum congue, nisl a hendrerit egestas, erat eros vulputate sem, sit amet ullamcorper ligula magna sed est. Donec leo orci, laoreet id faucibus vitae, rhoncus sit amet diam.
Available Variants
How to Use
Use the Decanter sans-serif font stack by applying the @sans SCSS mixin or using the $su-font-sans SCSS variable, or by adding the class name .su-sans to your element.
Source Serif Pro
Source Serif Pro is our primary serif font. It should be used in headings and body text as the primary serif font on your website. When Sources Sans Pro is not available, we have a fallback serif font stack with Georgia, Times and Times New Roman.
The quick brown fox jumps over the lazy dog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum consectetur mi, non accumsan sapien porttitor in. Cras dapibus non mauris eu lacinia. Vestibulum congue, nisl a hendrerit egestas, erat eros vulputate sem, sit amet ullamcorper ligula magna sed est. Donec leo orci, laoreet id faucibus vitae, rhoncus sit amet diam.
Available Variants
How to Use
Use the Decanter serif font stack by applying the @serif SCSS mixin or using the $su-font-serif SCSS variable, or by adding the class name .su-serif to your element.
Roboto Slab
Roboto Slab is a secondary font. It should only be used as a display font - it is not appropriate for blocks of text.
The quick brown fox jumps over the lazy dog
Available Variants
How to Use
Use the Decanter slab font stack by applying the @slab SCSS mixin or using the $su-font-slab SCSS variable, or by adding the class name .su-slab to your element.
Kalam (Handwriting)
Kalam is a secondary font. It should only be used as a display font - it is not appropriate for blocks of text.
The quick brown fox jumps over the lazy dog
Available Variants
How to Use
Use the Decanter handwriting font stack by applying the @handwriting SCSS mixin or using the $su-font-handwriting SCSS variable, or by adding the class name .su-handwriting to your element.
Noto Sans Devanagari (Sanskrit) Subset
Noto Sans should only be used when Sanskrit font support is needed.
How to Use
Use the Decanter handwriting Sanskrit font by applying the @sanskrit SCSS mixin or using the $su-font-sanskrit SCSS variable, or by adding the class name .su-sanskrit to your element.
Typography Styles
Default typography styling for base HTML typography elements, including paragraphs and headings. Also includes special type treatment classes such as splash font and lead font.
Paragraph Font
Default body paragraph font uses Source Sans Pro. Font size is 19px for the 2xl breakpoint, 18px for md, lg and xl breakpoints and 16px for xs and sm breakpoints.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum consectetur mi, non accumsan sapien porttitor in. Cras dapibus non mauris eu lacinia. Vestibulum congue, nisl a hendrerit egestas, erat eros vulputate sem, sit amet ullamcorper ligula magna sed est. Donec leo orci, laoreet id faucibus vitae, rhoncus sit amet diam.
Splash Font
Extra large display font style for hero area.
Lorem ipsum dolor sit amet. Nullam vestibulum consectetur mi.
How to Use
Apply this font style by using the @font-splash SCSS mixin, or by adding the class name .su-font-splash to your element.
Display Type A
Display font style (also used for default Decanter h1 headings). Could be applied to other elements.
Lorem ipsum dolor sit amet. Nullam vestibulum consectetur mi.
How to Use
Apply this font style by using the @type-a and @types SCSS mixins together, or by adding the class name .su-type-a to your element. If you import the Decanter core styles in your project, default h1 headings already takes on this style.
Display Type B
Display font style (also used for default Decanter h2 headings). Could be applied to other elements.
Lorem ipsum dolor sit amet. Nullam vestibulum consectetur mi.
How to Use
Apply this font style by using the @type-b and @types SCSS mixins together, or by adding the class name .su-type-b to your element. If you import the Decanter core styles in your project, default h2 headings already takes on this style.
Display Type C
Display font style (also used for default Decanter h3 headings). Could be applied to other elements.
Lorem ipsum dolor sit amet. Nullam vestibulum consectetur mi.
How to Use
Apply this font style by using the @type-c and @types SCSS mixins together, or by adding the class name .su-type-c to your element. If you import the Decanter core styles in your project, default h3 headings already takes on this style.
Display Type D
Display font style (also used for default Decanter h4 headings). Could be applied to other elements.
Lorem ipsum dolor sit amet. Nullam vestibulum consectetur mi.
How to Use
Apply this font style by using the @type-d and @types SCSS mixins together, or by adding the class name .su-type-d to your element. If you import the Decanter core styles in your project, default h4 headings already takes on this style.
Display Type E
Display font style (also used for default Decanter h5 headings). Could be applied to other elements.
Lorem ipsum dolor sit amet. Nullam vestibulum consectetur mi.
How to Use
Apply this font style by using the @type-e and @types SCSS mixins together, or by adding the class name .su-type-e to your element. If you import the Decanter core styles in your project, default h5 headings already takes on this style.
Display Type F
Display font style (also used for default Decanter h6 headings). Could be applied to other elements.
Lorem ipsum dolor sit amet. Nullam vestibulum consectetur mi.
How to Use
Apply this font style by using the @type-f and @types SCSS mixins together, or by adding the class name .su-type-f to your element. If you import the Decanter core styles in your project, default h6 headings already takes on this style.
Subheading
Font style used for subheadings.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
How to Use
Apply this font style by using the @subheading SCSS mixin, or by adding the class name .su-subheading to your element.
Intro Text
Font style used for intro text/lede/teaser.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
How to Use
Apply this font style by using the @intro-text SCSS mixin, or by adding the class name .su-intro-text to your element.
Quote Text
Font style used for quotes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
How to Use
Apply this font style by using the @quote-text SCSS mixin, or by adding the class name .su-quote-text to your element.
Caption
Font style used for captions for images, videos, charts, etc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
How to Use
Apply this font style by using the @caption SCSS mixin, or by adding the class name .su-caption to your element.
Credits
Font style used for credits for images, video, charts, etc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
How to Use
Apply this font style by using the @credits SCSS mixin, or by adding the class name .su-credits to your element.
Big Paragraph
Font style that is slightly larger than the default body font at non-mobile breakpoints.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
How to Use
Apply this font style by using the @big-paragraph SCSS mixin, or by adding the class name .su-big-paragraph to your element.
Small Paragraph
Font style that is slightly smaller than the default body font at non-mobile breakpoints.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
How to Use
Apply this font style by using the @small-paragraph SCSS mixin, or by adding the class name .su-small-paragraph to your element.