learn-co-curriculum / hs-intro-web-design-teachers-guide-typography

###SWABTS Students will be able to recognize appropriate font size, style, and spacing to create a more readable site design

Motivation

What is typography? Typography can simply be described as the art of type. It's everything you can think of – like fonts, sizes, and readability. This becomes obviously important for websites because you can't relay information or sell anyone anything if they can't read about it.

Lesson Plan

• The basics

• Sizing
  • The Type Size, also called the Cap Height, is the overall height of capital letters in the formation of words.
  • The Ascender is the upward tail on letters like h, l, t, b, d, and k.
  • The Descender is the downward tail for letters like g, q, and y.
  • The Counter is the white space located inside letters like o and p.
  • The X Height is the height of the letter, and does not include ascenders or descenders.
  • Baselines are the boundary that the lowest part of the letter rests on. Take a look at the y, p, g, p and y letters in the illustration above. The solid line they are resting on is the baseline.
• Kerning
  • Have you ever seen a paragraph or advertisement that made the letters appear either s p a c e d w a y out or scrunched all up so it was hard to read? The effective use of kerning and leading will fix that problem.
  • Kerning is the space located between individual letters of a word. If you can remember the kernels on an ear of corn, it’s easy. When the kernels of corn line up, it makes a nice neat row.
  • If the kerning is off, so will the appearance of the word or line of text you are working with and it will be harder to read.

• Leading is the space between the lines of text. If you look at the illustration above, you will quickly notice the space between line one and two is too close, giving the impression of not enough space. By adjusting the amount of leading between lines, the text becomes much more readable and less pinched.
  • How do you want your text to line up? Is this a standard body of text, a headline or are you in need of a more professional finish? Depending on the type alignment, you may inadvertently create the wrong impact based solely on the placement of your message.
• Type Alignment
  • Default writing techniques will use left alignment to create easy to read text for the reader. Casual letters, unpublished manuscripts, and basic paragraph styles tend to fall into this category.
  • Center alignment is used to draw attention and is used a majority of the time for Headlines or Titles. Newspaper headers, book titles, and report titles are excellent examples of center alignment.
  • Right Alignment is a clean crisp professional look and is used quite a bit for corporate business letters, return address labels, business cards and a variety of other applications where a formal style of alignment is needed.
  • Justified alignment is usually reserved for newspaper print and body text for textbooks, and is more difficult to work with. This type of alignment creates perfect alignment on both the left and right margins without regard for the actual characters. This can lead to a condition called tracking, or the creation of “rivers” of white space throughout the text body. If this happens, reduce the tracking gradually to correct the illusion.
• Font
  • Now that we know how to identify the parts, make sure the spacing is correct and we’ve decided on the image we want to portray, selecting what your message will look like is paramount to leaving the gravy off the mashed potatoes at dinner. You’re still going to have a nice dinner, but if you want to get saucy, pick a type category that fits.
  • Serif type has extensions or strokes on the ends of the letters. Times New Roman is a perfect example of this. This type of font is easy to read for longer pieces and tends to be a little more conservative. If you do not deliberately choose another font, most programs default to the Times New Roman style.
  • San-Serif does not have extensions or strokes on the ends of the letters and are used heavily for labeling, headlines and titles. This is also easy to read with a more contemporary feel to it. Children’s books use this because it is more easily identifiable as children are learning the alphabet.
  • Script, symbols and decorative type are all styles of type categories to create a specific image or message. Weddings might lean more toward the fluid motion of a script type while a child’s birthday might be more inclined to like a decorative font from a favorite movie.
• Whatever font family you choose bears careful consideration in the design of any piece. Here are a few suggestions to get you started:
  • The font you decide on should not dominate the piece. Fonts are like exquisite jewelry to be placed in just the right context to insure maximum results.
• Tips
  • Use care when mixing fonts. It’s kind of like mixing stripes and plaids. When in doubt, stay with something a little more conservative then add one splash of notice me.
  • Use consistency in your layouts. If you start out using an Arial font for the headers, stay with the same font throughout the piece.
  • Newsletters with columns will look better if you use the Justified Alignment. Make sure you don’t create rivers of white space though.
  • Use an 11 or 12 point font size and a serif type for maximum readability.
  • Use Italics and Bold to point out areas of interest or draw quick reference to information.
  • Use color for emphasis. Remember, reds draw the most attention if used correctly. It is amazing what one spot of red can do for an ordinary ad.
• Next time while reading your favorite blog or newspaper, observe the fonts, line heights (the distance between each line), line lengths (how many letters per line), and font weights (bold, normal, light). CSS3 gives you great control over fonts and text, so an understanding of the basic rules of typography will come in handy as you design and build websites.
• Steve Jobs calligraphy story

Conclusion/So What?

Fonts play a much bigger role in relaying information than you might think.

Hints and Hurdles

View SWABTS on Learn.co and start learning to code for free.