Text is everywhere—and on websites, it’s a vital part of design. The right typeface and thoughtful layout help users understand your brand and build trust in your services.
So what is typography?
Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The legibility of a typeface is a product of its design, and relates to the ability to distinguish one glyph from another when reading. Readability is related to how the type is arranged, or typeset. The choice of typeface, the design and layout can create more (or less) readable experience.
What is good typography?
Typography should perform this services for the reader:
- invite the reader into the text
- reveal the tenor and meaning of the text
- clarify the structure and the order of the text
- link the text with other existing elements
- induce a state of energetic repose, which is the ideal condition for reading
Source: “The Elements of Typographic Styles” by Robert Bringhurst
Good typography establish a strong visual hierarchy, provide a graphic balance to your presentation, and set the overall tone.
Classification
- Serif: Serif is a small shape or projection that appears at the beginning or end of a stroke on a letter.
- Sans-Serif: Typeface without serifs is called a sans serif typeface, from the French word “sans” that means "without."
- Callligraphic: Typeface that mimics handwriting.
- Experimental: Highly modern typefaces using new rules.
Picking a typeface
- Purpose and Mood
What project will the typeface be used for. And is the project formal or informal? Contemporary or traditional? Fun or serious? The typeface needs to match the mood. - Content
Type is what meaning looks like, so analyze carefully what the final content is about. Typefaces need to reinforce the message of the text they’re used for and suit the purpose of that message. - Functionality
Where will the font be used? Will it be used at small or large sizes? For big blocks of text or just headlines? Make a list of all of the ways the typeface will be utilized. - Versatility
Does the typeface need to be used in just one medium (like a website) or will it be used across an entire brand’s marketing materials? Consider this at the outset to avoid running into usability issues later. - Languages
Will the text be translated into different languages? Will special characters be used? If translations or special characters are necessary, the font family needs to include them. - Test
If content will be displayed as part of a website, test the typeface directly in the browser because that’s where your content will appear. Test on different browsers, devices and OS systems.
Combining typeface
- Choose an anchor typeface
Make your body text typeface the anchor if possible, because this text represents a majority of your content. Choose a typeface that reflects the subject matter and suits your design goals. And don’t forget to read the content and take notes. - Find complementary typefaces
Look around. Have fun. Go with your gut. And if you don’t know how to start, check the following resources: Fonts In Use. “Fonts In Use is a public archive of typography indexed by typeface, format, and industry. We document and examine graphic design with the goal of improving typographic literacy and appreciation.” - Narrow down your choices
Check the technical details of each typeface. Contrast and uniformity are the two most basic principles when it comes to design, architecture and art. The simplest way to start is by mixing two typefaces that show similar characteristics. The typefaces you want to mix should have a similar x-height and the characters should be similar in shape and proportions.