Please ensure Javascript is enabled for purposes of website accessibility
Scroll Top

Typography in Web Design vs. Graphic Design

We’ve learned about typography’s development and influence in history.


We’ve also talked about some of the principles that dictate its use in art and design. With the large usage and availability of types and fonts, more people and designers alike are creating typography.


Typography is the art and technique of arranging type. Designers use typography in their design work for legibility and artistry. Choice of typefaces and how they are used with the layout, grid, color scheme and design theme influence the quality of your project.


Three keys to typography design for both web and graphic design include:

  • Choosing font families
  • Pairing fonts together
  • Layout of the text.

What differences are there between use of typography for digital vs. print design?


Choosing Fonts

Choosing a font online can present its unique challenges. After all, there are so many fonts to choose from and the majority of those are now offered online for free download. Though the pool of fonts may be open to you, you should not necessarily dive right in!


Not all fonts are good fonts.


Professionally designed fonts have been perfected over a period of time by craftsmen. Many designers choose to stick with these tried and tested fonts. An example of this would be the very popular Helvetica font family.


When choosing a font for your project, think about the style of your project and your message. Each font’s individual characters have their own size, leading, tracking, kerning and measure width that affects the look of your design.


Pairing Font Families


Pairing font families together can have great pros and cons.


The key to making a good typography choice is picking fonts that harmonize. Combining fonts is a science and an art because there are basic rules, but the success comes through real design contexts where you develop a sense of how to pair the right fonts by observation. For example, start with one serif font and one sans-serif font. You can also combine typefaces but limit this to two or three fonts and be careful to use fonts that are more conservative to look clean and organized.


Layout of Text


The next step after pairing fonts, is to make sure the style of those fonts match the content of your project. Fonts can convey different moods and you want to make sure the mood matches the purpose of your design. Example: A business-specific project would require a more conservative or neutral font, while a family-specific project might call for a more fun and cheerful font.


In addition, think of the emphasis of your text either with italics, boldness, underlining, caps, font size. But be careful to use only some not all of these to add meaning and clarity to your web text. The same applies to adding special effects like 3D or embossed effects, drop shadows, gradients, or warping to your text.


Differences in Web Typography vs. Print Typography


Though the process of typography is the same for both web and graphic design, approaches differ for arranging type for digital versus print typography. While print design allows for more freedom and creativity, web fonts must be displayed clean and easy to read. Digital design also has less control over how they display across various devices and the focus is primarily enhancing readability.


Need assistance with typography for your web design or graphic design project?


Let us help you today. 


Article by Zipporah Schumaker