Nick Green

Image Typefaces and Fonts

When you have been employed to create a new version of an existing website try and get the highest quality graphics you can direct from the client. By all means use images from their existing site (if they have one) as “place holders” but try for the originals. If you are adding any additional drawn graphics it’s best if you can match the fonts used on existing artwork so ask the client which fonts they use. In all probability they won’t know – “Oh some guy drew it for us, I wonder what happened to him?” Let’s look at some of the issues and see how they can be addressed.

Typeface or Font

One of the problems, when talking about type, is mixing up fonts with typefaces or treating them as the same thing. Typographic experts have been known to corrected a beginner for mistakenly using the word font when they should have said typeface. To most of us who only think about fonts when choosing one in Microsoft Word, the distinction between the terms can seem confusing, esoteric, and even out-of-date. In summary: A font is what you use, a typeface is what you see. The people who really care about the distinction are typeface designers and having you own typeface is seen by some companies as a mark of how valuable their brand is. Today most feature films will commission a new typeface for the opening titles and the end credits. If you are working with type of client then they will usually no what the typeface they are using and be able to supply it to you or deliver the relevant graphics you ask for. For smaller companies they may know which typeface has been “adopted” as their standard if not you will have to begin the hunt for it. So what is the difference between a type face and a font? Today even experts agree that the terms Typeface and Font can be used interchangeably. But if you come across a graphic design pedant who care about maintaining for the masses, you can remember it this way: The difference between a font and a typeface is the same as the difference between songs and an album. A group of songs makes up and album.

Finding the Font

Using an Image

If you haven’t been supplied with the font or it’s name then you have to do some research to find out what it is (that’s if you don’t recognise it). There are a couple of tools that can help you in your search and the first is “WhatTheFont” from Myfonts.com https://www.myfonts.com/WhatTheFont/. This toll allows you to submit an image with the typeface on and it will endeavour to identify the font from the image. Before submitting the image make sure you crop off unnecessary image content to just leave the text or cut the text portion from the image. The WhatTheFont website give guidance on what the image should be like:

Font Identifier

If the text on the image you have isn’t clear enough for “WhatTheFont” all is not lost you can try using Identifont Fonts by Appearance http://www.identifont.com/identify.html. You can just leap in and answer the questions but it is better if you can limit the search by selecting the character from the alphabet that appear in the word or words you are looking for. If the first run through doesn’t give you a close result re-evaluate based on the questions asked which letters to use in the applied filter. This tool may not give you the exact answer but it gives you a start and you can look for fonts similar to the ones suggested.

Has it been tampered with?

The final question is has the font that is the same in most of its attributes been “adjusted” by changing the “Kerning” or “Tracking”, by changing the vertical or horizontal scale or simply by “transformation” in an image program. Transformation will have a similar effect to changing the scale but may not scale things evenly and lead to some odd distortions.

Kerning

Kerning adjusts spacing, that is the distance between two letters. If letters are set too closely together then they can become indecipherable; set too far apart, on the other hand, and they’re awkward to read. Even worse is if some letters have wider spacing than others, then it can be frustrating for someone to read without them fully understanding what’s wrong. It may be used for effect, however, in some logos to place two letters in a name unusually close together for emphasis and may also include changing the colour of those two letters.

Tracking and kerning are often confused with each other, but the concept of tracking is a little different. Tracking adjusts the spacing throughout the entire word to which it is applied and tracking can be used, with great restraint, to change the spacing equally between every letter at once.

Tracking is can be used to make a single word seem airy and impressive or it’s most common use in graphic design particularly in logos is to balance words of different numbers of characters with a different “natural” appearance due to the character content. In the example below “Hello World” bot words contain the same number of characters but “Hello” is naturally narrower. By applying expanded tracking “Hello” can be made to be the same width as “World” and therefore more balanced. Tracking can be either positive, adding more space between characters or negative reducing the space. Tracking can be very useful when aligning two words on an image where one is a small word in a large font size and the other is a long word in a smaller font size.

Tracking

A font can also be modified by altering the vertical scale of the characters either to either make then taller than “normal” or shorter, or by changing the horizontal scale to make the characters thinner or thicker.

Text Scale

And finally customisation

Rather than adjusting the the text within the “normal” typographical tools that would allow text to continue to be directly editable the text may have been converted into a “path”, modified and filled. Alternatively it may simply have been rasterized (turned into an image) and shapes added or erased.