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.