add impact to type-driven projects _ codrops
TRANSCRIPT
02/07/13 Add Impact to Type-driven Projects | Codrops
tympanus.net/codrops/2012/03/28/add-impact-to-type-driven-projects/ 1/8
In Articles by Carrie Cousins • March 28, 2012 • 2 Comments
Add Impact to Type-driven ProjectsIn type-driven design, use varying type sizes, weights and color for impact and to
create hierarchy.
When working with type-driven projects it is of utmost importance to create a distinct
hierarchy in the design, while adding emphasis in all the right places. This sense of
logical progression from one element to another on will help users better understand
your website and navigation tools.
Creating hierarchy is about much more than size. While type appearing at larger
point sizes will serve as a guide, it is not enough. The best type-heavy projects use a
combination of fonts, sizes, weights and flair to create an effective overall design.
Codrops
02/07/13 Add Impact to Type-driven Projects | Codrops
tympanus.net/codrops/2012/03/28/add-impact-to-type-driven-projects/ 2/8
Size
Varying font sizes can create a sense of scale and hierarchy for most projects.
Typically the size of words used for the main text on your site should decrease by
text volume. In other words, headlines should be larger than subheads and
subheads should be larger than the main text. (Note how size is used for the text on
this website; it follows the formula.)
There is no set rule on the best sizes for text elements, but all should be readable.
(Actual point sizes also relate to the fonts selected.) Use the eye test when
experimenting with fonts. Does text feel too large or small? Blocks of text that are too
large tend to look less professional than properly scaled typefaces. In most cases it
is best to keep very large text to a minimum.
To create impact and drama, stick to one extra large or oversized bit of text. It can be
a header, logo or even text used as an art element. Let this element stand alone; set
aside logos and other text elements that are used as art when considering the size
of letters for copy.
Fonts
02/07/13 Add Impact to Type-driven Projects | Codrops
tympanus.net/codrops/2012/03/28/add-impact-to-type-driven-projects/ 3/8
The makeup of your font selections also affect how large (or small) type appears.
Typefaces with wide set widths – the horizontal space from the left side of a letter to
the right – will appear larger than those with tighter set widths. (Note the typefaces
above; each are the same point size but have dramatically different set widths.) Font
variations with very tight, such as condensed or compressed typefaces, will always
appear smaller than their wider counterparts from the same family, even at the exact
same size.
The overall shape of your typefaces can also impact how they appear. Fonts with
more round shapes tend to be shorter but have larger set widths. The spaces within
letter strokes and between the letters are also more open. More oval-shaped
typefaces tend to have increased x-heights but smaller set widths with less white
space in and around letters. Each font style can carry weight and work in a variety of
projects.
The kerning, or amount of horizontal space between each letter, can also impact the
weight of words in your design. Extremely tight kerning, where the edges of letters
begin to touch, can feel very tight and blocks of text can look heavy, and be
intimidating for readers. Very loosely kerned text is very light. Be careful of kerning
extremes. Text that is too tight or too loose is not very readable when used for large
blocks of text; it is best used for only a few words in special design situations.
Stroke Weight
02/07/13 Add Impact to Type-driven Projects | Codrops
tympanus.net/codrops/2012/03/28/add-impact-to-type-driven-projects/ 4/8
One of the most important factors when considering a typeface is the stroke weight.
The thick or thin lines that compose each stroke of each letter can carry
considerable weight. Typefaces can contain any combination of thick, thin and
average strokes for each letter.
Fonts with thicker strokes carry considerably more weight than thinner ones. It is
also possible for fonts in a single family to have varying weights as well. You can
determine stroke weights within a family by looking at the font name – Arial (or Arial
regular) is the base type style and has an average stroke weight. Arial bold is
somewhat thicker and heavier and Arial black has an extremely thick stroke weight.
This variation of fonts is quite common and most type designers use the same
names (thin, roman, medium, bold, heavy, black) to denote weights within a family.
Just as more rounded fonts have a more open feel, typefaces with thinner strokes do
as well. Fonts with thicker strokes have more punch and impact. For the best results,
use fonts with medium to average stroke weights for blocks of text. Use super thin or
thick letter forms for accents such as headlines or smaller headers in copy.
Be careful using fonts with thick and thin strokes within each letter, such as Bodoni.
In large blocks of text, these typefaces can be more difficult to read and work best as
accent typefaces.
Color Considerations
Also be mindful of your background color and type color in combination with your
font selections. The contrast created by color choices can also impact the weight of
each typeface.
02/07/13 Add Impact to Type-driven Projects | Codrops
tympanus.net/codrops/2012/03/28/add-impact-to-type-driven-projects/ 5/8
High contrast combinations, such as black text on a white background or white text
on a black background, work best with average size and weight or heavier, larger
type choices. Letters with thin strokes and at small sizes can sometimes get lost or
appear to blur.
02/07/13 Add Impact to Type-driven Projects | Codrops
tympanus.net/codrops/2012/03/28/add-impact-to-type-driven-projects/ 6/8
Thin letter forms work best with less contrast, such as on lightly tinted background
with black or dark colored text. Letters will appear sharper and easier to read.
Low-contrast designs (such as a navy background with blue text or the brown on
brown theme used by Night Owl Interactive) work best with weightier, thicker
typefaces. Small, thin fonts will fall into the background when there is little contrast to
emphasize letters. Type, though, with more heft can have a lot of impact in
monotone or high-color designs.
Flair
02/07/13 Add Impact to Type-driven Projects | Codrops
tympanus.net/codrops/2012/03/28/add-impact-to-type-driven-projects/ 7/8
Finally, you can always add weight to almost any bit of type by adding color or using
a novelty typeface. These things, though, should be done in moderation.
Add color to a single word, phrase or text-heavy logo to make an item stand out from
the other type. Color can bring emphasis to letters even if they are not actually any
larger than other characters. Avoid mashing too many colors together or using too
many hues in a small space; this can be distracting and actually do the opposite of
what you are trying to accomplish.
Apply the same theory using a novelty typeface. Distinct lettering can also draw the
eye in a text-laden design project.
Conclusion
Remember, the most effective type-driven websites combine multiple typefaces and
styles while creating a distinct feel and hierarchy. Mix and match type categories
(serifs, sans serifs and novelty fonts) and sizes to get the best overall effect.
Also keep moderation in mind. Type-driven projects are among some of the most
difficult to accomplish. While you want to establish a creative and visually appealing
site, readability should be the top priority. Avoid using too many different fonts.
Select one or two families for each project and stick to those typefaces throughout,
but use variations within each family and color to add emphasis and contrast as
needed.
02/07/13 Add Impact to Type-driven Projects | Codrops
tympanus.net/codrops/2012/03/28/add-impact-to-type-driven-projects/ 8/8
Related Articles
Understanding and Using Type Categories in Web Design
Successful Web Design: It’s All About The Details
Creative Web Typography Styles