Typography

Stanford Sites and Stanford Sites Intranet use Stanford's primary fonts, Source Sans 3 and Source Serif 4 in accordance with Stanford's brand guidelines. 

One of our principal goals is to create text content that is as easy to read as possible. Below find some of our guiding principles and some examples of type styles on Stanford Sites and Stanford Sites Intranet.

Ideal line length

Studies show that individual lines of continuous text should be around 75 characters (letters) long or less. This gives the reader's eyes ease when jumping from the end of one line to the beginning of the next. With that in mind, we have designed widths for our text that adhere to that requirement.

All this being said, we have elected to implement these ideal line lengths through code that does not rule the overall width of the column, but rather, restricts character limits per line on the text styles themselves. 

This decision, makes for beautiful "rags" (the weaving left side of copy on left-aligned text), and more importantly, column widths for centered text that feels proportional to the text size itself (and also makes for a beautiful typographic display). 

Examples of styles available through the text editor

Normal Text style

The Normal Text style looks like this. This is the default text style in the Text Area Paragraph, your standard paragraph text style for the body of text throughout long lengths of text content. We designed this paragraph text style to be easy to read from a comfortable distance between your eyes to your screen—the font size is bigger than in the past, and the line spacing is wider, to make it easy for your eyes to track from the end of one line to the beginning of the next line.

Intro Text Style

Intro Text looks like this. The Intro Text style is found under the "Styles" menu in the editing tool. We recommend you use the Intro Text style to begin the text content on any page that begins with a Text Area Paragraph, like Example Page 2. This increases the ease of scanning content for your users.

Headings

Here are the heading styles [Heading 2-4]. The first set of headings is the default styles, the second set of headings is the styles with links. 

This is a heading 2 

This is a heading 3

This is a heading 4

This is a heading 5

This is a linked heading 2 style

This is a linked heading 3

This is a linked heading 4

This is a linked heading 5

Links

Normal text link

Action Link

Button Link 

Big button 

Secondary button

Block Quote

"The Quote style can be found in the "Normal" menu in the editing tool. Use the quote style... for quotes!"

Splash style

This is a style you can use for the text that you want to over-emphasize. We recommend using this style for short lengths of copy, like big numbers (seen below) or big words in strings of 2-3. Overuse of this style can make your page difficult to read and parse visually. 

Drop Cap First Letter style

Sed libero. Vivamus consectetuer hendrerit lacus. Phasellus magna. Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Fusce a quam.