• Font Family
  • System
  • Import
  • Include
• Font Weight
• Font Size
• Font Decoration
• Icons
• Emojis

Alright, let’s deal with the typography… I always include a typography section in the styles right after any resets. On my personal website, I use a font just because of it’s history and creator. It’s called “Computer Modern”₁ and was created by Donald Knuth₂ who wrote The Art of Computer Programming₃. Otherwise, I think the most important aspect of typography is readability. I could dig deep here on why serif fonts provide easier readability on small screens or why Helvetica has dominated the design landscape, but I’ll leave that research up to you because I want these pages to just function as an operational reference.

just some notes to get started:

• I like system fonts
• I prefer variable fonts
• I like to keep a consistent font usage across a site
• how to enforce that and offer the site three or four different fonts without loading them into every page?

Font Family

System Fonts

This theme includes the Bootstrap “native font stack” or “system font stack” for optimum text rendering on every device and OS. ₄ ( system-ui, -apple-system, BlinkMacSystemFont,”Segoe UI”,Roboto, “Helvetica Neue”, Arial, “Noto Sans”,”Liberation Sans”,sans-serif,”Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”, “Noto Color Emoji” ) Using system fonts does not create any additional weight on the webpages, so I’ve included these system font styles as classes which can be added to any block using Block -> Advanced -> Additional CSS class(es).

Import Fonts

Adding Additional Fonts

One of the easiest ways to find a new font is to either match an existing logo or find a font that is a suitable companion to an existing graphic. Including non system fonts can be done by either remotely including the font or including the font files in the theme. I like to use either Google Fonts or Adobe Fonts for including remote fonts because of their selection, reliability and performance_5,6. I wanted to make it easy for site editors to configure additional fonts to their website, so I’ve included a setting that will allow them to do. The fields to set custom fonts are available in the Theme Settings page.

Font Family Recommendations

I recommend using variable fonts so that they scale the best between screen sizes and formatting. I also recommend only using two imported font families with a max of four font weights for each. This keeps the external requests to a minimum and helps the performance of your website. Here are two font families ( Lato & Inter ) imported from Google Fonts with their associated classes.

Decorative Font Families

Occasionally it’s nice to include an decorative, ornamental, handwriting, or display font for a particular page. The best way to do so it to only include the link the the font in the HTML of the page in which it is being displayed. The code below is included as an HTML block in this page , includes the link to the imported fonts and inline css which allows it to use the fonts for the following headers.

<link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet"><style>.monoton{font-family:'Monoton', cursive;}</style>

Monoton Font

<link href="https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap" rel="stylesheet"><style>.bungee{font-family:'Bungee Shade', cursive;}</style>

Bungee Shade Font

<link rel="stylesheet" href="https://use.typekit.net/fvg5ora.css">
<style>.mati{font-family: mati, sans-serif;}.didot{font-family: aw-conqueror-didot, serif;}</style>

Mati Typekit Font

AW Conqueror Std Didot Font

Include Fonts

Any set of font files ( woff, otf, ttf, eof) can be included in the theme in css/fonts. I prefer to include fonts rather than import them because there are no outside calls from the website. There are not settings for included fonts and the CSS will need to be added directly to the stylesheet (style.css).

Font Licensing

I should make a note here about licensing, because I have discussions on numerous occasions after a client sent me a copy of a font that some other designer packaged in their graphics or whatnot. Here’s the deal… in order to use fonts online, they have to be licensed. The software that you or a designer used to create the graphic also paid for that license, but it doesn’t include displaying them on your website. I’m happy to either pay that font licensing for you and pass along the costs or suggest some alternative fonts.

Font Weight

Controlling the font weight can be done using classes in the Gutenberg editor under Block -> Advanced -> Additional CSS class(es)

<span class="fs-5 fw-bold">Bold text.</span><br />
<span class="fs-5 fw-bolder">Bolder weight text (relative to the parent element).</span><br />
<span class="fs-5 fw-normal">Normal weight text.</span><br />
<span class="fs-5 fw-light">Light weight text.</span><br />
<span class="fs-5 fw-lighter">Lighter weight text (relative to the parent element).</span><br />
<span class="fs-5 fst-italic">Italic text.</span><br />
<span class="fs-5 fst-normal">Text with normal font style</span><br />

Font Size

Font size can be controlled by setting the heading in Gutenberg or adding additional classes to the paragraph. The display headings are controlled by the class .display-1, .display-2 etc.. and the font sizes by .fs-1, .fs-2 etc…

<p class="display-1">Display</p>
<p class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</p>
<p class="display-4">Display 4</p>
<p class="display-5">Display 5</p>
<p class="display-6">Display 6</p>

<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Font Decoration

Font decoration can be achieved using both the Gutenberg editor, inline styles, and additional classes.

• .mark will apply the same styles as <mark>.
• .small will apply the same styles as <small>.
• .text-decoration-underline will apply the same styles as <u>.
• .text-decoration-line-through will apply the same styles as <s>.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Alignment

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>

Color

<span class="text-primary">.text-primary</span><br />
<span class="text-secondary">.text-secondary</span><br />
<span class="text-success">.text-success</span><br />
<span class="text-danger">.text-danger</span><br />
<span class="text-warning bg-dark">.text-warning</span><br />
<span class="text-info bg-dark">.text-info</span><br />
<span class="text-light bg-dark">.text-light<</span><br />
<span class="text-dark">.text-dark</span><br />
<span class="text-body">.text-body</span><br />
<span class="text-muted">.text-muted</span><br />
<span class="text-white bg-dark">.text-white</span><br />
<span class="text-black-50">.text-black-50</span><br />
<span class="text-white-50 bg-dark">.text-white-50</span><br />

Icons

The DWP theme includes the Bootstrap Icons which can be used as an icon font with classes or as inline SVG.

/** using icon classes **/
<i class="bi bi-x-diamond-fill"></i>

/** using inline SVG **/
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-diamond-fill" viewBox="0 0 16 16"><path d="M9.05.435c-.58-.58-1.52-.58-2.1 0L4.047 3.339 8 7.293l3.954-3.954L9.049.435zm3.61 3.611L8.708 8l3.954 3.954 2.904-2.905c.58-.58.58-1.519 0-2.098l-2.904-2.905zm-.706 8.614L8 8.708l-3.954 3.954 2.905 2.904c.58.58 1.519.58 2.098 0l2.905-2.904zm-8.614-.706L7.292 8 3.339 4.046.435 6.951c-.58.58-.58 1.519 0 2.098l2.904 2.905z"/>
</svg>

The icons are also formatted to play nicely with other bootstrap elements such as forms, headings, and buttons.

Inline text

Example link text

Button Button Button

Emojis

Emojis can be used with Unicode. They will be displayed differently across different browsers and operating systems. The easiest way to deal with unicode and Gutenberg is to copy and paste the browser compatible emojis into a conversion tool such as https://r12a.github.io/app-conversion/ and include the decimal or hex NCRs.

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

References:

1. Computer Modern Font – https://en.wikipedia.org/wiki/Computer_Modern
2. Donald Knuth – https://en.wikipedia.org/wiki/Donald_Knuth
3. The Art of Computer Programming – https://en.wikipedia.org/wiki/The_Art_of_Computer_Programming
4. Bootstrap Reboot Native Font Stack – https://getbootstrap.com/docs/5.0/content/reboot/
5. Adobe Fonts – https://fonts.adobe.com/
6. Google Fonts – https://fonts.google.com/
7. Bootstrap Icons – https://icons.getbootstrap.com/
8. Unicode Emoji List – https://unicode.org/emoji/charts/full-emoji-list.html