Components: Texts
A wee design system's library
Texts #
Text is the core of the Web, and so, it must be legible and readable at all times.
Guidelines
- To reduce loading times, use only two typefaces in one weight each: Raleway 700 and Georgia. Technical details about their use are available in the style guide, under typography.
- Put in place Raleway for headings, buttons and prominent links. Still, set
Helveticaandsans-serifas a fallback. Raleway is a Google font that you can download here. - Put in place Georgia for body text, but set
Timesandserifas a fallback. Georgia is a web-safe font, which means that it's available in most computers. - Use the browser's default typeface for code snippets.
- To ensure legibility, the minimal size for texts must be 16px or similar in relative units. Yet, allow users to display content according to their choice by setting the default font size as 100%.
Guidelines for headings
- Headings —or headlines—are visually enhanced phrases that identify a section. Write them in sentence case, avoiding the use of punctuation.
- There are five levels of headlines:
h1,h2,h3,h4andh5. To create a balanced hierarchy among them, apply a proportion of 8:9, which is a major second modular scale. It means that fromh5toh2, the font size increases by 1.125. - There is an exception, though. Each
h1is bigger by five steps to enhance its visual interest on the page. For this reason—and especially for semantic purposes—there should only be a singleh1per page. - Also, the headlines hierarchy should always be logical and sequential. For instance, an
h3can only appear after anh2.
Guidelines for body text
- A paragraph
pis the minimal expression of body text. To ease reading online, each one should contain a single idea. - Keep texts scannable. Emphasize the first piece of content after a headline that gives a sense of the upcoming section. There are two styles for this: tagline (a sentence) and intro (a paragraph). The first one follows an
h1, the latter, anh2.
Guidelines for lists
- Lists divide related content in small chunks that are easier to consume by the user. For this reason, they are a useful tool for scanning. Write them in sentence case, ending with a period when they contain a whole sentence. If they contain only fragments, there's no need for punctuation.
- Lists should be left-aligned with hanging bullets, so they don't interrupt the flow of the text. To achieve this, set list-style-position to outside.
Guidelines for quotes
- Quotes highlight testimonials with a byline. Sometimes, they can also feature an illustration or photograph of their author.
Code snippets
Headings
Use dark text (#f8f8f8) over a light-coloured area or contrasting image. Make sure that you always provide an accessible colour combination.
Here are a few examples of proper usage:
Heading one
Heading two
Heading three
Heading four
Heading five
These are their code snippets:
HTML
<h1 class="heading">Heading one</h1>
<h2 class="heading">Heading two</h2>
<h3 class="heading">Heading three</h3>
<h4 class="heading">Heading four</h4>
<h5 class="heading">Heading five</h5>
CSS
h1 {
font: 700 3.247rem/1.2 'Raleway', Helvetica, sans-serif;
}
h2 {
font: 700 1.602rem/1.2 'Raleway', Helvetica, sans-serif;
}
h3 {
font: 700 1.424rem/1.2 'Raleway', Helvetica, sans-serif;
}
h4 {
font: 700 1.266rem/1.2 'Raleway', Helvetica, sans-serif;
}
h5 {
font: 700 1.125rem/1.2 'Raleway', Helvetica, sans-serif;
}
.heading {
margin: 2.566rem 0 1.125rem;
}
Dark headings
Use light-coloured text over a dark-coloured area or contrasting image. Make sure that you always provide an accessible colour combination.
Here are a few examples of proper usage:
Heading one
Heading two
Heading three
Heading four
Heading five
These are their code snippets:
HTML
<h1 class="heading clr--accent">Heading one</h1>
<h2 class="heading clr--light">Heading two</h2>
<h3 class="heading clr--light">Heading three</h3>
<h4 class="heading clr--light">Heading four</h4>
<h5 class="heading clr--light">Heading five</h5>
CSS
h1 {
font: 700 3.247rem/1.2 'Raleway', Helvetica, sans-serif;
}
h2 {
font: 700 1.602rem/1.2 'Raleway', Helvetica, sans-serif;
}
h3 {
font: 700 1.424rem/1.2 'Raleway', Helvetica, sans-serif;
}
h4 {
font: 700 1.266rem/1.2 'Raleway', Helvetica, sans-serif;
}
h5 {
font: 700 1.125rem/1.2 'Raleway', Helvetica, sans-serif;
}
.heading {
margin: 2.566rem 0 1.125rem;
}
.clr--light {
color: #f8f8f8;
}
.clr--accent {
color: #f96c53;
}
Body text
Use dark text (#f8f8f8) over a light-coloured area. Unless the contrast is evident, avoid the use of images as a background.
Here are a couple of examples of proper usage:
Headline one
This sentence is a tagline
Headline two
This short paragraph is an intro. It gives an idea of the following content.
Here is a paragraph. This example shows the way taglines and intros follow headings.
Taglines are phrases that summarize the content of the page. They come after a heading one and don't end with a period. Intros are short paragraphs that give an idea of the following section.
Finally, paragraphs develop the content one idea at a time. They shouldn't contain more than five sentences. That allows the reader to browse through them with ease.
Headline one
This sentence is a tagline
Headline two
This short paragraph is an intro. It gives an idea of the following content.
Here is a paragraph. This example shows the way taglines and intros follow headings.
Taglines are phrases that summarize the content of the page. They come after a heading one and don't end with a period. Intros are short paragraphs that give an idea of the following section.
Finally, paragraphs develop the content one idea at a time. They shouldn't contain more than five sentences. That allows the reader to browse through them with ease.
These are their code snippets:
HTML
<p class="tagline">This sentence is a tagline</p>
<p class="intro">This short paragraph is an intro. It gives an idea of the following content.</p>
<p>Here is a paragraph. This example shows the way taglines and intros follow headings.</p>
CSS
html {
font-size: 100%;
}
@media (min-width: 600px) {
html {
font-size: 105%;
}
}
@media (min-width: 900px) {
html {
font-size: 110%;
}
}
@media (min-width: 1200px) {
html {
font-size: 120%;
}
}
p {
font: normal 1rem/1.6 'Georgia', Times, serif;
margin: 1.125rem 0;
}
.tagline {
font: italic 1.266rem/1.6 'Georgia', Times, serif;
}
.intro {
font: italic 1.125rem/1.6 'Georgia', Times, serif;
}
Dark body text
Use light-coloured text over a dark-coloured area. Unless the contrast is evident, avoid the use of images as a background.
Here are a couple of examples of proper usage:
Headline one
This sentence is a tagline
Headline two
This short paragraph is an intro. It gives an idea of the following content.
Here is a paragraph. This example shows the way taglines and intros follow headings.
Taglines are phrases that summarize the content of the page. They come after a heading one and don't end with a period. Intros are short paragraphs that give an idea of the following section.
Finally, paragraphs develop the content one idea at a time. They shouldn't contain more than five sentences. That allows the reader to browse through them with ease.
Headline one
This sentence is a tagline
Headline two
This short paragraph is an intro. It gives an idea of the following content.
Here is a paragraph. This example shows the way taglines and intros follow headings.
Taglines are phrases that summarize the content of the page. They come after a heading one and don't end with a period. Intros are short paragraphs that give an idea of the following section.
Finally, paragraphs develop the content one idea at a time. They shouldn't contain more than five sentences. That allows the reader to browse through them with ease.
These are their code snippets:
HTML
<p class="tagline bg--dark">This sentence is a tagline</p>
<p class="intro bg--dark">This short paragraph is an intro. It gives an idea of the following content.</p>
<p class="bg--dark">Here is a paragraph. This example shows the way taglines and intros follow headings.</p>
CSS
html {
font-size: 100%;
}
@media (min-width: 600px) {
html {
font-size: 105%;
}
}
@media (min-width: 900px) {
html {
font-size: 110%;
}
}
@media (min-width: 1200px) {
html {
font-size: 120%;
}
}
p {
font: normal 1rem/1.6 'Georgia', Times, serif;
margin: 1.125rem 0;
}
.tagline {
font: italic 1.266rem/1.6 'Georgia', Times, serif;
}
.intro {
font: italic 1.125rem/1.6 'Georgia', Times, serif;
}
.bg--dark {
background-color: #2f2f2f;
color: #f8f8f8;
}
Lists
Use dark text (#f8f8f8) over a light-coloured area. Unless the contrast is evident, avoid the use of images as a background.
Here are a couple of examples of proper usage:
Unordered lists
There are three kinds of paragraph in this design system:
- A regular paragraph
- An intro
- A tagline
Ordered lists
Here is their logical order:
- A tagline follows a heading 1.
- An intro follows a heading 2.
- Paragraphs follow an intro.
Unordered lists
There are three kinds of paragraph in this design system:
- A regular paragraph
- An intro
- A tagline
Ordered lists
Here is their logical order:
- A tagline follows a heading 1.
- An intro follows a heading 2.
- Paragraphs follow an intro.
These are their code snippets:
HTML
<p>There are three kinds of paragraph in this design system:</p>
<ul>
<li>A regular paragraph</li>
<li>An intro</i>
<li>A tagline</li>
</ul>
<p>Here is their logical order:</p>
<ol>
<li>A tagline follows a heading 1.</li>
<li>An intro follows a heading 2.</i>
<li>Paragraphs follow an intro.</li>
</ol>
CSS
html {
font-size: 100%;
}
@media (min-width: 600px) {
html {
font-size: 105%;
}
}
@media (min-width: 900px) {
html {
font-size: 110%;
}
}
@media (min-width: 1200px) {
html {
font-size: 120%;
}
}
p, li {
font: normal 1rem/1.6 'Georgia', Times, serif;
margin: 1.125rem;
}
ul {
list-style-type: square;
padding-left: 0;
list-style-position: outside;
}
ol {
padding-left: 0;
list-style-position: outside;
}
Dark lists
Use light-coloured text over a dark-coloured area. Unless the contrast is evident, avoid the use of images as a background.
Here are a couple of examples of proper usage:
Unordered lists
There are three kinds of paragraph in this design system:
- A regular paragraph
- An intro
- A tagline
Ordered lists
Here is their logical order:
- A tagline follows a heading 1.
- An intro follows a heading 2.
- Paragraphs follow an intro.
Unordered lists
There are three kinds of paragraph in this design system:
- A regular paragraph
- An intro
- A tagline
Ordered lists
Here is their logical order:
- A tagline follows a heading 1.
- An intro follows a heading 2.
- Paragraphs follow an intro.
These are their code snippets:
HTML
<p class="bg--dark">There are three kinds of paragraph in this design system:</p>
<ul class="bg--dark">
<li>A regular paragraph</li>
<li>An intro</i>
<li>A tagline</li>
</ul>
<p class="bg--dark">Here is their logical order:</p>
<ol class="bg--dark">
<li>A tagline follows a heading 1.</li>
<li>An intro follows a heading 2.</i>
<li>Paragraphs follow an intro.</li>
</ol>
CSS
html {
font-size: 100%;
}
@media (min-width: 600px) {
html {
font-size: 105%;
}
}
@media (min-width: 900px) {
html {
font-size: 110%;
}
}
@media (min-width: 1200px) {
html {
font-size: 120%;
}
}
p, li {
font: normal 1rem/1.6 'Georgia', Times, serif;
margin: 1.125rem;
}
ul {
list-style-type: square;
padding-left: 0;
list-style-position: outside;
}
ol {
padding-left: 0;
list-style-position: outside;
}
.bg--dark {
background-color: #2f2f2f;
color: #f8f8f8;
}
Quotes
Use dark text (#f8f8f8) over a light-coloured area (#fdfdfd). Avoid the use of images as a background.
Here is an example of proper usage:
“The quotation marks at the very beginning of the paragraph must sit outside the main block of text so it doesn’t disrupt the flow, or the rhythm, of it.”
These are their code snippets:
HTML
<figure class="quote">
<blockquote>
<p>“The quotation marks at the very beginning of the paragraph must sit outside the main block of text so it doesn’t disrupt the flow, or the rhythm, of it.”</p>
</blockquote>
<figcaption> —<a href="https://betterwebtype.com/web-typography-book/">Matej Latin</a></figcaption>
</figure>
CSS
figcaption {
font-size: 1rem;
font-style: italic;
margin-bottom: 1.125rem;
}
.quote {
background-color: #ffffff;
border-radius: 3px;
box-shadow: 0 .25rem 2rem #dddddd;
font-size: 1.125rem;
margin: 2.566rem -3rem;
padding: 1rem 3rem;
}
@media (min-width: 600px) {
.quote {
margin: 2.566rem 0;
}
}
.quote p {
text-indent: -.5rem;
}
a:link, a:visited {
background-color: #fcdad4;
border-radius: 3px;
color: #2f2f2f;
display: inline-block;
font: normal 1rem/1.6 'Georgia', Times, serif;
padding: 0 .25rem;
transition: all .4s ease-in;
}
a:hover, a:visited:hover, a:focus {
background-color: #fba798;
text-decoration: none;
}
Sources of inspiration
- 5 Keys to Accessible Web Typography—Matej Latin
- Blockquote—Bolt Design System
- Large Quote—Vattenfall
- Lists—Material Design
- Style Guide—Chris Burnell
- Typography—Biings Design System
- Typography—Comet Design System
- Typography—Morningstar Design System
- Typography in Design Systems—Nathan Curtis