As a lot of data on the internet is consumed in text form, that way, web typography becomes a vital element for the success of website or online business. Web designers need to devise a clear font and typography strategy to put across the right message to the right audience.

We will begin our discussion with the key technical terms of typography and web fonts. These include:

• Font family: These are identical fonts that differ in stroke thickness and use of italics.
• Typography: This is all about designing text for the web, and includes font color, character spacing, alignment, size and line spacing.
• Font and typeface: It refers to a set of letters, symbols and punctuation marks of similar design.
• Style guide: This includes typography, color choices and writing style to create a consistent experience for the website visitors.

Reinforcing the structure of displayed content

Using too many fonts on website can result in a negative visitor experience, so ideally, your website should not have more than four types of fonts. The font should fit the personality of your website and tone of your message. Use fonts of different sizes for heading, subheadings and paragraphs to reinforce the structure of the content as the reader moves from top to bottom, or sideways. Some designers prefer to use serif fonts for headings, and non-serif fonts for paragraphs.

White space for breathability in reading

Attention needs to be paid to the alignment and spacing of text that can be controlled with CSS. One also needs to provide breathing room in the web content by maintaining white spaces. Use generous line height spacing, intersperse content with graphics and lists, and spread out blocks of text to improve the readability of your content.

Setting font properties with CSS

Set all the font properties using CSS and globally apply them on the entire webpage to make the font color compatible with a global background color. Serif and sans fonts are commonly used for webpages as they render well on most devices and their capability to fall back to default web safe fonts make them the right choice for designers. Web safe fonts are supported by the majority of operating systems and browsers. These include:

• Web safe serif fonts such as Time New Roman and Georgia
• Web safe sans-serif fonts, such as Verdana, Tahoma and Arial
• Web safe specialty fonts, such a Papyrus and Copperplate
• Web safe mono space fonts, such as Lucida Sans Typewriter and Courier New

Mono space fonts that consume same amount of horizontal space are best suited to display a block of computer programming code while descriptive styles are commonly used for logos, page titles and navigation menu labels.

Building a font stack

However, all browsers can’t render many types of fonts, so one needs to build a font stack using font-family CSS property. Typically, a font stack includes the below three elements:

• A web font
• A fallback generic font and
• Generic font family for the browser to select font from the available ones.

A font stack may look like:

P { font-family: “Open Sans”, Calibri, sans-serif; }

In case the web browser can’t render Open Sans, it will try Calibri which is supported by almost all devices. However, it will open sans-serifs for the people using unsupported devices.

Web fonts are of two types:

Self-hosted fonts

These are hosted along with your website files. A CSS at-rule is used to load the web fonts already existing on your server.

CDN-hosted fonts

We have below three services that host fonts on public facing content delivery system:

• Google Fonts: It includes 700 font families
• Typekit: It comes bundled with Adobe Creative Suite and includes over 1000 font families
• Adobe Eagle Web Fonts: This free Adobe service includes 500 font families

Web Typography and HTML Elements

It is important to know how different HTML elements impact the appearance of webpage text. We have below HTML elements that come into play when it comes to web typography:

• Text-Grouping Elements: These include paragraphs, headings, lists and tables.
• Text-Level Semantics: These elements are used on the text inside a parent text-grouping element. These are used for their semantic meaning, not for the purpose of visual presentation.

Text Styling

This includes the use of various font properties like font-style, font-weight, line-height, font-variant and font size. These elements can be used for paragraph styling to render the paragraphs in a particular style.

Other text styling properties include:

• Text-decoration: It is often used for underling the text and its default value is none.
• Text-shadow: This styling property is used to add shadow behind the selected text. The values need to be ordered from horizontal offset to vertical offset and then blur to color.
• Text-transform: This property is used to transform the way the selected text is used.

Working on these web designing elements is not easy, and getting them right is crucial to convey the right message to your audience in a right manner. So, one needs to master one’s skills in web fonts, typography and website designing to put the right message across.