Typography 101: Web vs. Print (and Why It Even Matters)

Nov 2, 2013Blog, Graphic, Guest posts

Typography is a vital and indispensable part of design. Good typography can elevate a brand, idea or logo design to a work of art; bad typography can just as easily sink it. In “The Elements of Typographic Style,” Robert Bringhurst likens bad typography to “starving horses in a field.” If typography works in print design, it should work just the same on a Web page, right? Nope—and there’s a good reason why print and Web design have different rules and different fonts.

Typography 101: Web vs. Print (and Why It Even Matters)

A Typography Overview

Collins English Dictionary defines typography as “the art, craft or process of composing type and printing from it.” This definition works but it’s a bit rigid, especially in an age where typography has long since transcended the confines of print media. Typography is widely considered to be the art of arranging type into a design-appropriate layout that is not only legible but aesthetically pleasing.

Typography is especially important in terms of Web design, as it has a heavy influence on the way that a website conveys information to viewers. Large headers, bold blocks and small, highly legible but aesthetically pleasing text are all tools used to help draw attention, capture interest and deliver critical information.

Typography is used to convey a broad range of emotions, to attract attention and to create a picture-perfect image of a product, service or the company itself. From the professional and highly legible to the whimsical and free-spirited, typefaces have the power to impact and persuade viewers simply based on their design aesthetic. If it weren’t for typography and the amazing array of typefaces it has inspired over the centuries, the world would be a more boring place.

Different Mediums, Different Rules

At first glance, there might not seem to be much difference between typography in terms of print and Web design. When dealing with either medium, designers have to consider the audience and demographic they are trying to reach. For instance, a high-quality postcard printing service will be concerned with using the right paper stock in addition to relying on colors and fonts to create an effective and desirable product. Likewise, color, composition and a variety of other elements play a critical role in attracting end-users.

However, the differences between print and the Web quickly make themselves known once a designer starts dealing with the latter in earnest. Computer monitor sizes, monitor colors, contrast settings and the ability of users to adjust default font sizes, window sizes and font choices are all factors that separate the Web canvas from its print counterpart. Web designers were restricted to a small set of universal fonts (Verdana, Georgia, etc.) until the introduction of Typekit and other embedded font hosting services back in 2009.

There are more than just technical restrictions that separate Web typography from its print counterpart. Given that Web pages are specifically intended to convey readable information, the designer’s approach to typography becomes much different. There are a number of strategies essential to successful typography on the Web, including the careful use of macro- and micro-typography. Macro-typography focuses on the overall text structure of the document, including the location of the navigation and number of columns to be used. Micro-typography focuses on the smaller details, including the primary font-face and size, link color, spacing and headline sizes.

Benjamin Carr

Ben is a technology reporter who covers Internet-related topics.

Related Posts

25+ Free Fonts for Your Next Design Project

25+ Free Fonts for Your Next Design Project

Looking for some fresh and creative fonts to spice up your design projects in 2023? You’re in luck! In this blog post, we’ve curated a list of 25 free fonts that you can download and use right away. These fonts are suitable for various purposes such as logos,...

Adobe Photoshop Shortcuts – Infographic

Adobe Photoshop Shortcuts – Infographic

Thanks to Amanda from the Consumer Base that she sent us an ultimate Adobe Photoshop shortcuts cheat sheet. If you are a beginner or want to brush up your knowledge on Adobe Photoshop shortcuts then you are at the right place. Have look at it and let us your thoughts...

20 WordPress Tutorial channels on Youtube

20 WordPress Tutorial channels on Youtube

This post will introduce you a useful list of the 20+ best currently active WordPress tutorial related channels on Youtube. These channels are mostly focused on Tutorials and Guides for Developers and Designers that want to learn all about WordPress. Check them out...

12 AI Tools for Graphic and Website Designers

12 AI Tools for Graphic and Website Designers

Artificial intelligence (AI) is transforming the way designers work, from ideation to execution. AI tools can help designers automate tedious tasks, generate new content, and enhance their creativity. In this blog post, I will introduce AI tools that you can use to...

How to Pair Fonts – Tips and Tools for Perfect Font Combinations

How to Pair Fonts – Tips and Tools for Perfect Font Combinations

Font pairing is the art of choosing two or more fonts that work well together and create a harmonious design. Font pairing can make or break your website, logo, poster, or any other project that involves typography. But how do you pair fonts like a pro? In this...

The Ultimate Guide to Color Palettes

The Ultimate Guide to Color Palettes

Color palettes are collections of colors that work well together and create a harmonious visual effect. They are essential for any design and art project, as they help to convey the mood, message, and style of your work. But how do you choose the right color palette...

Show/Hide Comments (0 comments)
L

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Social followers

Articles

Visits

Pin It on Pinterest

Shares