Modules > Typography Basics > Aesthetic Web Typography > Technical Web Typography
At its core, typography is pretty simple. Typographic basics start with the same principles we learned in elementary school. Letters form words, words form sentences, and sentences form paragraphs and pages. No matter how text is rendered, it will say the same thing. Without typography, the message is still legible and the substance of the writing remains the same.
Typography comes in when the words, sentences, and spaces between are arranged in a way that visually reinforces the message of the writing. It helps convey a message greater than what the letters spell on the page. While the substance of the writing is important, the typographic style is what communicates the text’s meaning. Typography is incredibly versatile and sets not only the tone of the writing, but can bring both emotion and dynamism to the text.
The typographic choices a writer/designer/publisher/anyone makes can influence how the content is understood. Good typography lets readers focus on the content rather than its appearance. It should go hand-in-hand with the message of the text and should make sense to readers. Conveying content visually may sound simple, but there is never a ‘one size fits all’ perfect typographic solution. For any given text, there could be dozens of equally good solutions. For this reason, writers and designers must make careful typographic choices about the font, style, spacing and alignment they use in order to communicate the message.
Working with typography doesn’t require a design background or a deeper understanding of typography. Creating good typography is as easy as learning a few basic guidelines and incorporating them into your text.
Typography is important because it reinforces the meaning of text. Text is everywhere. Every street sign, every storefront, flyer, book or website you see its made up of text. These have all been typographically designed to further the text and communicate their message to the reader. Typography provides a valuable service between the writer and reader—it acts as a connection between the text and the message. If the words on a page were equated to a vehicle, typography would be the vehicle’s make, model, color, and personality.
Good typography, unfortunately, typically goes unnoticed. For example, you wouldn’t think twice about the bold, uppercase typography usually found on a warning sign. You would simply view the sign and know to stay away because of the no-nonsense warning tone indicated by the letters.
Consider then the same sign but with a handwritten, rounded font. Would you take this sign as seriously as the first? Probably not.
Both signs say the same thing, but the difference in typography means they communicate different messages. Good typography, like that of the first sign, helps the reader process the text and devote more attention to the message. Alternatively, bad typography can distract the reader and undermine the message. To a distracted or confused reader, the text is essentially invisible.
For this reason typography must be well thought out and chosen with an understanding of the text’s goals. All the elements of typography—font, style, size, weight, spacing, color, etc.—must be carefully considered.
In common, everyday usage, the terms font and typeface (or type family) are often used interchangeably. In most cases, there isn’t much harm in using them synonymously because the general definitions are understood by most people. In fact, even designers sometimes have difficulty clearly defining the two terms. Fonts and typefaces, however, are separate and have distinct meanings. So using them interchangeably can lead to some confusion.
Whereas a typeface is a collection of letters, numbers, symbols and punctuation that have the same distinct design, a font is the physical means of producing the typeface. Historically, fonts were designed by foundries, or type design houses, and were produced letter by letter as metal type to be fed through printing presses. The entire collection of characters produced as metal type was called a font. Today, we use the same term to refer to piece of postscript code we use on our computers. A typeface, on the other hand, describes one font or an entire family of fonts with differing attributes. Typefaces are a collection of characters with the same typestyle but can have varying widths, weights, postures, or tilts.
One of the most bewildering tasks for anyone working with type is how to choose typefaces. When the choice of typeface can mean the difference between a successful and an unsuccessful design, one of the first challenges is to make sense of the thousands of different typefaces available. Each one you consider has its own visual characteristics and fits differently within the broader history of typography.
Because each typeface varies, classifying fonts have presented problems for many years. In attempts to instill meaningful order to thousands of typefaces, a number of systems for classifying typefaces have been devised throughout the years. Some systems have classified typefaces by their inherent characteristics, or the time period in which they were developed, or their typical usage. It was common for systems to each have their own names for categorizing and different numbers of categories, only adding to font classification complexity.
As a designer or developer working with fonts, knowing how to distinguish differences in typefaces will help you when making decisions about which typefaces to use for your designs. Below, one classification system is detailed that successfully categorizes each style. Typefaces are categorized according to visual similarities, which can make them easier to recognize and select. It is followed by many present-day designers.
First and foremost, most fonts fall into two main categories, either serif or sans serif. Serif typefaces have extensions called terminals that come off the stroke of the letterform. They were developed earlier in history than sans serifs and can fat, thin, squared, curved, very prominent, or very subtle. Sans serifs, on the other hand, have no extensions from the letter’s stroke. The word Sans is a French word meaning ‘without’, therefore meaning ‘without serif’. These fonts have come around more recently, within the last hundred years or so.
Oldstyle typefaces are based on type designs from the 15th and 16th centuries that were originally used as metal type for printing presses. Typefaces in this category have fairly strong differences between thick and thin strokes and often have a more romantic, classical feel. Oldstyle typefaces are ideal for long texts and work well at both large and small sizes.
Fonts in the Transitional category are based on 17th and 18th century designs and helped bridge the gap between Oldstyle and Modern typefaces. Hence the term ‘transitionals’. Transitional styles tend to have more symmetrical serifs and look structurally more geometric than the Oldstyle fonts. The fonts do not have as much contrast between thick and thin strokes and tend to have more vertical stress and higher x-heights than other styles. Transitionals are often used in magazine design and advertising but also translate well on screen.
Modern style designs are based on 18th and 19th century typeface designs. They have a more refined, stylized appearance, giving them an appearance of sophistication. Modern styles often have very high contrast between thick and thin strokes, a high vertical stress, and many have exaggerated features such as thin serifs with no brackets are called hairline serifs.
Slab serifs share a lot of their proportions with Modern style typefaces but differ because of their thick, heavy serifs extend straight from the character’s stroke with small or no brackets. In many cases, Slab serifs have little contrast between the main strokes and hairline, giving them a thick, monoline look. This style can be very effective for logos and shorter bits or display text.
Sans serif typeface classifications have three basic categories: geometric, grotesque, and humanist.
Geometric sans serifs are based on geometric principles and have little or no variation in stroke width. Geometrics have straight vertical and horizontal strokes and almost circular curves. These tend to work well at larger sizes and for shorter sections of text.
Fonts in the Grotesque category tend to have similar proportions to serif typefaces but have higher x-heights and more variation in the weight of their strokes. These work well on screen and can be read easily at smaller sizes and in longer portions of text.
Humanist fonts are largely the most versatile category of sans serif fonts. They tend to be similar to Oldstyle serifs in that they feel classic and elegant, but don’t gave the serifs. They are effective as everything form headlines and subheads to captions and longer texts.
Blackletter, or gothic style fonts, began to appear in handwritten form in 12th century Europe. They were popular in body text and eventually replaced all other handwritten styles. Characters had a strong vertical stress, tall x-heights, and extreme contrast between the letterforms’ main and hairline strokes. Today, Blackletter fonts are considered difficult to read and are used only sparingly in titles, headlines, and initial drop caps.
Display style fonts are designed to catch the reader’s attention. Fonts in this category tend to be sans serifs are often larger and bolder, and have more exaggerated features than other categories. Although the Display category covers a wide visual range of fonts, they tend to read well in larger sizes as they become illegible at smaller point sizes. For this reason, they are used commonly for headlines, advertising, posters, titles, signage, and logos.
Fonts categorized as symbols do not contain traditional characters but are collections of graphic symbols that can be used as graphic elements in a design. The elements of symbol fonts have no relation to a typeface but are useful as simple vector-based illustrations. Symbols can be anything from circles or stars to florals, arrows, and pictograms.
Script style fonts are based on handwriting and calligraphy. They typically have an elegant, cursive feel that can include decorative swashes. Script fonts have extensions that connect uppercase and lowercase letters to give them an overall fluidity and a feeling of formality. Because they are more embellished than serif or sans serif fonts, Script typefaces tend to read better when used sparingly. They work well in headlines or in designs with limited text, such as invitations or formal signage.
Fonts classified as Decorative have no set classification rules, except that they are decorative. Many have expressive and have illustrative or ornamental characteristics. This category has the widest variety of designs. Like Script or Display styles, Decorative fonts tend to function better at larger sizes with smaller portions or text. These tend to be used for headlines, posters, signage, and logos.
One of the most important aspects to consider when working with typography is adding a sense of hierarchy to your design. Hierarchy is a logical way to visually organize your content and allows users to see the relative importance of different text elements within a page and helps to make the layout clearer and easier to understand.
Hierarchy can be created through the use of various type styles, which create emphasis or visual cues on the page without changing the size of the type. Type styles refer to all the variations of a particular font. Some styles can add thickness to a letter or make a letter thinner. Some make letters wider or narrower, and some can add tilt to a letter. These variations create emphasis within a block of text by visually separating particular words or headings from surrounding text.
A type style’s weight refers to a letter’s relative heaviness or lightness, which is determined by how thick or thin its stroke lines are. Varying the weight of a typeface is an easy way to create contrast and visual hierarchy within a design. It helps the reader more easily navigate a page and can highlight key words or phrases.
The standard weight of a typeface is referred to as Roman, or book weight. Roman typefaces are the most common and are typically used for plain blocks of text.
Bold weight typefaces are heaver than Roman weight and primarily used to create emphasis. Bold type is most effective when used sparingly with Roman text because it makes text more prominent.
Typefaces with Light weight have thinner strokes than Roman weight. They feel airy and more delicate so they are typically used for display purposes. Light weight typefaces should not be too small in size because thinner letters can become difficult to read.
A type style’s tilt, or posture, refers to the vertical angle of the letters. Changing the tilt of the letterforms is another easy way to create emphasis and hierarchy. Depending on the angle which the letters are skewed, a typeface is considered italic or oblique. Using one or the other adds greater variation to the design as tilted letters often have a more scripted look.
Italic refers to letters tilted between 7° and 20° to the right. These typefaces are based on the cursive handwriting style and are often more condensed than regular roman letters. Like a Bold weight typeface, Italics should be used sparingly to create hierarchy in the text.
Oblique letters have a much smaller tilt than Italics. An oblique is a slightly tilted version of a Roman typeface. Since these letters angle very slightly, they are more likely to appear distorted.
The width of a typeface can also changed to provide to provide variation within text. Many fonts have condensed or extended typefaces to provide wider or narrower versions of text. Width is different than a type style’s weight because it deals with the horizontal space of letters.
Condensed, or compressed, type styles are narrower than the Roman style. Condensed letters take up less space on a line.
Extended, or expanded, type styles are wider than the Roman style and take up more space along a line.
Much like parts of the human body, individual typographical characters have their own unique forms and attributes, and like human anatomy, typographic anatomy is important place to start to understand the system as a whole. Type anatomy refers to a specific parts of letters and are described through a variety of terms.
Shown below are a few examples of type anatomy. Refer to the glossary definitions for more detailed explanations.
In addition to using type styles for hierarchy and variety to your design, it can be fun to use a variety of typefaces as well. Combining typefaces can create visual interest within a page when two fonts can work together to create contrast. The biggest challenge for many designers, however, is choosing the right combination of typefaces. The options are endless and choosing a good pairing depends on the content of the text and the desired visual aesthetic.
When starting to pair typefaces, it’s important to consider where and how each will be used in your design. For instance, contrasting typefaces can help distinguish different type elements like headlines, subheads, and body text. Serif fonts, on one hand, tend to be easy to read in even among long blocks of text. They are designed to help the reader’s eye flow quickly through lines and paragraphs. Sans serifs often work well as body text but some can become difficult to read at smaller sizes. Fonts that are decorative, blackletter or scripted are usually better for headlines and smaller sections of text. A serif of sans serif font serving as body text could be paired effectively with, say, a decorative font used for headings and subheadings.
It’s also important to look at the message of the project’s text when choosing and pairing typefaces. The pairs you choose should reflect the subject and tone of your text and should also create good harmony and readability. Serif fonts tend to look and feel more traditional and work well in formal works. Sans serifs tend to feel more modern and friendly and tend to work well in text with a more casual tone. Blackletter fonts and fonts with sharper edges tend to look stronger but more cold, while fonts with large, rounded elements feel light and friendlier. Pairing a serif with a sans serif could bring formality to an informal design or vice versa.
No matter which fonts you choose, it is generally good practice to use no more than two typefaces in your design. One typeface can serve as your body copy and one for the headline and any other text that needs to stand out. The main benefit of this approach is that limiting the number of typefaces will maximize the compatibility and harmony of those chosen.
A designer should strive to achieve a visual hierarchy that helps readers flow from one element to the next. Because thousands of typefaces exist and because the characteristics of each typeface vary, there is no ‘right way’ to pair typefaces. Choosing two similar typefaces or two heavily contrasting typefaces can both yield some unique and wonderful designs.
One good place to start is to choose a handful of serif fonts and a handful of sans serifs and look at them side by side in both headline and paragraph text sizes to compare the qualities of each.
Comparison Adobe Jenson (left) and Garamond (right).
Comparison Source Sans Pro (left) and Gill Sans MT (right).
Below are some complimentary font pairings to help you get started: Oldstyle serifs and Humanist sans serifs have similar character shapes and proportions and generally pair well together.
Transitional serif typefaces are similarly proportioned to Grotesque sans serifs and often pair well.
Geometric sans serif styles compliment the exaggerated strokes and varied widths of Modern serifs. These are often paired together.
Font sizing, like weight and tilt of type styles, is an important indicator of hierarchy. Shifting the size of text is a simple but effective way to add emphasis to a word of line of text. Especially when text is near the top of the page, even a small shift in a font’s scale can make a huge impact.
In traditional printing press systems, printers would use units called points to measure type’s size. The main benefit of using point units was that it allowed all fonts to be measured together on a basis of simple arithmetic. Because fonts vary greatly in physical characteristics, (some with taller or smaller x-heights, or larger cap heights, etc.) they can appear to be different sizes even if they are set at the same point size. Using a standard point size sets a standard with which to measure fonts.
Although the fonts below are both set at 16 points, the difference in x-heights gives the appearance of different point sizes.
A point in a printed system measures .3528 mm, or 1/72nd of an inch. The human eye can most comfortably read 10 or 12 point sizes for long sections of text. 8 point sizes require more effort and 6 point becomes difficult to read easily. These optimal point sizes are important to keep in mind when choosing a font size to help your readers navigate the text quickly and easily. As a general rule, different types of text within a design have different point sizes to create hierarchy.
The text that makes up paragraphs and longer blocks of text is called body copy. Body copy is usually the majority of most documents. It reads best when set between 8 and 12 points because it is small enough to present a lot of information on a page but not too small to compromise readability. Remember when choosing a font size to keep the benefit of your reader in mind. For example, if a design is targeted to children or older adults, it’s generally recommended to use an even larger point size.
Headlines are designed to stand out from the rest of the page and are the first words a reader will notice. A headline will usually sit at the top of the design and will frequently be between 18-24 points in size or larger.
Subheads are similar to headlines because they are brief lines of text meant to stand out within a design. They divide the body copy into sections and give readers different entry points into lengthy texts. Subheads should be sized larger then body text but smaller than headline text and can be even more prominent in a bold weight or a different color entirely.
When working with typography, the horizontal spacing of the text should be carefully considered. When a word is typed out, letters appear a certain distance from one another, these distances determined by the creator of each particular font. However, sometimes things don’t always look quite right and spaces between letters or words need to be adjusted manually to give the design a higher level of polish.
Sometimes in a design there are one or two letters or numbers that don’t fit well together in a line. They may appear too close or too far apart and can either create legibility issues or odd spaces if left unchecked. Kerning comes in when a designer needs to manually adjust these letters by adding or removing space.
The goal of kerning letters is to give them a better visual relationship and an overall uniformity. This helps the viewer’s eye quickly pass over the text without being stopped by these odd spaces. Depending on the chosen font, sometimes you will only need to kern two letters; sometimes it will be necessary to kern a whole word. The easiest way to know when to kern is to look at the spacing of the word as a whole and try to edit the rest of the spaces to match that.
It is more likely that a larger type size will need to be kerned than a smaller one. Larger gaps pop up at display type sizes and it is more likely some manual adjustments will need to be made for it to look visually correct. Text at body size usually looks fine with automatic spacing and doesn’t usually require kerning.
Be cautious not to kern your letters too tightly, however, or you may end up with another word entirely like the example below.
Unlike kerning, which is adjusting the space between two letters, tracking is adding or removing space between all the letters in a word, line, or sentence. A design may require slight tracking to fit text into a narrow column or to fill a space within a block of text.
Like kerning, the goal of tracking is consistency in the appearance of the text. Even more so than kerning, tracking effects a design’s readability. If a line’s tracking is too tight, the letters will be too close and can unintentionally blend together, which makes the line illegible. If the tracking is too loose, the letters can fall too far apart and may cause the reader’s eye to jump or skip letters. For these reasons, tracking should be carefully considered and used with care. It should also be subtle as text should appear consistent from one paragraph to the next.
Another element of horizontal spacing to consider is the length of the lines of text on a page. When set at body size, text needs to be set at a comfortable line length for ease of reading. If a line of text is too short, it feels choppy and makes the reader’s eyes tire quickly. If a line is too long, the reader may have trouble finding the beginning of the next line. It’s important to find the right balance for the best readability.
While there is no perfect formula to determine the number of words or characters for a line, a comfortable line length is typically between 50–70 characters. You might need to bump your type size up to fill a longer line or take it down a point or two to fit a shorter line length. Of course, 50–70 characters aren’t magic numbers because a comfortable line length also depends on the typeface you choose, type size, and the width of the column being set.
The vertical spacing within typography should be as carefully considered as its horizontal spacing. Like the elements of kerning, tracking, and line length in typography, the vertical spacing of lines and paragraphs also influences readability in a design.
The white space between two lines of text is called the leading. The term originally referred to the metal type that was used in printing and strips of lead were inserted between lines of text to accurately space them. Leading today still refers to the space between lines of text, but is measured in points.
When adjusting the leading within a block of text, the primary goal is to maximize readability between lines. Leading should be visually comfortable for the eye and shouldn’t be too loose or too tight at the same time. This will help the reader’s eye navigate a from the beginning of one line to the next.
While there is no magic formula to determine the perfect amount of leading, a general rule for text type is to add two extra points of leading. For example, if your font size is 12 points, 14 points of leading will make for a visually comfortable text block. For larger point sizes, the leading will probably need an additional point or two to make text more readable. Fonts with taller ascenders and descenders or fonts with larger x-heights may also requite a bit more leading to prevent letters from touching the lines above or below.
Text alignment refers to the position of type within a block of text. Type can be right aligned, left aligned, centered, or justified. The text’s alignment can greatly influence the readability of the design.
Left alignment means lines of type in a text block line up on the left hand side and are ragged on the right hand edge. In English-speaking countries, users read and write left to right, so left alignment is typically the most common in designs with large amounts of text on a page. Left alignment allows the user’s eye to easily find the beginning of a line in long passages of text, which makes it the most favored choice in typographic designs.
Right-aligned text refers to text that lines up flush on the right hand side with a ragged edge on the left. Right alignment is the opposite of English reading and writing and makes it much more difficult to navigate in long passages of text. Aligning text on the right is typically fine for short paragraphs or captions since it can add variety to a page, but should be avoided for anything other than small pieces of text.
Text that is center aligned lines text up in the center of the column and has ragged edges on both left and right sides. It creates a symmetrical shape on the page, which can work well for poems and short captions, but cause readability issues in larger blocks of text.
Justified text aligns on both right and left sides. Justifying text forces in extra spaces between words to give text a neat, considered, block look. It is often used in newspaper and magazine design to neatly fill column forms and irregular typographic shapes like circles or triangles.
Justified alignment, like right aligned or centered text, tends to function better for headlines or shorter blocks of text because it otherwise runs the risk of forming accidental rivers in larger passages. Rivers form when several lines in a row have large gaps forced in and vertical ‘rivers’ are formed. The user’s eye can unintentionally focus on these spaces and get lost within lines of text. One solution to this problem is to add a small amount of tracking to individual lines to give text a uniform look. Resizing text up or down can also help it reflow to better fill the column width.
Playing with type cases are a good way to experiment with hierarchy within a design. For instance, uppercase letters read entirely differently than lowercase letters, while small-caps read differently than either. Different type cases in a design can create a completely different visual look depending on where and how they are used.
Text set in uppercase, or all capital letters, tends to speak more loudly than type case or lowercase text. Uppercase letters line at both the baseline and cap height and form visually solid blocks of type that can suggest authority, action, or urgency in a design. Words set in uppercase draw the eye’s attention more than other type cases and can be used effectively as headlines, captions, or subheads. Depending on the font, uppercase letters might read very well or very poorly. Serif and sans serif fonts tend to work well in uppercase, while script or decorative font classifications can blend together and become illegible.
Lower case letters tend to read more quietly in a design than uppercase text. Since the majority of regular body copy is made up of lowercase letters, it is also much easier and quicker to read than uppercase. Lowercase type has more variation due to the ascenders and descenders within a line and help the reader’s eye flow quickly through the text.
Text set in a small-caps type case uses a variation of uppercase letters to give the impression of title case. Small-caps uses all capital letters but forces the them to conform to the lowercase x-height. It conveys a more formal tone than regular text case and can add variety to a design when uses for titles or subheads. However, like uppercase, small-caps can be difficult to read in body text.
One of the most important aspects to consider when working with typography is adding a sense of hierarchy to your design.