Request Brochure

Blog & News

Looking at Typography

students collaborating on coding project

Hello iD readers! My name is Marta and I’m part of the design team at iD Tech Camps. I started out with iD back in 2004 as a  summer camp instructor for  Web Design & Flash® Animation at our Stanford University location. Fast forward to 2006 and beyond and I found myself a full-time employee at the iD headquarters doing what I love…being creative and having fun. So from here on out, I’ll be writing blog articles that will give you some fun tips and tricks of the trade about design, photography, Photoshop, Illustrator and creativity in general. Let’s get started, shall we?

SO, WHAT’S THE BIG DEAL ABOUT TYPOGRAPHY?

Whether you realize it or not, typography is an integral part of design. Not only does typography play a practical role in design, such as how easily a viewer can read and understand the information at hand, typography plays an aesthetic role as well. Different fonts can actually convey a specific feeling depending on how you utilize size, kerning, leading and styles.

CAN YOU SEE IT?

Did you know that typography is practically everywhere you look? Many common logos depend on the look and feel of the type within their logo design, and even though the everyday viewer may not see it, subconsciously the logo can send a message. Here’s some cool logos have hidden things in them.

logo_fedex

Can you see the arrow in between the letter “E” and “x”? This is no accident; the arrow represents the speed and precision of the FedEx Company.

logo_big10

All you sports fans out there probably know that the Big Ten conference has eleven schools, but when the Big 10 name has been around forever, what’s a tournament to do? Add the number 11 in the logo of course. Can you see it hidden around the letter “T”?

logo_sun_microsystems

Here’s a logo that had me surprised. At a quick glance the Sun Microsystems logo looks like just another logo. Take a closer look and you’ll see it’s quite complex. If you look carefully at the diamond shape in the logo, you’ll eventually be able to see that at any angle the word, “SUN” is apparent…all while only using the lowercase letters “u” and “n”!

THE BASICS

1.)     Specific parts or measurements make up every letter in a font. The most common ones include:

  • Ascender
  • Caps Height
  • Median
  • X-height
  • Baseline
  • Descender

graphic_type_anatomy

 

 

2.)     Most font types can fall into these categories:

  • Serif: Fonts that have serifs or “tails” at the end of each letter. These fonts often are used to convey a feeling of prestige. They are also common in most large areas of printed type, like books and magazines, because the serifs create an invisible line for the eye that allows for better legibility.
  • Sans-Serif: Fonts that do not have serifs or tails at the end of each letter. These fonts usually convey more of a modern feel and are used on digital mediums since they are easier to read on screens and look better when placed at very small sizes.
  • Script: Fonts that have a handwritten or fancy feel to them. Most often used as headings since they become difficult to read as font size decreases.
  • Dingbats: Fonts that incorporate images in place of each letter. These fonts can be great tools for adding clipart into your designs since it’s easy to resize them without losing the quality.

graphic_font_categories

 

3.)     Some Important Typography Lingo:

  • Font Styles: These can include such styles as Regular, Italic, Semi-Bold, Bold, Condensed (and many more). Not all fonts have a wide range of style options, but if you can find one that does it will give you more variety in your design, while keeping a consistent look to the text. (Myriad and Adobe Caslon Pro are good examples of fonts with a wide range of styles.)
  • Kerning: Adjusting the space in between two letters.
  • Leading: Adjusting the space between lines of type.

graphic_type_styles

 

 

4.)     Quick Tips When Incorporating Fonts into Your Designs

  • Use only 1-2, (at most 3) different font families when designing a piece that incorporates a lot of text that is crucial information for a viewer. (ie: a newsletter, informative poster, website, postcard). Too many font families are often distracting to the viewer.
  • If you choose to use more than one font family, it’s a good idea to use one for all of your headers or titles, and then use one for your body text.  Don’t mix them up between headers and body text.
  • When designing for the web, remember to keep in mind the age-old rule of thumb and use web safe fonts if you want your type to be HTML text. If you use a crazy, new font, your layout design may look great on your computer, but view it on another computer that doesn’t have that specific font and your layout will look completely different.
  • Try using a font family that incorporates a wide range of styles. Styles are the options you have to make your text look Regular, Bold, Italic, Semi-Bold, Black, Heavy and the list goes on. Many free fonts can look neat as headers, but if you use them in the text body, they don’t always give you the ability to use different styles within the font family that you’re using.

There is a wealth of knowledge to learn about typography. Many beginning designers often over-look typography because it seems like an afterthought. Want to learn more about typography? Check out iD’s Web & Graphic Design Courses or the iD Visual Arts Academy. You’ll be sure to learn about typography basics in these courses!

In the meantime, what are some of your favorite examples of typography in our everyday world? Do you find interesting typography in logos, posters, billboards or magazines? Have you seen any really creative ways to manipulate text? Have you created any really cool examples of typography? Leave a comment and let the iD world know what you’ve seen or created!

  • Pete

    Cool Post, Fuzz! Thanks for making us smarter.

  • Nova

    I can’t believe I never noticed the arrow in FedEx’s logo. Great job on your first blog, Marta! Very informative. I can’t wait for the next one…