×
Introducing Creative Market Pro: Download unlimited assets to elevate your work. LEARN MORE

What is typography?

By on May 2, 2016 in How To
What is typography?

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_tPin It

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-sheet2Pin It

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:

fonts31Pin It

Basic elements of typographical design

anatomy-diagPin It

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.

type2cPin It

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.

BHelveticaPin It

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-fPin It

+++++

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!

Free lettering worksheets


Download now!

img

Download now!

Getting started with hand lettering?

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

11 Comments

  1. 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?

  2. Great article, really helps me understand why some web pages keep me reading longer than others do.

  3. 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 :-)

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →