Typography Blog: Typeface

Typography Basics

Typography is what happens when good design gets applied to written content. Typography uses design principles and best practices to help communicate a message faster and more clearly!


Important typography terms, properties, and principles:

There are lots of technical terms and definitions to map out the dimensions of various fonts and other aspects of typography. So I have included some resources for further reference. This blog will provide a very high level overview of some of the most commoon typography concepts I find myself thinking about while designing websites.

Typeface:

Typography Blog Heading

A typeface is a collection of letters. While each letter is unique, certain shapes are shared across letters. A typeface represents shared patterns across a collection of letters.


Weight:

Typography Blog Heading

This is talking about the thickness (aka 'boldness') of the characters. Most of the time this is specified as light, normal, and bold but can also be declared by numerical value (300, 800 etc).


Serif:

Typography Blog Heading

I like to think of 'serif' as "decorated" text. Serif is usually stylized with character expressed through contrasting thickness and shapes within the font's style.


Sans Serif:

I like to think of this as the "good for display" font type. It is readable, consistent in thickness, and generally creates highly visible and aesthetically appealing text displays when combined with other typography principles like line-height and kerning.


Baseline:

Typography Blog Heading

The baseline is the invisible line upon which a line of text rests.


Kerning:

Typography Blog Heading

The space in between a specific pair of characters.


Tracking:

Typography Blog Heading

The spacing between characters across an entire word.


Leading:

Typography Blog Heading

The vertical space between text lines. For simplicity, I call this line-height. Line-height must be a value divisible by 4 to maintain the grid.


Common best practices

When it comes to font variety less is really more. Use two fonts in total for your website for visual consistency.

Scale your font size for consistency using the CSS calc() hack.
.p {font-size: calc(26px + 2vw);}

Use a line-length of 45–150 characters for most text items. If the text continues to expand too far it can appear off proportionally.

Utilize left justification as much as possible since this is naturally more readable to most languages. If you are building a website in a language like Arabic (awesome) you will use different typography practices.

Avoid the overuse of colored text (especially red text). It is generally best to use solid, contrasting and basic colors for text.

Overuse of capitalization, underlining, and bolding can create confusion and miscommunicate your message. What seems like design emphasis quickly turns into yelling when a user is reading it.

Utilize background colors and shaded text boxes to create contrast and improve readability.

White space or "negative space" can be a wonderful tool when it comes to typography. Adding or removing space can enhance the contrast of the text, improve the readability of the texts layout and help organize your pages elements.

Margins should shrink and expand with the responsiveness of your website to create readable and attractive mobile friendly text.

Text hierarchy is the markup of text elements using HTML5 on website and text editor. Using tags like "h1", "h2", "p" can help organize your message and content in a natural way.