Jump to: Default Paragraph | Callout | Disclaimer | Lead | Section Header | Section Intro
Paragraph text makes up most of the text content on a page.
Default Paragraph
Default paragraph text is used for longer blocks of text.
Example
Through our seven schools, we provide you with opportunities for in-depth study in a range of subjects and collaboration across disciplines. We offer more than 90 fields of study and 1,500 courses. With our interdisciplinary approach, you will be able to fully explore your interests and follow your passions.
Design Considerations
The default paragraph style is a sans-serif font which is easy to read, especially at smaller sizes that are used in other paragraph style variations. This style of text allows the user to focus on the content that they are reading. Because the style isn’t distracting, default paragraphs allow other text styles to stand out.
To maintain accessibility standards, when default style paragraph text is placed on a dark colored background, the text color will change to white.
Best Practices
- Add bold or italic styles to paragraphs to highlight sections of text.
- Don’t use the default paragraph style for headings, important callouts, etc.
- Make sure to break up long sections of default style paragraph text with headings and other paragraph styles.
HTML
<p>Through our seven schools, we provide you with opportunities for in-depth study in a range of subjects and collaboration across disciplines. We offer more than 90 fields of study and 1,500 courses. With our interdisciplinary approach, you will be able to fully explore your interests and follow your passions.</p>CSS
p {
font-size: 1.2rem;
margin: 0 0 1em;
}Callout
A callout brings attention to important or related content on a page.
Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum, arcu ut consequat blandit, tellus turpis mattis lorem, sit amet convallis ligula massa eu magna.
Design Considerations
Text is contained within a light turquoise box. The turquoise is a tint of our light turquoise brand color which is not used anywhere else within the theme. This will allow the callout to standout when used within a page. A 1px medium turquoise border contains the callout. Read more information on border styling foundations.
Best Practices
- Use sparingly so that a callout attracts a user’s attention.
HTML
<p class="callout">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum, arcu ut consequat blandit, tellus turpis mattis lorem, sit amet convallis ligula massa eu magna.</p>CSS
.callout {
padding: 0.9rem 1rem 0.9rem;
margin-bottom: 1em;
background: #d6ebeb;
border: 1px solid #9cc;
}Disclaimer
Disclaimer text is used for legal text, disclaimers or footnotes.
Example
This is not a complete list of all academic offerings; for a comprehensive list of majors and minors, please visit the WashU website.
Design Considerations
The disclaimer text size is italic and smaller than the size of default paragraph text to help set it apart from other text content on a page.
To maintain accessibility standards, when disclaimer text is placed on a dark colored background, the text color will change to white.
Best Practices
- It is recommend to keep disclaimer paragraphs to a maximum of a few sentences.
HTML
<p class="disclaimer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elementum, arcu ut consequat blandit, tellus turpis mattis lorem, sit amet convallis ligula massa eu magna.</p>CSS
.disclaimer {
font-size: 1rem;
font-style: italic;
line-height: 1.333;
}Lead
Lead paragraph text introduces a page or a section of content.
Example
Our mission is to discover and disseminate knowledge, and to protect the freedom of inquiry through research, teaching and learning.
Design Considerations
Lead paragraph text is a lighter font weight (300) and a larger text size (1.728rem/27.65px) than default paragraph text. It is the only font style that uses the lighter font weight. This creates a visual emphasis on this text style.
To maintain accessibility standards, when lead style test is placed on a dark colored background, the text color will change to white.
Best Practices
- It is recommended that lead paragraph text be kept to a maximum of a few sentences.
- Don’t use the lead paragraph style for text that is not either the first paragraph of a page or section of content.
HTML
<p class="lead">Our mission is to discover and disseminate knowledge, and to protect the freedom of inquiry through research, teaching and learning.</p>CSS
.lead {
font-size: 1.44rem;
font-weight: 300;
line-height: 1.333;
margin: 0 0 1em;
}
@media screen and (min-width: 37em) {
.lead {
font-size: 1.728rem;
}
}Section Header
A section header is a distinctive way to introduce a section of content.
Example
We are Washington University in St. Louis
Design Considerations
The section header is centered and uses the font Libre Baskerville to give it more visual distinction. It is the only header style that uses this font.
The section header is a larger font size than the section intro so that it stands out when they are used together.
To maintain accessibility standards, when a section header is placed on a dark colored background, the text color will change to white.
Best Practices
- Keep section headers short and concise.
- Use sparingly so that a section header attracts a user’s attention.
- Use in conjunction with the section intro paragraph style.
HTML
<p class="section-heading">Lorem Ipsum</p>CSS
.section-heading {
font-family: 'Libre Baskerville', 'Times New Roman', serif;
font-weight: 400;
margin: 0 auto 0.5em;
font-size: 1.4375rem;
text-align: center;
@media screen and (min-width: 37em) {
font-size: 1.5rem;
}
@media screen and (min-width: 61.5em) {
max-width: 32em;
font-size: 1.875rem;
}
}Section Intro
A section intro is a distinctive way to introduce a section of content.
Example
We are a community where you can be an individual and achieve exceptional things. We are committed to learning and exploration, to discovery and impact.
Design Considerations
The section intro is centered and uses the font Libre Baskerville to give it more visual distinction. It is the only paragraph style that uses this font.
To maintain accessibility standards, when a section intro is placed on a dark colored background, the text color will change to white.
Best Practices
- It is recommended that section intro text be kept to a maximum of a few sentences.
- Use sparingly so that a section intro attracts a user’s attention.
- Use in conjunction with the section header paragraph style.
HTML
<p class="section-intro">Lorem ipsum</p>CSS
.section-intro {
font-family: 'Libre Baskerville', 'Times New Roman', serif;
margin: 0 auto 1.5em;
font-size: 1rem;
text-align: center;
@media screen and (min-width: 41em) {
max-width: 53.3em;
font-size: 1.125rem;
}
}