Typography

Typeface

Pelican’s typeface is Public Sans, designed by United States Web Design System. It is also a variable font, so the download sizes are smaller. Because Public Sans is available from Google Fonts, it’s ready-to-use in Figma and easy to deploy to a web product.

Headings

Headings indicate document content structure and become navigation tools for assistive technology. See Headings in Accessibility for information.

Paragraphs

Pelican uses 16px, the browser default, as the base font size. This is considered the best starting point for web readability. Paragraph tags <p> hold paragraphs. A paragraph can be one or more sentences. Spacing below a paragraph is equal to 16px in Pelican. That’s why sentences only have space below them when they’re within lines of text. If you need to remove the margin from a paragraph, add the class mb-0.

<p>Pelican uses 16px, the browser default, as the base font size. This is considered the best starting point for web readability.</p>
<p>Paragraph tags `<p>` hold paragraphs. A paragraph can be one or more sentences. Spacing below a paragraph is equal to 16px in Pelican. That’s why sentences only have space below them when they’re not within other lines of text. If you need to remove the margin from a paragraph, add the class `mb-0`.</p>

Strong and Em

Strong tags <strong> and em tags <em> allow visual and semantic expressiveness in text. Using these tags affects the semantics of the text within. They also communicate this expressiveness for assistive technology users.

Visually bolder and audibly bolder
italicized and emphasized audibly
Visually bold text without any semantic meaning

<strong>Visually bolder and audibly bolder</strong>
<em>italicized and emphasized audibly</em>
<span class="fw-bold">Visually bold text without any semantic meaning</span>

Small

Small tags <small> allow text to be presented in smaller size in a logical content parent.
A common use of this within Pelican is helper text under a form field.

Small tags `<small>` allow text to be presented in smaller size in a logical content parent. 
<small>A common use of this within Pelican is helper text under a form field.</small>

Lists

Lists are used to present elements in a collection. These may be bullet points or a numeric list. When writing lists, try to do the following when possible:

• Try to keep the same approximate line lengths and phrasing.
• Try to avoid repeating the same word at the beginning of each list item.
• Introduce lists with a clear, descriptive sentence.
• Do not overuse lists in content. Overusing lists will diminish their importance.

Use Ordered lists when the order of items is important.

1. Define the Problem
2. Conduct Research
3. Brainstorm and Conceptualize
4. Create Prototype
5. Build Product
6. Product Analysis
7. Troubleshooting

<ol>
  <li>Define the Problem</li>
  <li>Conduct Research</li>
  <li>Brainstorm and Conceptualize</li>
  <li>Create Prototype</li>
  <li>Build Product</li>
  <li>Product Analysis</li>
  <li>Troubleshooting</li>
</ol>

Use Unordered lists when the order of items does not matter.

• Pizza
• Tacos
• Burgers
• Pie
• Ice Cream

<ul>
  <li>Pizza</li>
  <li>Tacos</li>
  <li>Burgers</li>
  <li>Pie</li>
  <li>Ice Cream</li>
</ul>

Use Span for Inline Style

Span tags <span> allow local text changes without affecting semantics. We can style words in this sentence to be red without affecting the semantics. This text can be bolder without affecting the semantics. This text can be italicized without affecting the semantics.

Span tags `<span>` allow local text changes without affecting semantics. We can style <span class="text-danger">words in this sentence to be red</span> without affecting the semantics. This text can be <span class="font-weight-bold">bolder</span> without affecting the semantics. This text can be <span class="font-italic">italicized</span> without affecting the semantics. 

Resources

• Bootstrap Documentation - Typography