Using Font and Typography as a Design Element

Posted: 8/30/2020

Google Fonts is a free tool to implement custom typography that will help you stand out from the crowd.

Font selection can be an overlooked element when designing a website. Designers often discuss color, logos, images, mobile design, menu design, and other user interface elements without discussing one of the most important - font. Font is how writing is displayed on the screen and what your user will be interacting with as they read what you have to say. Many websites are littered with large images and design elements that detract from the true content of the web page. For this reason, font is a crucial design element.

With the proper use of various font-families and font styles, you can set your website apart from others. Used in conjunction with photography, color, and other style elements, font becomes the cohesive piece to your brand standard puzzle.

Considerations when choosing typography for your website:

Stay away from handwriting or curvy fonts for the main copy of your pages - font should be legible and easy to read. Handwriting or curvy font may seem the most artistic, but they also create legibility issues for your users.
Using handwriting and curvy fonts are most appropriate for headlines or as an accent to another font on your page.
Sans-serif is easiest to read on digital devices and should be the preferred style of font used for body copy on a web page. Street signs utilize sans-serif font because it is the easiest to read, pay attention next time you approach a STOP sign to the font used on the sign.
Serif fonts, much like handwriting and curvy fonts, are best utilized as titles or as accent fonts to another main font on your website.
Use a font that is easy to read - what you have to say on your website matters, and the message needs to be legible.

Categories of font

Serif
Sans-Serif
Handwriting / Curvy
Display
Monospace

Each category of font will also have bold, italic, and thin options for how heavy the font will appear on the screen. Choose a font that represents your branding and communicates the feeling that you want your end user to engage with. Make sure the font is easy to read, and that it doesn't detract from the overall messaging on your website. Now that we have laid out some guidelines for choosing a font, how do we implement them on a website? Google fonts is the answer to this question.

Using Google Fonts

Google Fonts is one of the easiest ways to set your website apart from others. With thousands of font options to choose from and simple scripts to install on your website they are easily implemented. Learn more about Google fonts here, and read the API (application programming interface) guide here.

The fonts hosted by Google utilize the copy and paste of a CSS library to import the font to your website. Once the font and CSS (cascading style sheet) is loaded onto your website, you are free to change the font family on your website and show off a brand-new look and feel for your site.

Examples of different font

Set yourself apart. Change your font!
Set yourself apart. Change your font!
Set yourself apart. Change your font!
Set yourself apart. Change your font!
Set yourself apart. Change your font!
Set yourself apart. Change your font!
Set yourself apart. Change your font!
Set yourself apart. Change your font!

The best way to get started with Google Fonts is to explore the different font options available to use, and pick one. Follow the instructions in the links below, and see what font combinations you can come up with to solidify the look and feel of your website. Changing the font on your website is not difficult and should be a design element that is considered carefully.

Font and typography families used on this page

        
          font-family: 'Anton', sans-serif;
          font-family: 'Heebo', sans-serif;
          font-family: 'Lexend Peta', sans-serif;
          font-family: 'Lora', serif;
          font-family: 'Marck Script', cursive;
          font-family: 'Press Start 2P', cursive;
          font-family: 'Roboto Slab', serif;
          font-family: 'Space Mono', monospace;