Categories / Tutorials

What is typography?

Maryam Taheri March 31, 2021 · 4 min read

First, we’ll start with the definition: typography is the visual art of creating written words. Before the digital age, typography was a rather specialized craft that was confined to the worlds of book and magazine design and a range of advertising and public works. Road signs, billboards and product packaging are some examples of where typography is used in the physical world.

2typography-image_t

Once the internet became a graphic medium, however, the art of typography exploded in a thousand different directions. Never before in history has the printed word shown up in such abundant visual diversity. Web designers now have countless fonts to choose among, as font-creators sell and share their work online.

The challenge of being a good typographer

font-personalities-cheat-sheet2

Unfortunately, an unlimited choice of fonts does not automatically mean the web designer has the ability to know which one is best. Choosing a font is a matter of being versed in some basic rules of typography and of having a bit of an artistic eye as well. The rules are learnable, and perhaps the artistic eye develops over time.
Check out this infographic below to discover the right typeface for your project:

fonts31

Basic elements of typographical design

anatomy-diag

Fonts are chosen partly with a sense of the aesthetic tone they convey, and partly for their “legibility.” This term describes the ease with which individual letters can be identified. Some fonts have been polished for centuries, and they’ve become common for a good reason. There are numerous descriptive terms to separate fonts into general categories, such as “serif,” “sans-serif,” “monospaced” and “cursive.” These definitions  are relevant to the traditional types of text-fonts, but have no meaning when applied to an artist’s creation such as this rather unsettling alphabet.

type2c

Another word, “readability,” applies to the relationship of the letters to each other, as well as to the interaction of colors between the text and the background. You can have a beautiful font, but if you’ve got grey letters on a yellow background, no one will be able to read it. The “leading,” or space between lines of text also influences readability. This space should be between 1.25 and 1.5 times the font size. A good font will also usually have “kerning,” which means that the space between letters will be adjusted to fit the shape of individual letter pairs.

BHelvetica

How the text relates to the page

Further typographical design choices center on how the lines and blocks of text are set on the page. Lines that are too long tend to lose the reader’s interest, and a page that’s too crammed with text will feel like a crowded room and make the user want to click away. The practice of making headings larger than text helps to guide the reader’s attention and give clues about the structure and meaning of the page. Also, the interaction between images and words can feel natural or awkward, due to the structural way the text flows around the image.

Art vs. function

These are the two factors that typographers are always balancing. A web designer might purchase a display font such as “Charcuterie Engraved” for a banner or a logo, but a news article written in such a font would be exhausting to read through. Even while more and more artists offer their unique font creations, legibility research is providing specific information to support the use of classic-type fonts for blocks of text.

charcuterie-engraved2-f

+++++

For inspiration in choosing and positioning the fonts that will best express your personal brand, spend some time with this outstanding set of award-winning typography from 2013 and get those creative juices flowing!

Lettering Worksheets
Getting started with hand lettering?
Free lettering worksheets

Download these worksheets and start practicing with simple instructions and tracing exercises.

Download now!
About the Author
Author
Maryam Taheri

I'm a recent graduate of the University of San Francisco with a degree in Biology and a passion for the creative arts. I love building websites, trying new things, and I have a passion for social media.

View More Posts
Go to My Shop
Related Articles
11 Comments
  • Very helpful article! Thank you so much :) 8 years ago
  • Nice informative article -- thanks! 8 years ago
  • What about another article or articles that shows some of the different font personalities that are posted on Creative Market for sale. Like the top 5 Strong fonts on Creative Market. Or The Best of the Friendly fonts sold on Creative Market? Or maybe ask the CM community to judge the fonts on what personality they think a font fits in best? 8 years ago
  • Thanks for this article. What would graphic design be without typography? Very fun suggestion, @Joni Solis ! 8 years ago
  • Very informative article Thank you :) 8 years ago
  • Great article, really helps me understand why some web pages keep me reading longer than others do. 8 years ago
  • Very informative article! Thanks a lot. 8 years ago
  • Something that's been lost to time is that Typeface and Font are two different things (though now inextricable synonymous). A Typeface is a family of Fonts (as accurately used in the above infographic). A Font is a specific size and weight of that Typeface (e.g., 14pt Garamond Bold, 12pt Garamond italic, etc.) It's a very nitpicky thing in today's digital world but a designer should be aware of the difference (my 2 cents pet peeve :-) 8 years ago
  • Please check my new font http://crtv.mk/aTRg 8 years ago
  • Typography makes the Word go round 8 years ago
  • Helpful article 8 years ago