Typography

Choosing the right blend of fonts will define whether visitors stay and explore or move on. Xidipity leverages Google fonts to produce a type style which is crisp and easy to read. The font mix supports a visual hierarchy that adheres to typographical best practices and allows the author’s creative thoughts to shine.

The importance of typography to good web design can not be overstated. So what is typography?  It is the style and appearance of printed text and the legs upon which your content will stand.

 

As Oliver Richenstein has now famously written:

 

More than 95% percent of information on the web is in the form of written language.

 

As the written word is the primary method of delivering your message, it’s essential sentences and phrases are easy to read no matter the device used to view it. The following are generally recognized typography best practices and how they are applied to Xidipity.

 

Visual Hierarchy

The most important objective of good web typography is to create a hierarchy of content that visually flows from one element to the next. Having the proper distinction between Headings, Subheadings, and Body text, properly matched font weights and styles, and including enough white space between blocks of text are all factors that promote an effortless reading experience (see below).

Ξ


Header 1

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Header 2

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Header 3

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Header 4

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Header 5

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Header 6

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Ξ


Ξ

Build a Strong Body

Your first order of business is to nail down the characteristics of the default text as this is what your visitors will spend most of their time reading. The goal is to create text that flows naturally across large paragraphs and inspiring a healthy rhythm for long stretches of reading. The most common font size for Body text is 16px or 1rem. Avoid center-aligning your blocks of text as the uneven edges on both sides will make for an unappealing sight. Instead, set the left and right margin of the text’s container to auto to achieve a more desirable effect.

 

The optimal line-height of paragraph text is between 1.25–1.5× the font-size. The height should adjust accordingly based on your chosen size.

 

Sufficient Contrast

The more visible the text, the faster users are able to scan and read it. The W3C recommends the following contrast ratios for body text and image text:

 

Small text should have a contrast ratio of at least 4.5:1 against its background. Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.

 

Keep Fonts At a Minimum

Using more than 3 different fonts makes a website look unstructured and unprofessional. In general, limit the number of font families to a minimum (two is plenty, one is often sufficient) and stick to the same ones through the entire website.

 

Xidipity Typography

Xidipity pulls its fonts from the Google font library. The core font is Roboto which is used to display content unless otherwise specified. The associative font  “Roboto Mono” is used to display preformatted text and the associative font “Roboto Condensed” is used in the menus . Line height is set to 1.4× the font size.

 

Available Fonts

  • Roboto (default)
    • Weights
      • Thin 100
      • Light 300
      • Regular 400
      • Medium 500
      • Bold 700
      • Black 900
  • Roboto Condensed
    • Weights
      • Light 300
      • Regular 400
      • Bold 700
  • Roboto Mono
    • Weights
      • Light 300
      • Regular 400
      • Medium 500
      • Bold 700
  • Lora
    • Weights
      • Regular 400
      • Bold 700
  • Architects Daughter
    • Weights
      • Regular 400

 

Architects Daughter is a secondary font used to display the BLog name. This can not be changed but can be turned off in favor of a BLog logo.  Fonts may be changed on a case by case basis by using Trailwind classes. The classes are as follows:

Font Tailwind Class
Roboto font-sans
Roboto Condensed font-condensed
Roboto Mono font-mono
Lora font-serif
Architects Daughter font-cursive

Font Colors

  • Standard text
    • #212121 / grey 900
    • contrast ratio against white: 16.10:1 (AAA)
  • Dimmed text
    • #757575 / grey 600
    • contrast ratio against white: 4.61:1 (AAA)
  • Header text
    • #000000 / black
    • contrast ratio against white: 21.00:1 (AAA)
  • Link text
    • #8E24AA / purple 600
    • contrast ratio against white: 7.04:1 (AAA)
  • Link text hover
    • #FF5722 / deep orange 500
    • contrast ratio against white: 3.16:1 (AA)

 

As it is currently configured, the link hover color does not pass the W3C AAA standard for contrast. We are conflicted as colors that do pass the standard do not provide the highlight effect we are looking for. This is something we will continue to research in the future.

 

Attribution: Typography Handbook

 

Leave a Reply

Your email address will not be published. Required fields are marked *