Typography

Why Is Typography Important? 

Typography is absolutely everywhere. Every font choice, word, and character arrangement plays a part in how a message comes across and is received.  Just like the images and colours you use, the typefaces and fonts that you use can either add or detract from your design.

  • Check the style guide for your client (if they have one). The guidelines will outline what fonts you can and can’t use to make sure that your design is in keeping with the brand.
  • Before looking at fonts, think about the overall style you are after – fun, formal, elegant, corporate – to help narrow down what you are looking for.

Font vs Typeface

The San Francisco typeface has three main variants: SF for macOS, iOS, and iPadOS; SF Compact for watchOS; and SF Mono. Several other variants exist for internal use by Apple.

A font is one singular typeface eg: Helvetica bold, while a typeface is a family of fonts, eg: Helvetica (including bold, italic, thin etc) like in the example below:

Check here for the licence: https://en.wikipedia.org/wiki/File:Helvetica_unusual_weights.png#filelinks

Fun fact: Govt.nz uses the font Fira Sans

https://www.govt.nz/about/about-this-website/typography/

Govt.nz uses the font Fira Sans because it:

  • is easy to read
  • is not too formal
  • matches the tone of the content
  • is open source, and
  • has good browser support — that is, it displays well in most browsers.

Font Licenses

What is a font license?

One of the most important things to take into consideration when choosing fonts is the licensing of it, because if you get this wrong, you could get into a lot of legal trouble.

A font license is simply an agreement that gives you permission to use a font, subject to the terms of that agreement (also called an End User License Agreement or “EULA”).  A good description of various licenses can be found here https://thedesignersfoundry.com/licenses

A key thing to keep in mind is what licence covers the font you’re using. You can think of font licences like copyright – you shouldn’t just take someone’s image off Google and use it without checking if that’s legal, and it’s the same for fonts. Just like we use stock images, we should be using fonts that were created for the right use.

Ensure that your chosen fonts is fully licensed for your intended use. If they aren’t, you could be sued, as could your client, and your professional reputation will land in the dust quicker than you can say ‘sans serif’. It’s also vital you check the type of license for every font you want to use and ensure that you understand the terms.

Are fonts intellectual property?

Yep, just like graphic design, art, music, or books, all fonts and typefaces are designed by people and are protected by intellectual property rights. 

Beyond just the design of the font itself, fonts are classified as software, and have been engineered with features and flexibility that enable good design and usability.

Do I need separate licenses for different uses?

Yes. There are a few basic license types generally offered, each one has different type of usage. Typically, you’ll run into desktop licenses which allow you to install a font on a computer; and webfont licenses which allow you to embed the font into a website or email. 

Each font, no matter where you get it from, will generally have a license attached to it. Some will be licensed under Creative Commons, meaning that they could be free to use in any situation; some may be free for personal use but not free for commercial use; others may require payment for any use. There are a lot of variations on licenses with typefaces, so be sure to check what the licensing rights are for each font you download. Make sure you follow the license rules to make stay out of any potential legal trouble!

Fonts are technically software, so just like any other software or program, you generally need a licence to install or use it. This primarily applies to desktop fonts; however web fonts can have a different set of rules.

Trademarks, design patents or copyrights often legally protect typefaces, fonts and their designers. This is why obtaining the proper license is so important. It ensures that the right person (or company) is compensated for their work.

Fonts are installed on our computers, and as such they are considered software. Like other software, when you buy a font, you are actually buying a license to use it and agreeing to the conditions set out in the license by the creator. The font license is what protects the typographer’s rights and their creations.

For an example, the good Google power house says “All the fonts in our catalog are free and open source, making beautiful type accessible to anyone for any project. This means you can share favorites and collaborate easily with friends and colleagues. Google Fonts takes care of all the licensing and hosting, ensuring that the latest and greatest version of any font is available to everyone.”

While copyright law is different in all countries around the world, font licenses are generally written in such a way that they give you the right to use the font regardless of where you are.

Beware though! Although there are common principles running through such licences, their terms are not standardised, so it is important to carefully read the terms of the licence relevant to the font you want to use.

These days, most desktop licenses enable you to create client work using the font. However, it is always worth checking. Some do not and in these circumstances, you’ll need to buy a commercial license – and possibly one for your client as well.  As software programs, fonts are protected by copyright and so using a font without permission is an infringement of the owner’s copyright in it. Permission to use a font is usually granted, like with other software programs, by way of a licence. So when you buy a font, you are actually buying a licence to use the font software – and the font has to be used in accordance with the terms of that licence.

How do fonts installed on computers fit into this?

The computer operating system, whether it be Microsoft Windows or Apple’s OS X, comes with some pre-loaded font software (called ‘system fonts’) that Windows or OS X uses to display text in menus, title bars, dialog boxes and the like. You will be very familiar with many of these which include Arial, Courier, Times New Roman and Verdana.

A desktop license will generally allow you to install a font on your computer and use it for a whole range of offline graphics, pretty much anything you can print. However, you will need to watch out for whether or not you can use it for commercial projects and check out the number of users allowed to install the font under the license you’ve purchased.

Software applications (such as Word) also come bundled with fonts. There are also subscription-based font services like Typekit, which allow website designers to access to a library of fonts from Adobe and other font publishers/foundries. These fonts can be used on just about any web site, and their usage is governed by the Typekit service Terms of Use.

Arial, Verdana, and Georgia typed out in their own typefaces – three of the de facto fonts used on the Web.

What is a web font?

There are two different types of fonts available to use online — web safe fonts and web fonts. Here’s the difference between the two:

  • Web safe fonts
    Think the Core Fonts – like Arial, Times New Roman, Verdana and Georgia are prime examples of web safe fonts. They’re default fonts found on the majority of operating systems and devices, so they were ‘safe’ to use on the web as they would generally be installed on most computers.
  • Web fonts
    Web fonts aren’t found as part of these default fonts, but are specifically designed and licensed for use on websites. A couple of web fonts you may be familiar with are Open Sans and Roboto.

When a web page loads, the browser is told to show the text on the screen using the specified font — it needs to be stored on the computer in order for it to show up. Therefore, if the web page is specifying a font that is not installed on their computer, it won’t show up and will instead show a default font, which might change the look of the site. This typically happened because Windows and Mac OS X each come with a different set of fonts installed. However, some fonts — like Arial, Helvetica, and Times New Roman — were more likely to be installed in a person’s computer, so these popular system fonts are called Web-safe fonts. 

So, to ensure that all web users had a basic set of fonts, Microsoft started the Core fonts for the Web initiative in 1996 and released several typefaces to create a standard pack of fonts for the World Wide Web. The wide-spread installation of these fonts on most operating systems has made them a staple for web designers. The fonts were designed to:

  • Be highly legible on screen;
  • Offer a wide range of typographic “timbres” within a small number of typefaces; and
  • Support extensive internationalisation.

These design goals and the fonts’ broad availability have made some of them extremely popular with web designers. 

Core fonts for the Web included the proprietary fonts 
Andalé Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and Webdings.

https://en.wikipedia.org/wiki/Core_fonts_for_the_Web

Google Fonts was launched in 2010, in order to offer more fonts that can be used freely in products & projects – print or digital, commercial or otherwise. All the fonts in the Google catalog are free and under open-source licenses, making beautiful type easily accessible to anyone. By 2016, more than 800 web font families were available.

https://www.blackandwhitestudios.nz/blog/choose-fonts-brand

https://medium.com/@janinaaritao/a-friendly-introduction-to-font-licenses-updated-ae8325ffbc30

Picking Fonts for Designs

  1. Identify what you’ll be using the typeface for – will it be digital, printed or both?
  2. Am I looking at reputable sites/sources for my fonts?
  3. What are the terms of the license?

Great Font Download Links

Some of our NZ Foundries:

Resources:

https://www.typewolf.com/cheatsheet