Help me improve this list of guidelines on spacing

ath's picture

Hi typophiles,
I'm a humble web designer trying to improve my typography skills. At this point I'm particularly concerned with spacing issues. I've read several books and at the moment these are the tips I've been able to gather. I'm hoping some of you might help me improve, correct or refine this list or point me to any relevant literature on the subject. Please excuse me if I get any of the terminology wrong. Like I said, I'm a novice. Also, I'm having to write this on a tablet so I apologize in advance for any mistakes in the text.

Letter-spacing
------------------------------------------------------------
Reduce if:
- large body size (+ adjust kerning)
Augment if:
- small body size
- all caps (+ adjust kerning)

Word-spacing
------------------------------------------------------------
Typical starting point: 1/4 of body size
If you are not sure, go with tighter spacing
Must be clearly less than line-spacing
Make sure the "image" of each word is clearly separate from the previous and the next but don't let the lines fall apart. Enforce continuity. Step back and see if your paragraphs are disintegrating.
Word-spacing can be augmented if:
- typeface has large counters
- you are using an extended family
- you are using all caps
- you have long lines
- you have a small body size
Reduce if:
- large body size

Line-spacing
----------------------------------------------------
Augment if:
- light text on dark background
- long lines
- large x-height
Reduce if:
- short burst of info

Line-length
-----------------------------------------------------
Ideally 35-65 characters

Justified text
----------------------------------------------------
Avoid when you have short ines of text.
Improve by:
- splitting words
- adjusting word-spacing (make sure uneven spacing doesn't break up your paragraphs)
- adjusting letter-spacing (with caution!)
- using dirty tricks (reduce letter width to 97-98-99%)

Left-aligned text
--------------------------------------------------
Improve by:
- not permitting several equally long or similarly shaped lines go one after the other
- not permitting each line to be shorter than the previous one (formng a triangle paragrapgh shape)

hrant's picture

Nice list.

First rule: If it's a good font, trust the type designer and don't mess with spacing. How to know if it's a good font? Ask.

Also: A font is ideal within a pretty tight size range; there is no easy compensation for going outside this range.

If you are not sure, go with tighter spacing

This is the only thing in your list that strikes me as wrong. Overly loose wordspacing can be ugly and wasteful (and slightly slow down reading) but overly tight wordspacing can totally ruin reading.

hhp

Chris Dean's picture

http://readthetype.com/literature/

There are books and peer-reviewed studies there. Be wary of anecdotal wisdom that claims to be correct solely due to convention.

hrant's picture

But nothing is worse than a scientist who thinks he's qualified to design experiments and interpret data even though he doesn't know the first thing about type.

hhp

Chris Dean's picture

Agree. From what I have read, there is a huge gap between the two fields. On one extreme there are pseudo-scientific studies conducted by typographers with little background in the sciences, and reading studies by scientists who don’t know what an x-height is. Truly stunning.

hrant's picture

And the only way forward is for scientists to design experiments that try to [dis]prove anecdotal wisdom. Because they have no wisdom of their own.

Most of all, we can't go on pretending that this


can lead to reliable test results.

hhp

Chris Dean's picture

Scientists have no wisdom of their own? Next.

And as far as technology being unable to lead to lead to reliable results, perhaps you can suggest an alternative?

(Nice find on that picture I took btw. I was just asked for it last week for use in an upcoming presentation and was having difficulty locating it. Thanks ;)

Bert Vanderveen's picture

Word space: start with width of lc i or inner space of lc n. (A quarter of body size is too general and allows for too much variation.)
Never cheat by adjusted letter spacing. (Changes ‘color’ and is thus unforgivable.)
Limit horizontal scaling of glyphs to no more than 2% either way (if too noticeable avoid!).

General rule: aim for even ‘color’ (eg, squint through eyelashes and note even/uneven structure — correct if necessary).

Extra rule: correct ‘rivers’. If there are too many of those, something is wrong with the general settings — start over.

Chris Dean's picture

@hrant: As I was waking up this morning a thought occurred to me. With my statement “Be wary of anecdotal wisdom that claims to be correct solely due to convention.” you may have thought I was referring to you, hence your rather short remark which was clearly directed at me given you used one of my own photographs in it. I was, in fact, referring to my literature list. Not you. Sorry if you took any offence.

hrant's picture

I didn't think you were directing it at me. On the other hand I do take a bit of offense when labcoats think typographic wisdom -which is what I meant they lack- can be subsumed with data.

hhp

Chris Dean's picture

I’m still curious as to how you came across that picture. Have I buried it somewhere on Tyophile, Readthetype, FB, twitter…?

hrant's picture

Sorry, I don't remember.

hhp

ath's picture

Thanks guys! Keep it coming!

ath's picture

@Bert: I'm afraid I don't understand when you say "start with width of lc i or inner space of lc n".
Could you please clarify?

ath's picture

@hrant: When you say "How to know if it's a good font? Ask." What part of the forums is considered appropriate for posing that sort of question. I'm slowly beginning to build a library and would love to get some advice to make sure the fonts I buy are good quality.

hrant's picture

I guess just General Discussion.

hhp

Bert Vanderveen's picture

The lowercase ‘i’ and ‘n’: use either the width of the i (especially if it is a serif), or the space between the two stems of the n as starting points to define your standard word space.

A shortcut for using the i as a starting point: start with a few lines of text from your publication. Copy paste to a second paragraph. In the first copy of the text substitute i’s for the space, like this:

I'mislowlyibeginningitoibuildiailibraryiandiwouldiloveitoigetisomeiadviceitoimakeisureitheifontsiIibuyiareigoodiquality.
I'm slowly beginning to build a library and would love to get some advice to make sure the fonts I buy are good quality.

Now play with the wordspace settings in the other bit of text to approximate that to the way the first bit looks.

As you may notice, if you are seeing Georgia (which is a Typophile default), that font has word spaces that are equal to the width of the i.

Working with the inner space of n is a bit more complicated, but with a large zoom percentage you’ll get there eventually.

ath's picture

@Bert: That's a great tip! And so simple to put into practice. Thank you so much! I'm going to test this on some of the work I'm doing right now.

Syndicate content Syndicate content