 1.866.891.9704  mail@thelogofactory.

com

U a

Typography & logos: Choosing the best

typeface & fonts
by Steve Douglas | Aug 28, 2016

The Ultimate Guide to Typography & Logos. In

which we discuss font use in identity design
PLUS 30 type-related terms and concepts you
really should know before designing a logo.
Almost every logo will feature a type component, generally the company name –
perhaps a tagline or strapline – and this part of a logo is as important as the icon or
symbol it sits under, on top or around. Selecting an appropriate typeface is every bit as
critical to the success of any particular design, though this step is often viewed by
designers and clients as a “throwaway” – a nal step where some letters are slapped ad
hoc on top of the graphic centerpiece. Trouble is, in this era of social media and
adaptable logos, there will be times when it’s necessary for the logotype to stand on its
own, and it behooves us to pay as much attention to the type portion.

Custom typography vs. o -the-shelf.

It used to be that using an already existing typeface – outside Univers, Helvetica and
Times Roman perhaps – was taboo. Every logo needed to have a custom typeface
component, hand-drawn or cobbled together from bastardized characters. With the
advent of digital design and the practically limitless font options available, that notion
has petered out and it’s considered perfectly acceptable to adapt an already existing
typeface for a logo project. Why bother reinventing the wheel when there’s so many
lovely wheels available. Sometimes it’s even preferable as the full font set can be used
in other applications to create a brand experience – everything from websites to
documents and brochures. That’s not to say you shouldn’t customize these fonts to
some degree for use in a logo – there’s almost some visual imperfection that you’ll want
to correct or some ourish you’ll want to add. I tend to be very picky about how type
lines up across a logo, so even when using an out-of-the-can font, I always tweak it to
some degree.

Font sources & licensing.

The web is awash with free font sites as any Google search will illustrate, and while
they’ll do in a pinch for a small job, there’s some real caveats to think about before
hitting the “download” button. Some free font websites are actually allowing you to
download illegal font sets that have been uploaded – in breach of license and copyright
– by other users. I suggest you avoid these for a couple of reasons, the rst being it’s
taking advantage of the font designer who’s spent considerable time to create the
typeface and who deserve to get paid for their work and e orts. Some font creators are
actually embedding license codes in their software, so they can track back piracy to the
original purchaser (though that’s probably more of a reason not to upload a font to a
free site than download it.) One of my fave foundries for logo friendly font sets is
Letterhead Fonts (link) and they make no bones about it. Every font set download
from their site has license info attached – here’s the “info” le on my copy of Phantom
Regular (check it out.) The underlined (but blurred out) portion features my email and
account ID.

Bottom line – if you nd a licensed font that you like, for heaven’s sake pay for it – most
font foundries feature very reasonable pricing on their wares and if you’re using their
material as part of your deliverables, you’re earning revenue from it. That makes your
purchase a business expense and the money you pay also encourages other designers
to create more professional quality fonts. Another note here – sometimes a client will
ask for the font you used in their logo. This is a big no-no with licensed fonts, as it’s up
to the client to purchase their copy if they want to keep on le. Remember what I just
said about embedded license info? That would track back to you and once a licensed bit
of software leaves your machine, you have no idea of where it’s gonna end up.

Free (and legal) fonts.

There’s also free font websites where designers upload typefaces they’ve created using
font creation software like Fontographer and Illustrator. Legally there’s no issue here
– the creators want you to use their work and often only ask for a credit and link back –
but the quality is sometimes dodgy. Hand editing glyphs (the individual characters of a
typeface, also known as letterforms) is a time consuming process to do right, and a lot
of free font sets are sloppy in the nishing department, especially when converted to
vector or used at large sizes. Many of the characters may be missing, the tracking and
kerning may be o or some of the characters may not appear to match the rest of the
set. That’s not to say you shouldn’t use these fonts just because they’re free – creatively,
some of the typefaces you’ll nd are excellent – just be prepared to do some vector
cleanup on nal le prep.

1) Typeface
Designers often use typeface and font as an interchangeable term when they actually
mean two separate things. Typeface is the correct term for the character set of a
particular type style. Think Helvetica, Times Roman, Arial. Those are typefaces or just
“type.” The misuse of this phrase is so ubiquitous, if you’re ever searching for typeface
related info on Google, you’re probably better o using “fonts” as one of your keywords.
It’s why I crowbarred the word into the title of this piece.

2) Font.
In the digital world, this is the computer le that includes all the characters of a
particular typeface and come in di erent formats – Postscript and True Type are two. If
you’re using Helvetica in your logo, this would be the software you’d use. As font sets
are considered software, they can be subject to copyright and licensing restrictions and
unless speci cally stated to the contrary, fonts cannot be distributed without
permission from the copyright holders. Artwork containing the typeface can be
distributed by converting the live text to an outline vector graphic.

3) Serif typeface.

Serif typefaces have little feet jutting out from the bottom of most characters as well as
little hats at the top. Times Roman is an example of a serif typeface (above.) On the pro
side, serif fonts tend to be easy on the eyes as the little feet lead the eye to the next
character and you’ll nd a lot of books (and websites) are set using this style for this
very reason. Serif fonts have a certain elegance to them so are often used to denote
seriousness, class or an established brand. In a recent poll, a serif font – Baskerville –
was voted as the “most trusted font.” On the downside, serif fonts require a little more
attention to kerning as the little feet tend to push the letters apart visually. Serif
typefaces also are problematic when used very small as the feet tend to pixelate as the
image tries to “push” the smallish detail into a pixel height.

4) Sans-Serif typeface.
“Sans” in French means “without” so sans-serif literally means without serifs – the little
feet and hats we just mentioned. The default font for Windows & Apple computers are
sans serif styles – Arial for PC while Apple machines usually employ Myriad. Sans serif
fonts tend to be viewed as more modern and easy to read – one sans serif typeface,
Frutiger (a personal fave,) was designed for use in airports with multiple languages.
With their generally straight edges, sans serif fonts can be used smallish with little
issues from pixelation.

5) Slab-Serif typeface.

Most serifs arc to a ner point whereas slab serifs are blocks that are featured at the
top, bottom and endings of characters (The Logo Factory logo at top left of this page is
an example of a modi ed slab serif – Lubalin Extra Bold.) Slab serifs tend to require a
lot of room horizontally due to the “slabs” pushing their neighbors apart, so only
recommended for short names. When using tight kerning on a slab serif style, you can
overlap the serifs slightly, but make sure they line up horizontally and exactly. These
typefaces tend to be bolder than most, and give o an informal, industrial vibe so use
sparingly – long sentences with slab serif fonts can look very awkward. On the plus side,
because of the straight horizontal and vertical aspect of their serifs, slab type reduces
more e ectively than standard arced serifs like Times and Trajan.

6) Script typeface.

Script type can be very elegant. Classy. Rich. It can also be hard as hell to read, so use a
script font in your logo with a great deal of caution. If you do choose to utilize script,
make sure the font you’ve selected is legible for the word you’ve chosen to set it with.
Often times there are problematic characters, or two glyphs that when paired together
can’t be read easily. Capital letters in script typefaces can be very fancy indeed with
their swirls and detailed ligree details. Trouble is that tends to push your logo footprint
into an awkward aspect ratio, and you might nd you’ll have to reduce the overall image
to microscopic size when using your logo for avatars and pro le pics on social media.
There are some script fonts that shouldn’t be used in a logo at all – Brushstroke comes
to mind.

7) Cursive typeface.
Remember back in the day when handwriting was considered an art form and we
taught kids how to write cursively in school? Computers and smartphones have
rendered that skill almost moot, but we still have cursive typefaces to help in a pinch.
And that’s exactly what they are – type styles that resemble hand written letters. Cursive
fonts can add a sense of informality to a logo, urgency too as most cursive fonts are
also oblique or italic. Same caveats apply to cursive type as that of script fonts – be
careful about legibility. For something truly unique and if you’re feeling particularly
brave or creative, you can always scribble the desired word yourself with a black
marker, then scan and vectorize the artwork using Illustrator trace image or similar.

8) Hand drawn typeface.

Like script and cursive typefaces, hand drawn fonts can certainly have their place. These
are character sets that are supposed to look hand drawn (while other font sets strive to
do the opposite) and can add a creative air to a logo project. Couple of things to keep
in mind – hand drawn font sets tend to be incomplete with missing glyphs. They
sometimes only feature all caps or all lower case characters. They’re also a little rough
around the edges (deliberately so) so be careful when using on anything that is going to
end up reproduced at large sizes. Sometimes rough edges are very blocky – the result
of overenthusiastic auto-tracing and less than enthusiastic vector editing. You may have
to round-o some of these imperfections for pristine results.

9) Weight.
When we talk about how bold a particular typeface is, we refer to its “weight” and many
professional font families have a wide range of these weights (many free font sets we
referred to earlier don’t, due to the massive undertaking of creating a full family.) From
thinnest to thickest, font weights are often referred to as: hairline, thin, ultra-light, extra-
light, light, book, medium, bold, extra-bold, black, extra-black, ultra-black. In
professional font families, the tracking and kerning of each weight has usually been
adjusted for the extra width of bolder characters (you can see how the various
thicknesses “spread” the words apart in the example above.) Combine this array of
weights with all the italic variations and you can now understand why professional font
foundries charge what they do. If you don’t have access to a particular weight of a font
set, you can always thicken up characters by adding a stroke or using the path nder
function in Illustrator to create a keyline. Keep in mind that when you thicken up
characters in this manner, you’ll need to adjust the kerning by eye and some of the
holes (in the A, R and P for example) might ll in.

10) Book type style.

We just talked about font weight and if there is a “default” weight to a particular type
face it would be called “book” (literally because it would the weight you’d use for a large
tract of type – a book being the classic example.) Book type style can also be referred to
as “gothic” or “regular.”

11) Bold type style.

If “book” is the default style of a particular font, bold would be the default for a slightly
thicker version. This weight would be used for emphasis in a book (or to highlight trade
names like we tend to do on our blog.)

12) Black type style.

Black can be thought of as a bolder version of bold. Black character sets can be
problematic in that a word set in black requires a lot more horizontal real estate than its
book or bold relative – any word set in this style can’t be as tall (important when
designing a logo.) Black fonts can clump up – especially at small sizes. That’s not to say
you shouldn’t use a black type face in a logo – many have – but make sure the words
you need to set are still legible at various sizes & resolutions.

13) Italic type style.

In basic terms, an italic font is slanted to the right (for heaven’s sake, never, never, slant
type backwards to the left!) with one important distinction – the type face has been
redesigned to t with it’s upright siblings as to compliment them when used together.
Italic type can indicate speed or emphasize a certain portion of a phrase (around these
parts we use italics to denote phrases that are in languages other than English.)

14) Oblique type style.

Designers often misunderstand the di erences and similarities between italic and
oblique fonts, quite understandable since both terms describe letters that have been
slanted. Here’s the important distinction – whereas italic typefaces have been
redesigned as a unique font set, oblique fonts are simply upright fonts that have been
slanted without any real design changes (see above for the di erences between italic
and oblique Times Roman.) In Illustrator this is done using the “shear” tool so any
oblique version can also be referred to as “sheared.” If you’re going to manually shear
any type face, keep an eye open for distortions and compressions. Also, don’t shear too
much as the weight of the individual glyphs tend to become non-uniform, leaving us
with an word that looks awkward.

15) Condensed type style.

If italic fonts are the redesigned versions of “book” or regular type, condensed fonts are
those that have been redesigned to be squished into a thinner version. The main
advantage to using a condensed font is that it will allow you to t longer words into a
smaller horizontal footprint. It also allows the use of a heavier weight while occupying
the same horizontal real estate. You can try turning a regular font into a skinnier
version by smooshing it – squeezing the width of the logotype while maintaining the
same height – but your results will vary depending on the type. Keep in mind you’re only
adjusting the horizontal axis so the uprights will be thinner while the arms of individual
letters will remain the same. Take a look above at what happens when we smoosh
Helvetica Neue Regular (no, there’s not actually a font called Helvetica Neue
Smooshed!) into the same width as regular. It’ll do in a pinch, but certainly not as nice
as the actual condensed font set.

16) Extended type style.

You can think of extended as the polar opposite of condensed – a style of font that’s
been elongated horizontally. An extended font will have been redesigned so that the
uprights and arms of letters remain consistent – simply stretching a font horizontally
will only thicken the uprights. You can see the di erences between Eurostyle Demi and
Eurostyle Extended above (no, there’s not actually a font called Eurostyle Stretched,
that’s there for an example of stretching by hand.) Extended type faces are really only
suitable for logos with short primary words – longer company names will take up too
much horizontal space to be practical.

17) All caps.

Type set in all capitals is referred to as “all caps” where caps is the abbreviation. A
company name, when set in all caps for a logo tends to lend itself an air of authority.
Kerning and tracking can be an issue here (we’ll talk about both in a minute) but you can
see how I had to space out the letters above due to the letters “A” and two “L”s sitting
side by each.

18) Small caps.

A word set in “small caps” simply means that it’s all caps, but some of the glyphs are
same height as lower case characters would be. Some font sets only feature small caps
– Bank Gothic is one example – and most modern design software features small caps
as an option as part of their “type character” tools. One issue of going that route is that
the software simply reduces capital letters to the size of lower case characters
universally, changing the weight of the letters. You can see that in the example above
(top.) In order to make the weight consistent, we have to do a negative path nder inside
the capital letters (above middle) and then realign the baseline accordingly. We might
have to adjust the kerning between the individual letters too. Small caps aren’t terribly
popular in the design of logos and truth to tell (but admittedly o the top of my head) I
can only think of a couple we’ve created in The Logo Factory‘s 20 year history.

19) Camel case.

I must admit that while I knew about the typography style, I didn’t know what it was
called until writing this feature. Camel case refers to when two words are smooshed
together, without a space betwixt, and only capital letters to represent that a new word
has begun. The concept has been around forever – I was an art director for a magazine
back in the day whose masthead logo was set as camel case – but the usage of this in
logos has ramped up with the advent of the Internet and companies viewing websites
and domains as integral to their branding. Web URLs don’t have spaces so tech
companies tend to utilize camel case in their logos to globalize brand names. There’s no
issue with using a camel case setup in a logo – consumers and users have come to
understand, if even subconsciously, why the space ain’t there.

20) Justi⌁cation.
Justi cation is a relatively simple concept so we’re not even going to create an image to
illustrate it. The term simply refers to where type is aligned to – in logo design there are
only three choices. Justi ed left (where everything is aligned at the left side,) Justi ed
right (where everything is aligned on the right) and centered (where everything is
centered in the logo, usually under an icon or symbol.)

21) Type on a path.

This tends to be a little gimmicky, but if used sparingly (with fairly simple paths) type on
a path can be used e ectively in some logos (though more for sub brands and
promotional material.) Put simply, the words follow a line – known as a path – with the
individual characters rotated at the baseline depending where they are. This used to be
a major pain but all modern design software allows a designer to quickly run a word or
a few bits of type along a path. A common version of this is “wrapping” a series of words
around the outside, or inside, a circular path – very popular with shielded logos and
emblems, particularly sports teams.
Couple of quick tips if this is the route you want to go on a particular logo design
project: Don’t go too bold with your font selection. As hard as your design software will
try to angle individual characters along an arced path, the overall word will appear
chunky as the fat baselines cut o the circle. If you’re going to use type inside and
outside a circle in the same logo, do not use the same kerning for both. The letters
rotate di erently and will need to be adjusted separately.

22) Warped type.

Warped type is a relatively simple concept – type that’s been mangled, pushed and
pulled into a di erent shape that’s usually inconsistent with any baselines or traditional
type on a path. Using warped type in a corporate logo isn’t really advisable as it tends to
have an informal air, but is really common in logos for sports related businesses and
fast food restaurants. Warping type is tricky as it requires an eye for design as well as a
technical understanding of how the warped type will t into a logo in total. There are
tools in modern design applications – Illustrator has a wide range of warping options
under the “e ect” menu but they’re kinda crap for decent results. A better option is the
“envelope distort” tool found under the “object” menu. Keep in mind that this is tweaky
as all get out, requires a lot of pushing and pulling of vector points to get a reasonable
result. It also requires a lot of patience and mine ran out when I was messing about
with the example above, so it ain’t very good.

23) Type leading.

Leading is the term that refers to the spacing between lines of type and heralds back to
the days of lead typesetting. It’s also referred to the much more descriptive phrase, “line
spacing.” Spacing between lines of type is critical, especially in large chunks of text, as
leading that’s too tight is uncomfortable to read, whereas leading that’s too loose makes
it di cult to follow along. When it comes to logo design, tighter leading is always better
(we want to utilize the real estate in the design’s footprint) but watch out for
overlapping ascenders (the uprights of letters) and descenders (parts of letters that
drop below the baseline like “g” and “y”.) Generally speaking you should always space
words that are stacked on top of each other by eye – especially if the logo uses lower
case letters.

24) Tracking

Tracking is the global spacing between letters across an entire word or phrase. In terms
of logos, tracking tends to be tight for the primary word, while wide tracking is often
used in taglines (also known as strap lines.)

25) Kerning.
If tracking is the global letter spacing across a word, kerning is the individual spacing
between characters and relationship with their neighbors. There are some problem
letters – V & A for example, as well as font sets that are more di cult than others (serif
fonts typically require more tweaking due to the little feet pushing glyphs to the side.) In
terms of logos, default almost always has to be adjusted by hand and eye, even though
most design software tries valiantly to adjust for visual discrepancies. Look at the word
VALOR above. If left “as is” that word actually Reads V AL OR, so we gotta get in there
and slide the letters around in relation to their neighbors. That’s kerning.

26) Live/inline text.

If history has taught me anything about design, this is the area where clients (and quite
a few designers) get confused about type and fonts. Whenever you type a word into
design software, it places a volatile version of the font onto the page. The letters in the
word are considered “live” and can be edited, changed, spell-checked and whatever else
you usually do with words. While this certainly has play in designing logos, the main
area this comes up with is the design of business cards. A designer will type in a client’s
name and contact information and can happily edit, tweak and change fonts to their
heart’s content. Trouble is, when it comes to shipping this artwork to the client with live
fonts intact, there are some very real (and important) provisos. The client has to have
that exact font installed in their system (hopefully the same design software and
operating system as live type can re ow when opened on di erent machines.) There
are some workarounds – .PDFs and some Illustrator formats will allow you to “embed”
fonts into documents (though many pro font sets have this feature disabled to protect
their copyrights.) The same basic principle goes for logos too. In terms of some of the
e ects and treatments we just talked about (type on a path for example,) you’ll need to
have a live version of the font, but you need to deliver a version of their logo (or
business card) that they can use even if they don’t have the correct font installed. The
solution is simple. You need to convert the live font to a vector graphic or an outline
font (even though technically, it’s no longer a font at all.)

27) Outline font.

While we still refer to fonts that have been outlined – converted to vector graphics – as
“outline fonts” that’s not really accurate as we can no longer edit, type or spellcheck
these words. It’s artwork and all the type info has been stripped out. On the upside, we
no longer have the compatibility issues we just discussed and the artwork is now ready
to be used on a wide range of applications. (these same basic principle applies to
business cards, letterheads and other branded material too.) Some of the e ects we
talked about earlier (warping for instance) need a vector version of the type to begin
with so here’s a quick tip: designers should always keep a version of artwork (especially
things like business cards and whatnot) with the live fonts intact so that you can go back
and change things should the need arise. If everything you have is in vector format –
and unless the changes are small and doable – you’ll have to start everything from
scratch.

28) Keyline.

A keyline is simply an outline around type that allows you to use dark type on a dark
background, or light type on white. This usually is applied to typography after it’s been
outlined using either the “path nder” tool in Illustrator or a stroke (a line) around the
letters (though these should also be converted to vectors for nal delivery.) It’s also
possible to use multiple keylines when designing a logo but individual letters of the rst
keyline should be merged into a solid object or you’re gonna end up with a mess of
vectors to chase around.

29) Web fonts

29) Web fonts
While we’re talking about fonts and typography, we’d be remiss if we didn’t touch on the
principle as it relates to websites and for that, we’ll have to look at web fonts. Back in
the day (not too long ago actually, but a lifetime in web years) we were restricted to font
sets that were local to the user’s machine. That pretty well limited us to a couple of
options: sans-serif, serif, Arial (Windows), Verdana (Apple) and Times Roman. Boring
stu . With the advent of CSS (Cascading Style Sheets) we can now employ fonts that are
hosted somewhere other than the user’s machine. Much more exciting from a design
perspective. These fonts are know simply as web fonts (whereas all the previous
material in this piece deal with desktop fonts, or fonts that dwell locally on your
machine.)

30) Logotype.

Yet another term that tends to confuse some people and so many people have misused
logotype for so long, it’s become to mean di erent things depending on who you ask. Is
it just referring to a common-garden logo? No, it isn’t. Logotype refers to specially
designed typography that is featured as a company logo. Some examples? Disney is
one. Coca-Cola is another. So what’s the little symbol or icon above logotype known as?

Technically, they’re logomarks.

 
Related Posts & Gallery Pages
Logo design & supplying fonts to clients
Logo Design Road Maps
Outlines around type when designing logos
10 logo design faux pas, mistakes & missteps
The client guide to business card & letterhead les
Outline fonts | Vector typography & outlined letterforms