![\"White](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03145853\/Color-Contrast.png\")
<\/figure>\n\n\n\nContrast is not achieved simply by finding two very different colors. Just because two colors are different doesn\u2019t mean they will provide good contrast if their value is the same.<\/p>\n\n\n\n
A simple test to see if your design has enough contrast is to convert it to grayscale.<\/strong> This will allow you to easily see the value of the colors, which in the case of contrast, is much more important than color.<\/p>\n\n\n\n In the image below, even though the colors are very different, once they are converted to greyscale, you can see that their values are so close the words become almost impossible to read. This tells you these colors are not a good pair.<\/p>\n\n\n\n If you aren\u2019t at a computer, you can use a trick I learned from a professor I had in college. <\/p>\n\n\n\n Look at the image. Squint your eyes. If you can no longer differentiate the colors, you don\u2019t have enough contrast.<\/p>\n\n\n\n Having good color contrast is an important part of ensuring that everyone can read the text on your site. Not everyone has perfect vision, and without enough contrast, people with vision deficiencies may have trouble seeing the text against the background.<\/p>\n\n\n\n If you want to check the contrast on a finished website, use a free color contrast checker from a company like Accessible Web<\/a> or WebAIM<\/a>. Both of these tools can help you ensure that your site is meeting Web Content Accessibility Guidelines (WCAG)<\/a> with regards to color contrast.<\/p>\n\n\n\n Typeface refers to the shape and style of lettering that is used. <\/p>\n\n\n\n Wait, isn\u2019t that what a font is? No, not exactly.<\/p>\n\n\n\n The word typeface is often used interchangeably with font by non-typographers (i.e. most people), but technically there is a difference.<\/p>\n\n\n\n Font refers to the specific variations of the typeface that people use\u2013the typeface refers to the concept of the type design itself.<\/p>\n\n\n\n This sounds a little abstract and wonky but it\u2019s actually pretty easy to understand. Using one of their own typefaces as an example, the website builder Wix<\/a> came up with this easy visual explanation of typeface vs font<\/a>:<\/p>\n\n\n\n Okay, now that we have that out of the way, we can talk a little more about how to use different typefaces and fonts productively.<\/p>\n\n\n\n The typeface you select should match the message and the medium of your project. There are a range of emotions to choose from, but you should also consider utility.<\/p>\n\n\n\n Could you imagine seeing a business contract in Comic Sans font? No way. And Euphoria Script would make really awful text for highway signage. <\/p>\n\n\n\n Most word processors and website builders come with a decent range of fonts. There are also tons of free fonts available online (Google Fonts<\/a> is really good), as well as more exclusive fonts you can purchase.<\/p>\n\n\n\n But a word of caution. It\u2019s easy to go overboard with typefaces and font variations.<\/p>\n\n\n\n There is no need to use more than one typeface. You can get a lot of mileage using a single typeface and a few font variations. This is an easy way to create a sense of unity throughout an entire project.<\/p>\n\n\n\n Obviously people do employ a wide range of typefaces and fonts on a page\u2013it can work, but there is a lot to be said for using just one or two. The section on Mixing Fonts<\/a> from Practical Typography provides some helpful perspective and a few easy guardrails to follow. <\/p>\n\n\n\n Leading is the space between lines of text. The word leading originated when type was set by hand in printing presses. Lead strips were put between lines of type to add space.<\/p>\n\n\n\n Web designers refer to leading as line height or line spacing, and it can be adjusted in the CSS based on point size, no need for lead strips.<\/p>\n\n\n\n Leading, line height, line spacing\u2013these terms refer to the same typographic element.<\/p>\n\n\n\n Without enough space between lines of type, it becomes difficult for the viewer to read and follow from one line down to the next. Adding too much space makes large sections of text tedious to read.<\/p>\n\n\n\n In print design, standard leading is 120% the point size of the font. For example:<\/p>\n\n\n\n In web design, a good line height is also 120% the point size of the font.<\/p>\n\n\n\n This is not a hard fast rule, of course, because different typefaces will have varied x-heights, ascenders and descenders of each letter form.<\/p>\n\n\n\n I wouldn\u2019t go less than 120% or over 140% as a general rule of thumb, especially for the main body of text.<\/p>\n\n\n\n Many times, very tight or very open leading can yield beautiful typographic treatments, but should be reserved for small amounts of text, not large blocks of copy. <\/p>\n\n\n\n Kerning is the process of adjusting the space between two individual characters.<\/p>\n\n\n\n The goal of kerning is to equalize the appearance of whitespace between characters. Without kerning, certain pairs of letters are displayed with a distractingly large gap between them.<\/p>\n\n\n\n These days, most fonts come with tons of kerning pairs built in by the person who designed the font, so the letters with problematic spacing automatically adjust.<\/p>\n\n\n\n But, typographers still manually adjust kerning to improve the text’s presentation. This is especially important for large types and wordmark logos, where the tightness or looseness of the letters is especially pronounced. <\/p>\n\n\n\n While not as important in paragraphs of small type, kerning can be quite functional when you\u2019re attempting to avoid line breaks in your design.<\/p>\n\n\n\n To practice your kerning skills, check out this letter spacing game<\/a>. You may recognize that it\u2019s what I used to create screenshot examples of good and bad kerning.<\/p>\n\n\n\n In typography, hierarchy refers to the prominence of your typographic elements relative to each other.<\/p>\n\n\n\n The goal is to foreground what is most important, followed by the next important thing, and so on.<\/p>\n\n\n\n Web designers often establish typographic hierarchy by using the header tags <h1>, <h2>, and so on. <\/p>\n\n\n\n For example, this post has a <h1> title about typographic elements followed by many <h2> sections, each of which explains a particular element in detail. The title header is a larger and heavier font than the section header, which is larger and heavier than subsection headers, and so on.<\/p>\n\n\n\n Here\u2019s a screenshot from the web style guide for Crowdstrike<\/a>, the cybersecurity company, that provides an easy visual breakdown of typographic hierarchy:<\/p>\n\n\n\n You can really see the entire hierarchy at a glance in this image, with the typeface, case, font size, kerning, and color specified for each level.<\/p>\n\n\n\n Now this is really important for the common sense reason that it helps readers figure out what\u2019s important by breaking down information in a logical way. <\/p>\n\n\n\n But hierarchy also helps search engines like Google understand your content<\/a> and display it to the right audience in search results. If you care about SEO<\/a>, you will have to address hierarchy from this angle.<\/p>\n\n\n\n Using headers, subheads, and so on is critical, but there are other ways to influence the hierarchy. You can draw attention to different parts of the page with other typography elements, like using a different typeface, a contrasting color, or white space.<\/p>\n\n\n\n Achieving an effective hierarchy should generally start with a sketch where you lay out what your most important element is down to your least important element.<\/p>\n\n\n\n The most important element doesn\u2019t have to be larger, it just needs to take more prominence over the other elements. <\/p>\n\n\n\n Ask yourself what you want the viewer to read first. This doesn\u2019t have to be what is actually first in your layout \u2013 it just needs to be the focal point.<\/p>\n\n\n\n On the CrazyEgg homepage, for example, the most important element is the signup:<\/p>\n\n\n\n The largest text is the main message \u201cSee what\u2019s wrong with your website\u201d, <\/p>\n\n\n\n But the largest and most prominent feature is the large dark blue box, which contains the bright white signup field.<\/p>\n\n\n\n All the other text is small, and focused on lowering the perceived risk of signing up\u2013social proof that other companies use it, 30-day free trial, cancel anytime\u2013but you really only see if you are contemplating signing up.<\/p>\n\n\n\n Color and contrast drive the hierarchy here, which make the signup form standout despite a lack of huge, pushy text.<\/p>\n\n\n\n White space, or negative space, is the space between elements in a composition.<\/p>\n\n\n\n If your typography and other design elements are dense and too close together, your content will become difficult to read. This is where whitespace comes in.<\/p>\n\n\n\n I hear a lot of my clients telling me to fill in those empty spaces or to not waste the space, but white space is a very intentional component of good design. In 1930, Jan Tschichold wrote:<\/p>\n\n\n\n \u201cWhite space is to be regarded as an active element, not a passive background.\u201d<\/p>\n\n\n\n Whitespace can be used to create balance or lead the viewer’s eye from one part of the composition to the next. It can invoke a feeling of elegance or add a level of communication to a typographic treatment.<\/p>\n\n\n\n The FedEx logo uses the whitespace between the uppercase E and the lowercase x to create a counterform \u2013 an arrow. This adds a secondary level of communication to the word.<\/p>\n\n\n\n Another good example is the website of Milton Glaser<\/a>, which was newly designed when this post was originally published in 2012. <\/p>\n\n\n\n At the time I thought it was a great design that employed whitespace to add a feeling of simplicity and elegance, as well as create positive and negative forms that lead your eye around the content.<\/p>\n\n\n\n Well, more than a decade later, and their website is virtually unchanged, which is a testament to the success of an enduring design.<\/p>\n\n\n\n Typefaces can be divided into two major categories, serif and sans serif, which denotes whether or not the characters have finishing strokes projecting slightly from the ends of characters.<\/p>\n\n\n\n Serif typefaces have those small projections, whereas sans serif do not.<\/p>\n\n\n\n Slab serif typefaces are much less commonly used, and have blocky (slab-like) serifs rather than the finishing stroke style of serif typefaces.<\/p>\n\n\n\n Print designers have always debated which font is easier to read \u2013 serif or sans serif.<\/p>\n\n\n\n The truth is, there is no evidence to support that either one is more legible than the other in print. Some say sans serif fonts should be reserved for titles and headers and serif fonts should be used for body copy, while just as many others say the exact opposite.<\/p>\n\n\n\n However, when dealing with web design or any kind of on-screen design, it is generally agreed upon that sans serif fonts are easier to read on screen. <\/p>\n\n\n\n They should be used for the majority of text on screen while serif fonts should be primarily used for small sections of copy such as titles and headers.<\/p>\n\n\n\n Slab serif fonts are distinctive, and can certainly add a unique look to headers and large text. I would be reluctant to employ a slab serif font in body text, as it is generally more difficult than either serif or sans serif in smaller font sizes.<\/p>\n\n\n\n Tracking refers to the horizontal spacing between characters throughout an entire text, or block of text. <\/p>\n\n\n\n This typography element is also known as character spacing or letter-spacing in CSS. It\u2019s distinct from kerning, which adjusts the spacing between a single pair of letters, whereas tracking is applied to all pairs of letters within the given block of text.<\/p>\n\n\n\n Essentially, tracking makes the text fit tighter or looser together. More \u201copen\u201d tracking is generally easier to read, but only to a point.<\/p>\n\n\n\n Typically, you will see tracking applied when all-caps or small-caps text is used, which are common in scholarly journals, law reviews, and in many standard citation formats. For example:<\/p>\n\n\n\n The all-caps \u201cTable of Contents\u201d with normal spacing is okay, but there is no balance. The T seems offset quite far from the remaining letters of \u201cTable\u201d, which are bunched quite close together. <\/p>\n\n\n\n Expanding the tracking by 0.8pt makes for a much more balanced presentation overall, whereas expanding by 1.6pt starts to look a little too diffuse.<\/p>\n\n\n\n A point-size indicates the size of the typeface. Think about the difference in size between a 10pt and 24pt font.<\/p>\n\n\n\n Print design and web design differ here \u2013 mainly due their respective mediums.<\/p>\n\n\n\n In print design, 10pt-12pt font for body copy is generally accepted.<\/p>\n\n\n\n On the web, we deal in pixels. The equivalent of 10pt is 13px and this is a good size to stick with for body copy on the web. <\/p>\n\n\n\n Anything smaller than these sizes will be too small for the average viewer to read.<\/p>\n\n\n\n Of course, keep your audience in mind. If you\u2019re designing a website or brochure for a more mature audience, make your type bigger \u2013 your viewer will be happy you did.<\/p>\n\n\n\n One last thing about point-size: one 12pt font can be larger than another 12pt font, due to differences in the typeface. <\/p>\n\n\n\n For example, here is the start of the Gettysburg address in three different typefaces with a 12pt font size:<\/p>\n\n\n\n With the Roboto Serif font, the same text at the same point-size font takes up an extra line compared to the Arial and Times fonts.<\/p>\n\n\n\n If you wanted to keep the switch from Times to Roboto Serif and keep the text presented similarly, you would need to decrease the Roboto Serif font size until you get a matching size.<\/p>\n\n\n\n The line length is the average number of characters in a single line of text.<\/p>\n\n\n\n Optimal line length averages between 40-85 characters. This creates a comfortable, natural reading pace. Too short, and the reader is jumping down lines too often. Too long a line length, and it starts getting harder to move all the way back to the left side of the page, find your place, and continue reading.<\/p>\n\n\n\n You\u2019ll have to use your judgment about what works best for the message you are trying to convey, but if you stay within this range, most readers should be able to follow along without irritation.<\/p>\n\n\n\n![\"Bright](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03145901\/typographic-elements-ce-2.png\")
<\/figure>\n\n\n\n2. Typeface and Font<\/h2>\n\n\n\n
![\"Wix](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03145902\/typographic-elements-ce-3.png\")
<\/figure>\n\n\n\n![\"Comic](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03145855\/Fonts.png\")
<\/figure>\n\n\n\n3. Leading and Line Height<\/h2>\n\n\n\n
![\"Examples](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03145856\/Line-Height.png\")
<\/figure>\n\n\n\n\n
4. Kerning<\/h2>\n\n\n\n
![\"Examples](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03145904\/typographic-elements-ce-6.png\")
<\/figure>\n\n\n\n5. Hierarchy<\/h2>\n\n\n\n
![\"Crowdstrike](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03145905\/typographic-elements-ce-7.png\")
<\/figure>\n\n\n\n![\"Crazy](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03145906\/typographic-elements-ce-8.png\")
<\/figure>\n\n\n\n6. Whitespace<\/h2>\n\n\n\n
![\"FedEx](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03145907\/typographic-elements-ce-9.png\")
<\/figure>\n\n\n\n![\"Screenshot](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03145908\/typographic-elements-ce-10.png\")
<\/figure>\n\n\n\n7. Serif, Sans Serif, & Slab Serif<\/h2>\n\n\n\n
![\"Examples](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03145859\/Serifs.png\")
<\/figure>\n\n\n\n8. Tracking (Letter-Spacing)<\/h2>\n\n\n\n
![\"Examples](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03150606\/table-of-contents.png\")
<\/figure>\n\n\n\n9. Point-Size<\/h2>\n\n\n\n
![\"Examples](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03145858\/Point-Size.png\")
<\/figure>\n\n\n\n10. Line Length or Measure<\/h2>\n\n\n\n
![\"Examples](\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2012\/01\/03145857\/Measure.png\")
<\/figure>\n\n\n\n