Understanding Typography

Typography plays an important role in setting the tone, theme, and message of a website.

Typography is the art and technique of arranging type. It involves the thoughtful and deliberate selection of typefaces, point size, line length, leading, tracking, kerning, color and any element that can affect a design. Readability is primarily the concern of the typographer or information designer. In websites, consistency is key in the use of typography.

Choosing a typeface can be done by virtually anyone—simply click a name in a dropdown list. And yet, choosing the right typeface is one of the most deliberated decisions of the design process.

Typography designers dedicate their careers to crafting letterforms. In those small shapes, experts balance things like emotion and neutrality, personality and practicality, legibility and flexibility. Selecting a typeface for a particular design comes with a long list of considerations.

Traditionally, graphic designers have always studied the fundamentals of typography in terms of print design. But as the role of the designer now spans across all types of digital mediums, typography is a bigger beast to tame.

The Challenges of Digital Typography

When it comes to print design, there are few variables in how a user will interact with it. A printed page won’t shapeshift depending on who is holding it—colors can be tightly controlled and the typeface will remain static. What a luxury. Digital typography is a lot more fluid. When typography appears on screen, there are many factors that contribute to how it’s displayed, some of which include:

• Screen size: It’s impossible to predict, however, Responsive Design aims to accommodate any slight shift in dimensions. But that means typesetting can sometimes be done in vain.
• Screen resolution: Pixel density plays a big part in text legibility. Technological advances have made hi-resolution screens more accessible to the masses, but designers should keep in mind the outliers with older tech.
• Screen calibration: Brightness levels determine how colors appear on the screen. The color choices for web design need to accommodate all types of screen settings.

Choosing the Best Font for Reading on Screen

Digital design is an elusive craft—it wasn’t that long ago we were limited to only a few fonts that were compatible with low-resolution monitors.

We’ve come leaps and bounds in our typeface options. They have been crafted for the screen and are designed with certain nuances that enhance legibility. Just as printed fonts trick the eye to increase legibility, like ink traps, good web fonts will do the same.

A design doesn’t have to be limited to the universally standard typefaces (Times New Roman can retire now). There are countless options available for designers to source typefaces that are web-safe and accessible. Google Fonts, Font Library, and Adobe Typekit are a few that offer easy integration and a wide range of choices.

This real estate development company, uses Proxima-Nova, sans serif typeface for the headline and sub-heading, however in the headline the usage of mosaic type colour filling gives a unique look to it. The headline is user interfaced with the cursor – this makes the interior pattern move along with the cursor.

Understanding the basics

What is typography in web design?

Typography in web design is similar to print design but requires certain considerations to ensure legibility on all screen types. Typeface, type size, color, line height, and letter shapes are some of the factors within typography that must be carefully balanced to provide a pleasant reading experience.

Which font is best for reading on screen?

Fonts that are best for reading on screen are ones with distinctive and open letterforms. Proxima Nova, Georgia, and Fira have characteristics that make it easy to read on various screen displays. Other factors impact a font’s legibility, such as type size, line height, and font and background color contrast.

What font size should I use for a website?

The font size on a website should be responsive to the screen size that displays it. In general, a font should be 12-16pt on a mobile screen, 15-19pt on a tablet, and 16-20pt on a desktop computer screen. Factors like type size, line height, and line length should also be considered.

What is good typography?

Good typography, like good design, is invisible. The primary purpose of typography is to communicate a written message. Type should be designed to be legible and provide a pleasant reading experience. Factors like type size, line height, and line length are elements of typography that should always be considered.

How many fonts should a website use?

A website should keep the number of fonts to a minimum—no more than three in total. When a site has too many fonts, the user can become disoriented with so many shifts in the visual design. The chosen typefaces should have a variety of weights and styles that can be used strategically in the UI design.

Some font pairing examples

With font pairing, there is an age-old rule that goes as follows: concord or contrast, but don’t conflict.
Here are a few examples of tried and tested font-pairs that are guaranteed to avoid conflict.

Typography is an essential factor that determines the entire stylizing structure in a website. It is the first thing that captures gaze among visitors and has to play the role of informing as well as providing a personality to the website.