Typography & The Importance of Print

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.

Typography & The Importance of Print Image #010

 

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.

 

Oliver Richenstein famously commented:

 

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

It is very important to choose a core font which displays well as this is what your visitors will spend most of their time viewing. The goal is to create a reading experience which 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 and the optimal line height is between 1.25 – 1.5× of the font-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

The design goal is to keep the number of different fonts to a minimum. Typical designs include the use of content header fonts which may or may not be the same as the content font with the addition of an additional font for headlines.  In general, limit the number of font families to a minimum and stick to the same fonts throughout the entire website.

 

Xidipity Typography

Xidipity pulls its fonts from the Google font library. Roboto is the default content font and Xidipity leverages all of its variants. The line height is set to 1.4× the font size.

 

Available Fonts

  • Roboto
    • Sans (default)
      • Weights
        • Thin 100
        • Light 300
        • Regular 400
        • Medium 500
        • Bold 700
        • Black 900
    • Condensed (menus)
      • Weights
        • Light 300
        • Regular 400
        • Bold 700
    • Mono (template code)
      • Weights
        • Light 300
        • Regular 400
        • Medium 500
        • Bold 700
    • Serif (Roboto Slab)
      • Weights
        • Thin 100
        • Light 300
        • Regular 400
        • Bold 700
  • Cursive (Kalam)
    • Weights
      • Light300
      • Regular 400
      • Bold 700

 

In addition to Roboto and Kalam, Xidipity uses Kaushan Script as branding to display the blog name. These fonts may be assigned to content on a case by case basis by using the following Trailwind classes.

Font Tailwind Class
Roboto font-sans
Roboto Condensed font-condensed
Roboto Mono font-mono
Roboto Slab font-serif
Kalam font-cursive

 

Font Samples

Roboto
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Roboto Condensed
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Roboto Mono
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Roboto Slab
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Kalam
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 

Attribution: Typography Handbook

 

 

Leave a Reply

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