Guide to Typography

Status
Not open for further replies.

Rachel Udin

Banned
Joined
Nov 19, 2010
Messages
1,514
Reaction score
133
Location
USA... sometimes.
Website
www.racheludin.com
Uhh... Because of various reasons, I'll invite general discussion on the topic. I just ask that the participants write as if they are talking to someone that doesn't know anything about type.

I took college-level typography classes and for the class I had to design my own font. After I was done, I told my Professor, "Why the hell did you allow me to do that?" And he said, "because you looked like you were having fun with it." Which is to say, I failed a *whole* ton in the classes, but learned a whole ton through them. (He majored in typography, so he was fussier than most about it.)

What I learned the most is probably best demonstrated through this link: http://www.learningbooks.net/wholeword.html

Type works on *negative space* more than the *positive space.*

Also, it's a lot like ice skating, compared to other types of designing. If you get it wrong, then it shows up. When you get it right you don't know what the jargon they are spouting over the loudspeakers is. You just know the skater landed safely.

Type is also an art of being invisible and being visible in the right ways. It's a functional art more than say, Monet.

Some hard core rules you probably want to watch out for.... (and feel free to add)
1. Comic Sans: Never.
OK, maybe occasionally, if you know what the hell you are doing. But even then, only if you are feeling naughty.
http://www.bancomicsans.com/
http://www.guardian.co.uk/technology/2009/aug/12/dave-gibbons-watchmen-interview (He was one of the inspirations for the font)
Even the original designer admits it shouldn't be used as it has... so stay away...

2. Pay attention to your negative space more than your positive space.
More than the selection of the particular font, most typographers spend an inordinate amount of time tweaking the *negative space.* Usually the bad fonts (as the one I designed for class) make it harder to tweak the negative space. And some are just downright impossible.

The graphic design term for this is gray (grey for those in the UK and related). Gray in typography terms means that there are no outstanding negative spaces that break. Also, it means that it is easier to read the type when it is done correctly. This is an art that has died with the word processor, which is ironic since the major player to introduce this was Steve Jobs, who was a huge fan of simplification, etc. Having non-gray type makes the type complicated and draw attention to itself in the *wrong* ways.

Manipulating negative space in terms of typography means readability.

OK, so how do you tell if your text is gray or not and what does that have to do with covers?

Rivers and Lakes
http://weightlosstipoftheday.com/blogimages/wemasterkit/CompareFonts_127A2/Comparetext4.jpg
Look at that. Look at the space *around* the letters.

*squint* at the text. If you look at the first paragraph, then from the space before the "to" in the second line to the space before "various" to the next line's "to" you will see a river.

A lake is a larger space created by the text the same way.

Illuminated manuscripts invariably will never have this problem.

http://va312aslifilis.files.wordpress.com/2010/10/macclesfield3.jpg
Squint at this one.

Do you see any of those problems? The thing is that when type is done *right* it makes it easier to read. The reason typographers so much care about negative space until you feel like you are being beaten with a bat, is that your eye will stay on the line it is supposed to for the very end of the line, making it much easier to read. (I know it's not in English) But test that out with the illuminated manuscript. Much easier, right? (It might be subtle, but yes, typographers care *that* much about making you, the reader's life that much easier)

OK, tools to do this...
Leading, Tracking, Kerning
http://www.justskins.com/forums/difference-between-leading-tracking-122273.html

That probably explains it better.

So, you might think, but... I'm only doing the front cover, and I really don't care about the back cover... Type still matters. And the negative space also matters.

http://www.dafont.com/ravetime.font

That will probably make for a horrid font for a cover, the *negative* space created by the sketchy lines will make it hard to read when it scales down, and the reader will have to really care to put in the effort to read it.

Pay attention to the negative space the font offers and think about what the title font is functioning to do.

This also obviously means: For the love of the design gods, please, please don't put type on a patterned background. (Of course there are exceptions, but most people won't be savvy enough to know those exceptions)

3. Selection of font and harmony of elements:
http://www.ted.com/talks/chip_kidd_designing_books_is_no_laughing_matter_ok_it_is.html

That deals with the subject pretty well. Not sure I can do better than that. That's what I would aspire to. That level of thought and creativity in a cover makes my little designer and my hopeful author in me scream together in absolute fangirlish joy.

I can add a few things to it though (Don't that people won't know)

A. Don't make the font obvious.

http://thankyouenjoy.files.wordpress.com/2008/04/chinese-menu_sm2.jpg?w=500

is a BAD example.

http://upload.wikimedia.org/wikipedia/en/thumb/c/ca/TheJoyLuckClub.jpg/175px-TheJoyLuckClub.jpg

is a better example.

Why? The font actually communicates without overtaking the images in the background.

The choice of font (notice the lack of rivers and lakes too) is in the family of fonts I would roughly say is Art Deco.

http://www.identifont.com/samples/itc/Avenida.gif is an example.

This is a *smart* choice , though subtle because the majority of the book does happen in a bygone era and roughly in that time period or at least anchored to that time period.

The *obvious* choice would to go with something slangy Chinese to emphasize the chinese, but the dragons also serve to do that.

You can also see that with other covers of the Joy Luck Club opted to do a similar treatment.

http://history.cultural-china.com/c...an_immigrant_families7d7b7539c22bb039fb09.jpg

Cover on the left, more than the right.

B. Legibility of the type.
Black on dark gray. No.
Bright green on a bright red background--for the love of god, no.
White on black, 80% of the time no. (Reasons are complicated, but no)
Putting random embossing and drop shadows because uhhh... it looks cool and stuff without thinking about it first, no.
Making your text 3D because it's really awesome. No.
(See tutorials on color for the other nos)

Script fonts for Romance Novels: No. Overdone, cheesy and see my previous point. (Besides, he got on my case for doing this with a wedding card idea. So no.) http://www.dafont.com/jellyka-kings-hat.font (Especially messy fonts like this)

Script fonts, in general (Along with copperplate) tend to be hard to read

Black Letter and Old English fonts for Fantasy. Please no. http://www.wedding-calligraphy.co.uk/images/styles/black letter caps.jpg (See previous point)

Same goes with other genres. You want the type to work *with* the images in communicating the message of the book, not detract from it.

Helvetica... watch the movie.
http://documentaryheaven.com/helvetica/
So generally, no, unless you are doing it for a book where the character is supposed to be invisible, but even then.

Then what do you pick? You pick the font that is *between* those two extremes. You want a font that isn't screaming to the reader, "Get it yet?" and the font that isn't hiding in the corner. You want a font that is legible at small sizes so when it goes into ads, say on the internet, that part of the letters don't disappear. You want a font that is *easy* to read without much effort, yet still communicates your story.

C. Size of type, just like in design matters.
What irks me about a lot of covers is that they often try to make the author name and the title the same size. As was said many-a-time by many designers: Choose one to be important, then *rank* that importance. Also, pay attention to the *space* that the font takes up compared to the image.

So, for example...

http://www.goodshowsir.co.uk/wp-content/uploads/2011/04/bythesword.jpg

Largest element: The people/picture. That's the most important. Readers will see that first.

Next largest element: The title. Next rank in importance.

Next largest element: The author's name (This will reverse when the author gets more important than the title--i.e. that the author is more important as a brand than the thing they are selling. Guess how I found this out. That's right.... I got it wrong. =P)

Next largest element the text at the top. (which irks me being on a patterned background, but it kinda tells me that the typographer after tweaking all that negative space figured no one was going to read it. (No rivers or lakes)

Slightly irks me that there are extra borders inside of the "shield" framing. (which adds to communicate the book) But that's more of a graphic design statement than a type one.

D. Margins mean something

Have you ever tried to read a book where all the margins were taken off? It would be a pain in the butt. Margins are negative space that functions to *contain* the elementsof the design. If you want it to look expansive, then you break the rules.

Examples:
http://2.bp.blogspot.com/_ALcZC-x_l...CxQ/z18B60D8ZLU/s1600/pride-and-prejudice.jpg

The arm is cut off, so you know the arm continues off screen.

http://ecx.images-amazon.com/images...ow-click,TopRight,35,-76_AA300_SH20_OU01_.jpg

Same here... you can see that the lines run off the page on purpose.

However, type doesn't *usually* function this way. Type's first concern is that you can *read* it. Which means containing it and not letting it spill off is your first concern.

I know, I know, you want to fill the page up because negative space is ugly and needs to be filled. Please don't. Mind those margins because it will make the type easier to read, and it's less likely to be cut off when it goes to print. (Bleed probably will be covered in Tutorial: Design Your Cover)

Font resources:
http://www.1001freefonts.com/
http://www.dafont.com/
http://www.urbanfonts.com/free-fonts.htm
http://www.fontspace.com/

If you are a fan of a font, but don't know what it is: http://www.identifont.com/ is useful

As with anything, there are tools, and if you are going to break how you usually use that tool, you need a good reason besides you think it's cool.

And I think that covers the basics... anyone want to add anything? Anyone want to tell me my organization is horrible and want to do a better job of organization?

Questions? Concerns?

Feel free.
 
Last edited:

Gale Haut

waxing digital artistic
Super Member
Registered
Joined
Jul 1, 2010
Messages
3,057
Reaction score
574
Location
The Swamplands
Website
www.galehaut.com
This is really great!!! :D

I'm a big fan of the section on the relationship between size and importance. I see self published authors falling into the trap of having a huge name because of confusion with how important their name is to them vs. their name's importance to the target audience. Kudos for addressing it, as it comes up frequently on these boards.

Here's a yin yang style image reference to help explain negative and positive space. I made it in one of my favorite fonts. Can you name it? :D

positive+and+negative.jpg


Image updated.
 
Last edited:

Rachel Udin

Banned
Joined
Nov 19, 2010
Messages
1,514
Reaction score
133
Location
USA... sometimes.
Website
www.racheludin.com
@Gale Haut
My typography professor was harder core at that sort of thing so he'd probably have a better shot. However, playing rounds of "identify that font" probably would be fun for the designers here... Pretty close to Garamond, but the font looks compressed together... http://www.identifont.com/show?M5 Designers tend to like Garamond a lot... it's popular-- though I believe my typography teacher said that he liked the original Garamond and someone was working on a better version. (If I recall the font right) Typographers love fonts with inherently less issues with negative space, so inherently you have less problems with lakes and rivers. (which is why the first font I designed sucked). Also why designers tend to like Garamond a lot.

He also said we should probably be more aware of the types of fonts and what goes into creating them more than all the fonts ever... Probably should cover that too.

Ah~ I wanted to do a thing on Fedex, but that might be overkill... I do appreciated that kind of things too...

http://fastlines.net/images/fedex-logo-470.jpg

See the arrow? That's really good design. Studying type made me appreciate minimalistic design a lot more than before. Sometimes the LCD makes type work better.

Sometimes I think dealing with type makes one feel a little OCD... lots of details to contend with. Plus eliminating rivers and lakes is a pain in the butt.
 
Last edited:

Rachel Udin

Banned
Joined
Nov 19, 2010
Messages
1,514
Reaction score
133
Location
USA... sometimes.
Website
www.racheludin.com
@LBlankenship Oh Yes! I forgot that one. Definitely. Also same for black letter and illuminated letters. For the love of whatever you worship, NO. Please no. I'll beg you. Same with copperplate fonts. No.

And a joke only that designers probably will appreciate...

I swear for the longest time that Disney was spelled, "Disnep" when I was a kid.

http://www.logo-creator.eu/wp-content/uploads/disney_logo1.jpg

Look at the thing. That looks like a "P" at the end to me.

I only got it when in the Mickey Mouse Club they spelled it out... which means for years, literally, I thought it was spelled Disnep.

=P I hope designers will appreciate that. (or another problem to look for when choosing fonts)
 

Gale Haut

waxing digital artistic
Super Member
Registered
Joined
Jul 1, 2010
Messages
3,057
Reaction score
574
Location
The Swamplands
Website
www.galehaut.com
The shape of the word is drastically changed by using caps or small caps. It messes up recognition. When I use them, I like to have a good reason for it.


I will admit that I used copperplate some when I first started at my current job. I've learned so much over the last year.

I <3 this discussion right now, by the way.
 

Rachel Udin

Banned
Joined
Nov 19, 2010
Messages
1,514
Reaction score
133
Location
USA... sometimes.
Website
www.racheludin.com
Basic Font types:
Serif
Common Examples:
Times New Roman, Courier, Bookman, Garamond (family)

Designers love Garamond.

Serif *tends* to be used at smaller sizes because the serifs help with reading. (Also easier to type set)

San Serif

Helvetica, Arial, Geneva, Verdana

I kinda think Arial looks awkward in larger letters, but that might be just me.

Helvetica is used to death, from Walmart to Target. You might want to steer clear unless you purposefully are looking to do that.

General rule is that San serif looks better in larger signs.

http://1.bp.blogspot.com/-5otJaqXL_...AAAC8/I_tzEAi4Fgo/s1600/stop-sign-300x300.jpg

was my Typography Professor's big example, though he picked on the fact that they used red since it's a midtone (Not sure if that's the right term) color. He picked on fire hydrants for the same thing, arguing they should be yellow.

Mostly it's used for signage because it allows for thicker lines, which in signs is easier to read. (Typography's first concern is readability--unless it's trying to underscore inability to read... which does happen, but then it's more of a statement.)

Da Font and 1001fonts organizes by classification. This means it's in poor taste to use Art Nouveau font on a Retro cover. You can find decent 1950's-ish fonts that aren't garish on that site for free. And even pedestrians will know the difference between 1950's and 1930's--I knew as a kid. Watch one episode of Poirot and you can tell Art Deco fonts.

I know there is a huge temptation to go for the over the top fonts.
Such as:
http://www.dafont.com/ruritania.font
http://www.dafont.com/jellyka-delicious-cake.font
http://www.dafont.com/chocolate-dealer.font

But just like in writing, you don't need purple prose, so 99% of the time you don't need a fancy font--let the image take over. If you are doing a pure typography cover, then consider readability over how *pretty* you think to type is. Think about the marketing.

Usually, it's best to see if any of the common fonts will fit first. Can you get away with something that's not dressed up and calls attention to itself? Then choose that. If not, and there is no harmony, then you go font searching only then.

I can't find it, because I can't remember the title--just the cover which was brilliant.

Anyone know the cover where there was only one picture on a large background of I think yellow? Not sure... pushed in a corner? It's a YA book and it fit the title perfectly. I think I saw it because it got challenged/banned. I thought that was a good example of good use of negative space. Also the typography fit very well with the book, where the use of thin lines emphasized the theme of the kid feeling invisible/ignored. The designer in me liked it a whole ton. It broke all of the rules of "What is a book cover" but did it in such a way that it fit the tone of the book. Which is what a good cover does. And the typography definitely supported that.
Example Covers to pick apart
http://designarchives.aiga.org/#/home

Some cool covers... and some interesting type treatments too.
http://designarchives.aiga.org/#/en...elevance/asc/69/7/21631/an-object-of-beauty/1

What's good from a novice perspective, is that it picks apart why it works... so it might be useful to navigate that website.
 

Gale Haut

waxing digital artistic
Super Member
Registered
Joined
Jul 1, 2010
Messages
3,057
Reaction score
574
Location
The Swamplands
Website
www.galehaut.com
Just adding two cents to help the journeyman to understand without having to leave the site...

A "serif" is literally the little embellishments or hooks added to the basic shape of a letter. So basically "sans" means "without" in French. Thus, sans serif type doesn't have the embellishments. Easy enough?

Here's an example with sans serif left and serif on the right.

Image= needs to be re-sized. Sorry.

Another important point... though it is a point of contention as to why, it is generally thought that sans serif is preferred for web design or computer reading. Serif fonts are preferred by many readers for physical print media.
 
Last edited:

kuwisdelu

Revolutionize the World
Super Member
Registered
Joined
Sep 18, 2007
Messages
38,197
Reaction score
4,544
Location
The End of the World
Another important point... though it is a point of contention as to why, it is generally thought that sans serif is preferred for web design or computer reading. Serif fonts are preferred by many readers for physical print media.

Three words: shitty screen resolution.
 

LBlankenship

VPXV 4EVA
Super Member
Registered
Joined
Sep 7, 2010
Messages
857
Reaction score
94
Location
Near Washington, DC
Website
lblankenship.blogspot.com
Three words: shitty screen resolution.

Yes -- but now that I'm looking into making e-books, I can't help noticing that everyone recommends serif fonts for body text.

I don't have an e-reader, so I have to ask: is the resolution good enough for it? Is an iPad's?

How advanced a move is it to have your e-book pick serif vs. sans depending on the platform? :D
 

Rachel Udin

Banned
Joined
Nov 19, 2010
Messages
1,514
Reaction score
133
Location
USA... sometimes.
Website
www.racheludin.com
San-serif, generally, but not always tend to size more consistently, if it's big or small.

Since most serif (not all) fonts are either variable pastocity (line thickness), or they simply don't look professional (as in Times or in Garamond) that makes them harder to work with (you have Courier, but really, you want to put your book in a typewriter font?) and more consistently, so that's good for computers. Or, that's my general understanding.

Serif, fonts, however, are better for a fixed size, so makes it better for print.

I think the reason people want to put serif fonts on e-books is mainly
1. Convention.
2. looks professional
3. You don't have to typeset the whole thing all over again when it goes to print.

If you plan to have your type sizable for the e-book format, technically typographers would say sans is better. If it's a fixed size for all screens, then serif would work. serif still tends to work better at a smaller size and with ereaders often imitating books more with less glare on the screens, serif fonts probably could be gotten away with since there is no, say, flicker.

I think in this case it's a convention thing. People are just *used* to it, but that's getting into my web design theory and anthropology training. (Useful, but not always necessary for design)
 

thebloodfiend

Cory
Super Member
Registered
Joined
Apr 2, 2011
Messages
3,771
Reaction score
630
Age
30
Location
New York
Website
www.thebooklantern.com
I'm dying to leave a long comment, but I'm on my iPhone and typing is painful. I'll just say I like the idea of opening this thread and I'll be back later. There's an iPhone app for basic typography stuff, btw. It's $3 I think.

And I do like courier for certain kinds of covers. Done right, it looks really nice.
 

kuwisdelu

Revolutionize the World
Super Member
Registered
Joined
Sep 18, 2007
Messages
38,197
Reaction score
4,544
Location
The End of the World
Yes -- but now that I'm looking into making e-books, I can't help noticing that everyone recommends serif fonts for body text.

I don't have an e-reader, so I have to ask: is the resolution good enough for it? Is an iPad's?

In general, yes. The new iPad has a resolution of 2048x1536, which is better than the vast majority of laptops. Thanks to Apple's push to "retina" screens, most smartphones and tablets coming out today have quite respectable resolutions, with much higher ppi than notebooks and desktop monitors, so no blurry rendering.

How advanced a move is it to have your e-book pick serif vs. sans depending on the platform? :D

Readers can change the font on the reader, generally, so I wouldn't worry about it.
 

Gale Haut

waxing digital artistic
Super Member
Registered
Joined
Jul 1, 2010
Messages
3,057
Reaction score
574
Location
The Swamplands
Website
www.galehaut.com
I actually don't definitively agree with the it's because of the resolution argument. I think that poor resolution in the past has brought us to a point where we are now re-evaluating our love of serifs.


Some food for thought...

There are plenty of studies that show no difference between the legibility of serif and sans serif typefaces ( Tinker, 1932 ; Zachrisson, 1965 ; Bernard et al., 2001 ; Tullis et al., 1995 ; De Lange et al., 1993 ; Moriarty & Scheiner, 1984 ; Poulton, 1965 ; Coghill, 1980) ).

There are some high profile studies which claim to show the superiority of serif typefaces ( Robinson et al., 1983 ; Burt, 1959 ; Weildon, 1995 ) but these have been soundly criticised on points of methodology. ( Lund, 1997, 1998, 1999 )...
Continue reading at: http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/

Another article I enjoyed from the site:
http://alexpoole.info/blog/fighting-bad-typography-research/
 

kuwisdelu

Revolutionize the World
Super Member
Registered
Joined
Sep 18, 2007
Messages
38,197
Reaction score
4,544
Location
The End of the World
I actually don't definitively agree with the it's because of the resolution argument. I think that poor resolution in the past has brought us to a point where we are now re-evaluating our love of serifs.

Well, regardless of whether one is more legible than the other in general, serif still definitely suffers more from insufficient resolution than sans-serif.

We don't have to compromise — on certain devices — anymore, so the merits of serif vs. sans-serif can be debated independently of display device.

Though the rendering situation on the desktop still sucks for anyone not on a rMBP or Zenbook Prime (though I'm not sure how well Windows' rendering scales).
 

Gale Haut

waxing digital artistic
Super Member
Registered
Joined
Jul 1, 2010
Messages
3,057
Reaction score
574
Location
The Swamplands
Website
www.galehaut.com
That's true.

I personally think that other than resolution, the discrepant differences in readability have more to do with general recognition and familiarity than anything else.
 

Al Stevens

Super Member
Registered
Joined
Mar 4, 2011
Messages
2,537
Reaction score
214
I nominate this thread to be a sticky.

I'd like to see something similar about book interior design for print editions.
 

Al Stevens

Super Member
Registered
Joined
Mar 4, 2011
Messages
2,537
Reaction score
214
Courier on a book cover that looks good? Seriously!?

You must show me now before I throw up.
Guilty. See the Free book in my signature. I used an old manual typewriter font. The book's interior is presented as a raw, unedited manuscript in the same font including the occasional strikeout. (I had to make my own font for strikeouts.)
 

thebloodfiend

Cory
Super Member
Registered
Joined
Apr 2, 2011
Messages
3,771
Reaction score
630
Age
30
Location
New York
Website
www.thebooklantern.com
Courier on a book cover that looks good? Seriously!?

You must show me now before I throw up.

Very well then. It's in the courier family. Can't remember specifically what it's called. A quick mock-up for the tutorial I made ages ago on this forum:
Capture-3.jpg

I re-used the same typeface for a name/logo/whatever I made for a school portfolio:
Capture2-1.jpg
 

Gale Haut

waxing digital artistic
Super Member
Registered
Joined
Jul 1, 2010
Messages
3,057
Reaction score
574
Location
The Swamplands
Website
www.galehaut.com
Very well then. It's in the courier family. Can't remember specifically what it's called. A quick mock-up for the tutorial I made ages ago on this forum:

It's definitely more palatable when it's not light and monospaced, like in your examples.

The uniformity in a monospaced font left untweaked would really bother the dickens out of me.
 
Status
Not open for further replies.