What’s a font? A typeface? And is there a difference?
I’ve lost count the number of times I’ve heard the question: “what font is that?” The stickler in me would love to respond: “Shouldn’t you technically be asking ‘what typeface is that?’”
Nowadays, the two terms are used interchangeably. However, in the past, these were two very distinct terms.
Origins of type
 |
 |
To really understand the difference between the two, you need to know a little bit of history behind creating type.
Way back before the advent of computers, typefaces were created using little pieces of metal. These pieces had to then be individually placed on a tray to create your layout and printed on a printing press. So, when you were referring to “fonts” you were talking about that piece of metal with one style and one size of font. So fonts were of a particular face, size and style. Back then, if you were talking about Arial 14 point or Arial 24 point, you were in fact talking about 2 completely different fonts.
Through the years, there have been hand-set fonts, machine-set fonts, phototype fonts, and now digital fonts (includes Postscript, True Type, and OpenType. They are either bitmap fonts or vector fonts.)
One thing has not changed throughout type history: creating type has always been a two-part process. A type foundry creates the fonts and we as designers use the typefaces in our documents.
Within a particular typeface there are various fonts from which to choose: different styles (bold, italic, etc…) and sizes (14, 24, 36, etc.).
And then everything changed…
With the advent of computers, “fonts” and “typefaces” became synonymous. So interchangeable the two terms have become that most computer programs have a “font” menu. They also have “font styles” where you can click and bold or italicize your letters.
However, when you are dealing with printers or service bureaus, you quickly see the difference between the two. To them, the terms cannot be interchangeable.
We frequently think that by clicking bold or italics, then our file will print correctly. Printers prefer when you send the actual bold font of your typeface (ex: Helvetica Bold) NOT when you simply bold a typeface. In this case, you have to send the printer font to them to ensure the file prints correctly.
Etymology:
- “Font” derives from a French word meaning “casting” or “molding”.
- “Type” comes from the Greek “typos” which translates loosely as “letterform”.
How do they come up with those typeface names?
- By designer: Baskerville, Bodoni, Frutiger
- By type foundry: ITC, Linotype
- By geography: by country (Caledonia, Helvetica) or by city (Chicago, Paris, New York)
- By era: Century, Modern N.20
- Historical figure: Leonardo, Renoir
- How it’s used / function: oldstyle, handwriting, titling, etc…
- By type: by incorporating sans, serif, script in the name
- By look or mood: grunge, jazz
- It’s a compound of 2 ways: Zapf Renaissance (designer / era)
- Sometimes, it’s just a name: Futura, Times New Roman
To recap:
A font is supposed to be a physical thing. It is what is needed to display the typefaces. Whether it is the computer code, photographic film, or metal plates.
A Typeface is the shape of each character in a group of characters. It’s the letters, numbers, symbols, punctuation, etc…
A family is a group of typefaces designed to work together. It’s basically all the possible variations of a single typeface. Each is a separate file.
 |
|
Do research before starting to design?
I know you are probably saying to yourself “Research? what does research have to do with designing?” Well, let me explain…
You’ve been offered to design a brochure for a company. You are given the copy. Told “make it look nice“. The artiste in me is tempted to simply start designing right away. But do I start designing right away? NO.
What to do before you click that mouse:
- Ask to see previous design done for the company.
Regardless of if you are there to completely overhaul their look or if you are simply designing a new piece, always look at what has been done before you got there. You may need to tie in your look with the work previously done to maintain branding consistency. - What field are they in?
Whatever field they are in (be it financial, real estate, pharmaceutical, ….) ask to see what their competitors are doing design-wise. Or, get samples from their competitors if they don’t have any. See what trends are currently used and how they approach design. - Determine what style they are going for.
Do they need a more informal, professional, conservative, or progressive design? What do they want the look to say about their company? - What is the look and/or mood of the piece?
Are they looking for something more comical, sporty, or casual… Perhaps they are trying for a ‘60’s, disco, renaissance look to the piece? - What is the demographic the company is aiming at
Are they going for kids, adults, seniors, … Mostly males or females? These will affect choices such as color, type and graphics elements used. - Are they targeting a particular culture group?
Is the piece you are designing targeting an audience in a particular race or culture (Italian, French, Chinese, ….) - Find out if they have corporate identity package in place.
If they have a manual detailing how their logo or what typeface should be used — and other graphics decisions — already made, you need to make sure you follow them. - Do they have corporate colors?
Do they already have colors that they use that are “company” colors? - Do they own their own artwork? Have they already purchases some stock art that you can use?
- What are their expectations for the piece.
What are they planning to do with the layout you are designing. Is it going to be used for different purposes? For examples, will it need to be faxed, mailed, handed out? Transfered to the web? Does it have to be multi-purpose? Is it going to later be modified by someone other than you? Will it be a part of a series? You need to know the answers to these questions before you start to click.
C O N C L U S I O N
It’s very tempting to dive right in to a project. Often that’s the last thing you want to do.
Every designer wants to leave his “imprint” on the company’s design. Everyone wants to create original work, n’est-ce pas? But remember, it’s not about you, it’s about the client.
It’s time to think outside the box (in this case, “the box” is the computer).
Content is an essential part of any website
No matter what kind of site you have, deciding the content on your site is really deciding what purpose you want your site to have.
Many designers think that they don’t need to pay attention to the content as long as the design is good. BIG MISTAKE: No matter what kind of site you have, you won’t get away with having bad content (or worse, no content).
My 3 golden rules for content:
- It must be usable
- It should be easily accessible
- It must be purposeful for your audience
I decided to approach content selection on my site in the same way I design a page: visual hierarchy. I decided that I would think about how I want my reader (potential client) to go through my site. I had to establish what I wanted my audience to look at first, second, third, and so on.
Creating content that works
- Decide on what kind of site you will have: informational, selling or entertaining?
- Start with your audience in mind. What do you think they would expect from your site?
- What are the major categories of information you need on your site (ex: news, blog, newsletter, resources, contact, about, ….)
- Separate these into short navigational links
- Come up with a few pages of info for each of these
- Prioritize this list of pages by importance
- Create each page by order of priority
- Thinking forward: what do you eventually want to add to your site? Make a list of all the pages you eventually want to have on your site.
Content for my site
I wanted my site to be both informational and constantly update-able.
Looking around me, I felt a need for good common-sense design tips and decided to write about my “design philosophy” and hope that I’d get an audience consisting more than just my mother and sisters reading it. I decided to have a blog which would automate my posting information to people and dispense of me messing around with HTML.
The next thing was my newsletter. I wanted to create a monthly newsletter and needed a place to store my newsletter (talk about easy content) as well as advertise it.
Eventually, I will be adding e-books, resources and articles. But that’s in the long run.
C O N C L U S I O N
A website is a constant work in progress. My best piece of advice is to start with the pages you absolutely need and create those pages on the site that are most important. Then launch your site. You can then continually update your site and keep it fresh afterwards. And add to it.
An effortless way of updating your site is to have a blog. The rest of your website can remain static and you can have a blog that keeps the content fresh and up-to-date — literally.
The thing that most people forget (or lose sight of) is that success is “80% showing up” (Woody Allen).
Typography on the web
Choosing a font for my website was far easier than deciding on a font for a print publication. The selection for the web is limited by the fonts available on the viewer’s machines. I can’t select a font and then some can’t view it — as it was intended — because it’s not available on their machine.
I already talked about — in a previous post — 10 fonts that are most commonly available on both the PC and MAC platforms. I choose these.
Does the typeface really matter?
You may think: “Who cares if they don’t have a font? It will be replaced by a default font from their machine.”
I never think that way. I want to see how the viewer will see the page: well, as much as possible anyway. It’s impossible to ever be sure what they are seeing as monitors and resolutions and such make a huge difference in how they view it (I’ll save that for another blog posting). But I do try as much as possible see what they see (aided by checking the site on various computers). I do this to see how paragraphs look, how words and lines break, and if I’m getting a little long.
Type considerations and tips
The general rule for choosing a typeface for anything viewed on the monitor (from emails, presentations and websites) is the exact opposite of printed pieces.
In printed pieces, serif fonts are best for body copy while sans work best for headlines and subheads. On the monitor, sans serifs are better for body copy and serifs for headlines and subheads. I instead use sans serifs for both — I prefer it. What I do is work on contrast by font weight and size.
I love making my job easier and having much of it automated (it virtually guarantees consistency). I don’t know what I did before CSS! CSS stands for “cascading style sheets”. It allows me to set up a file with all my styles already set up. I can choose margins, colors, line spacing, etc… It’s very convenient as I used to “hard code” everything. Now, it works with the click of a button.
Step-by-Step to font selection:
Before beginning my website, I establish what I want the text to look like. I can always add more styles later: nothing is set in stone.
- Font styles: Headline, subheads, body copy, highlight, bullets, …
- Typeface selection: Some considerations are whether I like a wider font or one that is narrower with a bigger x-height. I chose a wider one for myself (verdana). I find it infinitely more readable for online viewing
- Type size: I use the same principles here as I do for print layouts. I use contrast to create my visual hierarchy.
- Paragraph styles: Line spacing, margins, alignment
- Font characteristics: Color, bold, underline, italics, etc…
- Test with dummy text: Include headlines, subheads, and at least 3 paragraphs of body text
- Make adjustments as needed
C O N C L U S I O N
To spice up the page, I use graphics to replace some text. For instance, quotes and testimonials can be done as graphics and then you are not limited in your font palette. Navigation can also be done as graphics files. And if you really wanted to: headlines. Just remember to include “ALT” tags and type a description so that search engines can “see” what’s there.
I’ve also seen entire websites as a graphic file. I strongly, strongly, strongly discourage this practice. Graphics are not good for search engine optimization and Google does not like them. You are in fact shooting yourself in the foot!
