Typography is not merely the process of arranging font on a page.
It is a living creature; it feels joy in an exclamation point, takes deep sighs at periods, grabs consciousness with each bold strike and begs for understanding in the space between every italic.
It has intricate rhythm and harmony, staccato paragraphs and legato headers that blend into a melody of enlightened web design. Typography is an art as much as it is an essential design process, and it is one that is best understood by focusing on the contrast between textual elements in a given design.
Typographic contrast is the art of using different type to expose the meaning of content. It is the pop that grabs the attention of the audience, halting text from rendering as dense and oppressive drabness. Contrast should be minimal; it should maintain harmony with other design elements yet also indicate hierarchy, relationship, and emotive content.
Below we present tools and techniques that can be used by designers and web developers to improve typographic contrast on the web. First, we analyze the properties of typography that can be modified to contras These ideas can help you decrease some of the other design elements on your site — images, Flash, JavaScript — furthering hastening and simplifying the design process. We also present some tips and suggestions for selecting an appropriate font.
The Elements of Typographic Contrast
There are myriad ways to change the way that type looks — in fact, there are as many ways as there are different fonts. Yet, it is best to think about the elements of type by classifying them into essential categories.
These are also the elements that are the easiest to adjust within design programs and languages (as opposed to having to scour the internet for a new font to purchase). Remember that you should strive to focus on the principal of minimalism when utilizing these techniques. Much like wasabi in soy sauce, a little bit goes a long way.
Too much contrast will give your design the look of an amateurish ransom note, destroying the professional image you plan on evoking with the design.
Size
The size of text within a given design is a very important element in typography in general because it indicates the hierarchy and structure of the information presented. Without relatively larger header and title text, the content would appear as an amorphous blob that lacks cues to indicate to the reader both where a given idea is likely to be found in the document as well as a general overview of the information that can be expected.
Therefore, you can use larger typeface to indicate the title of the document, or a header demarcating the beginning of a new chunk of information. You would not want to use larger text in the middle of a sentence or paragraph, however, because instead of emphasizing a string of text, it will instead hierarchically isolate it from the rest of the paragraph. That is, it would seem more like a new header than it would something you wish to bring to the attention of the reader.
You can also use larger text for quotes, slogans, and callouts that tend to appear at the top of many web design. This is generally set as a display or decorative font, and will attract the reader’s attention first before they are able to comprehend the rest of the page.
Because the reader will see that text first, it is important to provide some basic information that will contextualize the design, or it may confuse for audience. For instance, a web designer’s portfolio may say something like: “My name is Bob. I create shiny web sites.” This is theoretically better than grabbing their latest Tweet because it lacks explanation and context when viewed alone — though it would effectively drive traffic to a Twitter profile.
When setting the size for the titles and headers in your design, it is important to use a typographic scale to maintain flow and harmony with the other elements. The classic typographic scale have been used since the beginning of sixteenth century in order to add hierarchy to otherwise flat manuscript. It goes from very small type to very large font, and includes many of the sizes we are most familiar with. It relies on the notion that these sizes, when used together, look pleasing to the eye.
Of course, there are no hard and fast rules in typography, so you shouldn’t feel constrained only to the sizes included on the classical scale. But, you do want to make sure that all of the headers and text types decrease in size evenly as you read through the page.
To do this, I generally take the largest font I want to use and the smallest font I want to use, and place the headers into that scale at even measures. For instance, if the largest font I wanted was 3.5em, and the smallest font was 1.0em, I would separate each size by 0.5em (assuming that I am using the five header sizes and a single size of text). It would result in the following:
Here’s an example of the typographic scale used for WordPress:
- H1: 48
- H2: 36
- H3: 24
- H4: 21
- H5: 18
- P: 16
Color
Type color is not only turning the shade of the text into a mixture of blue, green, and red. In typography circles, it is the balance between black and white on a printed page. When text is set close together and without much space between the lines, it is much darker than if there was more space between the text. The more “ink” on the screen or the page in a given space, the darker the type color.
You can contrast the type color of chunks of text in order to create typographic contrast. It is important to keep the type color even between lines of text in the same chunk — you don’t want the top of the paragraph to be darker than the bottom — but you can vary the color between headers, columns, sections, and paragraphs.
So how can you adjust the type color? One way is to adjust the kerning and tracking settings in your design program. (You can also do it in CSS by setting the word-spacing and letter-spacing attributes.) Kerning and tracking are similar ideas that often get confused.
Kerning is adjusting the space between two characters in a given string of text. This is useful when a narrow character, such as an i or a t, appears too far away from the surrounding characters. You can decrease the kerning in order to “squeeze” the characters together. Tracking, on the other hand, is adjusting the overall space between all of the characters. You can use tracking to increase the darkness of a heading by decreasing the setting, such that the characters are pressed together, decreasing the amount of white space.
Another way to adjust type color is to modify the amount of leading in between lines of text. Leading is pronounced like the heavy metal — it refers to the lead used back when type was set by hand. It refers to the amount of white space in between lines of text. Occasionally, designers will set decorative text used for callouts and excerpts with tighter leading, making it appear darker than the rest of the text.
Of course, you can also change the physical color of the font. Remember, though, colored type can potentially harm readability. To combat that, consider increasing contrast by setting the type slightly bigger and bolder than you normally would if you want the text to stay visible.
You can use a lighter color in order to indicate that an element is disabled. You can also deemphasize text by setting it in a smaller size as well. Brighter colors can be used to showcased clickable regions (like links), and user warnings or errors. Furthermore, different colors can be used to help your audience differentiate between different words without spaces.
However, one of the most effective ways to make a section stand out strongly from the rest of the page is to highlight it by changing the background to a bright color (much like how you might highlight a textbook with bright yellow or orange). A recent study involving distinguishing between the names of similar sounding medications indicates that highlighted text is the most noticeable compared to techniques like bolding, italicizing, and capitalizing. You can highlight chunks of important text in a document to attract the attention of your readers.
Form
Changing the actual style of text can further help create typographic contrast and hierarchy in a design. Capitalization is often used to differentiate titles and headings from body text. For instance, many designers will set their headers in small caps. You can also use small-caps in the beginning of a sentence in order to add graphical flair and draw the reader into the content.
This is much better than using a drop-cap because it is much more readable and does not destroy the continuity of the inital word of the paragraph. Small-caps are also good for text that is important but tangential to the main idea. On a blog, the name of the author can be set in small-caps (and in lighter font) if there is only one or two main authors.
One thing to avoid with capitalization is setting entire chunks of text in capital letters. It is true that capital letters often denote screaming or yelling, but the main issue is that chunks of text in all capital letters is very difficult to read.
Designers can also use bold, italics, and underlining to emphasize and contrast text. Generally, you do not want to use underlining to emphasize text on the web because it could easily be mistaken for a link. However, you may want to use bold or italicized font to draw the audience to a central word or idea in the content. Of course, you want to have reserve when deciding what text to emphasize. By bolding or italizicing everything, it loses the ability to grab attention and create contrast.
Bolding is also appropriate for headings and titles because the wider stroke lengths tend to increase the text color. The larger text used in headings tends to appear looser (especially in HTML/CSS), and the bold strokes help negate white space and create structure.
Content
Many typesetters and designers feel that typographic contrast can only be created by modifying the style of the type. However, beautiful typography is more than just an aesthetic; it is also a way of graphically communicating with the audience. Therefore, designers can play with the protocols inherent in content in order to change the look and feel of both the type and the design as a whole.
There are numerous formatting protocols that exist in the English language. For example, addresses, phone numbers, and email accounts all have specific rules for how they should be typed. However, a web designer can create typographic contrast by breaking some but not all of the formatting rules. For instance, omit the parentheses around the area code, but leave in the dash. Or, spell out the abbreviation for street or avenue. This is especially helpful when there is something in the address you want to emphasize as a part of your image. (For instance, changing 5th Ave. to Fifth Avenue)
Sometimes, though, typography is at its most powerful by merely refusing to show all of the text. Creating beautiful type — and then covering some of it up — can tell a story about a design. By obscuring a portion of the text, you are creating a strong contrast between the text that is readable and the text that is not. It can indicate surprise, style, and class. Or, it can display an incompleteness that causes the meaning of the type to be obscured, allowing it to be type for art’s sake and not for readable content.
How to be an Easy Read: Selecting the Appropriate Font Face
Selecting the correct font is absolutely critical to creating high quality typography and to maximizing readability. Typeface comes with centuries of tradition; therefore, selecting the right one also requires you to assess the cultural and historical meaning of your type. Below, we describe the two main categories of typeface, and how well they fit into the roles of text, display type, and decorative type.
Out of the thousands and thousands of different fonts available, there are only two categories: serifs and sans-serifs. Serifs have a slight decorative projection at the end of certain characters that aids in character recognition. They originated with Roman stone inscriptions: letter outlines were placed on stone with paint, and the carvers would follow the brush marks which flared at the ends. The original serifs, called old style serifs, have only small differences between the thick and thin portions of the character. The narrowest part of the character, the stress, is diagonal. The more common serifs, such as Times New Roman, are transitional serifs, which feature a stronger contrast between thick and thin strokes. The modern serifs, such as Bodoni, feature very extreme contrasts between thick and thin strokes.
Sans-serifs do not feature serifs at the end of the strokes; instead, the ends terminate in blunt edges. Generally, there is little contrast at all between the thickest and the most narrow portion of the character. Humanist sans-serifs are composed primarily of classical and Renaissance forms, strongly reminiscent of calligraphy. Examples of humanist sans-serifs are Calibri and Gill Sans. There are also geometric sans-serifs, such as Futura and Century Gothic, which feature perfect circles. However, the more popular sans-serifs are grotesque, featuring straight lines and little variation. Examples of this category include the ubiquitous Helvetica and Arial.
Type generally plays one of three roles in a design: text, display type, and decorative type. Text is the typeface for the main content of the design; therefore, the primary concern is readability. Common wisdom in the design and typesetting community indicates that serifs are more readable than sans-serifs. That makes sense, given that the serifs are considered to enhance character recognition. However, recent studies indicate that serifs may not be the easiest to read after all. Instead, the most predictive marker of readability is the level of familiarity and comfort with the typeface. Therefore, it makes sense that most people would find Times New Roman the most readable font, given its incredibly common presence in corporate and academic communications.
Display type is the large, relatively graphical text used for titles and headings. Sans-serif typefaces are very well-suited for use here. Their strong, even strokes look more assertive and striking than the narrow “legs” present in serifs. However, it is strongly preferred that you use the grotesque or humanist sans-serifs for display text. Display type is used relatively often within a web page, so you want to make sure that the font is not so decorative that it is unreadable. Some designers choose to increase the eye-catching drama of sans-serif display types by tightening the tracking such that the characters actually touch, lending the text an even more prominent, bold look.
In the words of James Felici, “decorative type is usually advertising type.” It is the fancy, creative, shocking, goudy, explosive typefaces designed to grab the attention of the reader. This type is generally used for logos, titles, headings, and areas where you want to quickly and effectively gain the attention of an audience. Because this type is normally displayed at large sizes, readability is much less important than impact. Therefore, it should not be used as text. There are many different decorative types, so it is hard to classify them. However, they often feature extremely thick strokes, inlines and outlines, calligraphic characters, or shadows. For designers, these typefaces are an easy way to outwardly connect with a specific cultural or historical underpinning while also using the face to illustrate the message of the content.
3 Tips For Selecting the Correct Font for Text
When selecting a typeface for the body of the content, it is important to keep a few things in mind — regardless of whether you ultimately choose a serif or a sans-serif. Remember, though, these tips only apply for text: you can safely ignore them for decorative and display type.
The stroke width should be as even and consistent as possible.
The difference between the thin strokes and the thick strokes is generally referred to as contrast. In order to optimize the readability and legibility of text, the contrast of the type should be consistent. Furthermore, you don’t want the stroke width to be too thin, or the text could evaporate when the page is printed or photocopied.
The area between the x-height and the baseline should be large.
Almost all of the readable portion of a typeface falls in between the top of the lowercase letters (x-height) and the bottom of the type (the baseline). Therefore, you can maximize the readable area of your type for your readers by selecting a font with a large amount of space between the x-height and the baseline. Also, if you use more than one typeface, you want to make sure that the typefaces have a similar x-height. If not, the typographic design will look inconsistent.
The counter opening should not be too large or too small.
A counter is an area that is fully surrounded by a character stroke (i.e. the opening inside the letter “o”). Counter openings occur when the space inside the character is not fully enclosed — for instance, in the letter “c” and “u.” If the counter openings are too wide, the interior and exterior character space start to blend together, and there is too much white space. If the counter openings are too small, readability is greatly diminished; “c” and “u” start to look more like an “o.” Therefore, you should test out a variety of different fonts and select one that is a happy medium between narrow and wide counter openings.
Using the tips above, you’ll have beautiful typography that adds design appeal to your page. However, adding most of these features by hand can be pain.
Leave a Reply