Ultimate Guide to Web Typography: Rules, Glossary, Ideas, and Best Practices

‘A picture is worth a thousand words.’

Most often pictures convey what they have to say. However, an image with text makes a stronger impact.

Typography acts as a companion to your graphics. Typography is not just picking a random font and a point size from the drop-down menu of your editing software. It is a specialized field in graphic designing. It is the art and technique of arranging type. It is one of the important skills which can differentiate you from rest of the designers if you know how to use it.

What is Typography?

Before getting into the art and technique of typography, first, understand what typography is all about. Typography is the visual piece of text (written word). A text is a series of words. Each and every visually displayed text you see is basically typography. Text can be categorized in three ways- visually, audibly and digitally.

What is Typography?

Typography is more than the design of letters and characters. It includes the choice of point size, spacing, and line length. Back in the time when Johannes Gutenberg introduced the printing press, typesetters had to arrange letters and characters in physical space. Now in the age of computers, this job is a lot easier. You just have to find open source fonts, arrange letters and characters, and you are done.

Importance of Typography

Typography is something that you will find absolutely everywhere. Say, it could to be your smartphone, coffee cup, billboard, cloths, and a lot more. Typography is everywhere. The selection of font, letter, and character arrangement decides how your message will be conveyed.

Even if it seems a small factor in your view, it’s certainly not. Even a single type adjustment can change the entire look and feel of your artwork. If you ever noticed Facebook tested a new font called Geneva back in June 2016. It was slightly thinner and lighter version of the original Helvetica font. But, the difference between these two fonts was noticeable.

Rules of Typography

In typography, you have to choose the typeface according to your layout, grid, design theme, colour scheme, and so on. Here are some typography rules you should keep in mind while you work.

Rules of Typography

Choosing right font

If you spend a few minutes on the internet, you will find an astonishing array of ready to use free as well as paid fonts. But that doesn’t mean that you have to spend hours searching for the exact fonts you visualise in your mind. You can start painting even with a limited palette. There are a few tried and tested fonts like Helvetica which can never go wrong in any project.

A typeface is a form of design which is formed by craftsmen who contributes all his efforts and skills over a considerable period of time. The professionally designed fonts offer a variety of customization in terms of weights and styles to create a complete family. Moreover, they offer considerable kerning pairs, support for multi-language, type-setting customization.

Following are the most important typographic terms which are considered:

Size

Not every typeface is created equally. Some use fat and wide aspects while others are thin and narrow. Different kind of typefaces can acquire the different amount of space on the page.

The height of the character is denoted as X-height. When you pair different typefaces, it is a good practice to use only those typefaces which share similar x-height. On the other hand, the width of the character is called as ‘set width’, which decides how much space the letter will take and buffer with other letters.

Point system is the method which is been used to measure type since the 18th century. A point can be measured as 1/72-inch and 12 points can form one pica. Pica is the unit to measure column width. Furthermore, the sizes can be measured in pixels, inches or millimeters. It depends on the requirement of the project.

Leading

The vertical space between every line of type is known as leading. The reason for calling this as leading is because the slips of lead were used to divide the lines of type back in the time when metal typesetting was used. The rule of thumb to get a readable body text is to use a leading value higher than the font size. You can use a leading value higher in 1.25 to 1.5 times.

Tracking and kerning

Kerning is the act which involves the adjustments of space between the characters. It helps to generate a harmonious pairing.

For instance- when you use an uppercase of the letter ‘A’ with the uppercase of letter ‘V’, the diagonal strokes of the top left of ‘V’ letter is kerned with the bottom right part of ‘A’.

On the other hand, tracking is the term which relates to the spacing of all characters which are applied evenly. Kerning is similar to track, but both are not the same.

Measure

The measure is a term which explains the width of a text block. For optimum reading experience, you should consider the measure as an important aspect of typography.

Hierarchy and scale

All type can’t be used at the same size, you have to set hierarchy for types. Else, it will be difficult for readers to understand which information is most important than the others.

Generally, headings are large, sub-headings are smaller, and body type is slightly smaller than sub-headings to help readers understand its hierarchy.

Not just size, the use of different colors, weight and spacing can also help you set hierarchy in your work.

Glossary

We have covered almost every fundamental concept and terminology that involves in typography here.

Glossary

  • Aesc: It is pronounced as ‘Ash’. It is a ligature of two letters viz. ‘a’ and ‘e’. The origin of aesc is from Old English where it is signified as a diphthong vowel. The Aesc has migrated to alphabets like Icelandic and Danish.
  • Aperture: The aperture is a knotted opening of a glyph which can be seen in letters like ‘e’ the size of the aperture varies as per its implementation. However as you will vary the aperture, its effect will be reflected in the readability of a letterform.
  • Apex: Apex is the point which is at the top of a character. It is the place where the left and right strokes meet.
  • Baseline: It is a section where the base of the capital letters sits.
  • Bowl: Bowl is considered as the enclosed parts of letters like ‘b’ and ‘p’.
  • Bracket: It is a wedge-like outline which is valuable to hold a serif and form stem of a font in a number of typefaces.
  • Cap height: The cap height is the tallness of a capital letter above the baseline.
  • Counter: The counter is enclosed or incompletely enclosed a section of a letterform. The counter can be seen in letters like ‘c’ or the lower part of ‘g’ and ‘e’. This section can be mixed up with the bowl.
  • Descender: It is a piece of the letterform which goes below the baseline. For example- letters like ‘p’, ‘y’ and ‘q’.
  • Ear: The ear is a small stroke which is expanded from the upper-right side of the bowl.
  • Glyph: It is a singular part which constructs a font. Any kind of singular part which helps to construct a font, whether it is a punctuation mark, number, letter, or even dingbat is included in it. Glyphs can be called as the building blocks of typography.
  • Gutter: It is the space provided between the facing pages of your work. Gutters can be seen commonly in columns of text.
  • Orphan: Orphan is the first line of a new paragraph which is threaded at the end of a page. It is not a thing which you would like to have in your project as it is considered as a bad practice.
  • Pica: Pica is the unit to measure column width. There are 16 pixels or 12 points in one pica.
  • Readability: It is referred as the ease of reading which includes the use of a block of text which can be scanned easily by eye.
  • Serif: It is a typeface with serifs. The end of the stroke of a letterform in this typeface is derived from Roman tendency.
  • Sans-serif: A typeface without serif is a sans-serif or sans serif.
  • Spine: It is the major curved stroke which is present in the lowercase of capital ‘S’.
  • Spur: It is a small bulge which appears at the curve of a letterform. It is also called as a beard or a beak. For instance- the letter ‘G’.
  • Stem: A full-length stroke is called as a stem in upright characters. It is vertical.
  • X-height: The height of ‘x’ letter in the lowercase in a given typeface is an x-height.

7 Typography Ideas and Best Practices

Typography Ideas and Best Practices

Following are the best typography practices you can use in your work. Use these tips in your projects to create your own masterpieces.

Importance of the choice of correct fonts

Every designer has a list of his favorite fonts. But, it doesn’t mean that you have to choose a font only from your favorite list all the time. Each and every typeface has its own style, personality and mood. So, you will have to decide which font will be a perfect fit for your design. The font choice is important as it helps you convey your message to your audience.

Keep your audience in mind

After picking a font that complements the idea of your design, you should think whether it will be a match for your audience. One group of your targeted audience might feel your fonts are trendy, while some people will call them outdated. So, you will have to understand for whom you are designing the project. The age, gender, location and other factors of your audience should be considered before settling upon font decision.

Set up a hierarchy

Like mentioned before, the hierarchy is playing important role in typography. Your graphics should be well organized and should provide an ease to navigate to readers. Typography hierarchy is very useful for making text-heavy designs such as books, newsletters, magazines and other traditional print publications.

Pay attention to spacing and alignment

The spacing and alignment may sound less important, but it is certainly not. Without proper spacing and alignment, your designs will look confusing, cluttered and ordinary. Spacing includes the use of leading, margins, tracking, and white-space.

Use Kerning whenever to require

Many designers get confused between tracking and kerning. However, they both are different terms. Kerning allows you to make your typography looks professional and polished.

Don’t exceed the use of typefaces, weights and styles

We all like to use different fonts and customizing them to look classy. However, the use of different typefaces in a single design can make your work look amateurish and messy. You should avoid the use of more than three fonts in one design to give it a professional look.

Observe and Practice

The one tried and tested a way to improve your typography skills is to study how other designers are using typography in their work. It is the skill that requires practice and eye for details to understand how someone has used typography in their project and how will you be able to use them in your projects.

 

This was the ultimate guide to typography. Hope this guide has helped you understand different concepts and practices using which you can improve your typography skills.

Like it? Share it.

Leave a Comment Yourself

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