Great article - One of the most interesting things I have read recently, and by far the most useful.

Now I’ll have to think about altering all those old projects to conform…

Nice article Mark, hope you also cover the nasty americanisms that have come started to invade British publications? the dreaded dog teeth quotation mark is one of our company’s pet hates. Anyone who uses it should be hung, drawn and quartered, ‘ not “. Grrrrrrr.

A good book to read if you get a chance is Copy-Editing The Cambridge Handbook for Authors and Publishers by Judith Butcher.

http://www.amazon.co.uk/exec/obidos/ASIN/0521400740

Good advice. I’ve heard 7-10 words per line is a good rule of thumb, it probably works out the same as your 2-3 alphabets, though your guideline is easier to implement.

Looking forward to the rest in the series.

You should also check out the Thinking With Type website and Robert Bringhursts “Elements of Typographic Style.” Very good resources both, though the Bringhurst is the go to guide for typesetting.

Mark,

An interesting read - I’ve always struggled to understand what to do in order to make text more legible, hopefully these articles will give me more of an insight. Look forward to reading the next one!

Thanks Mark. Another invaluable article. I’ve always wondered why line-height was used in CSS rather than leading. As somebody who comes from a newspaper publishing background (Quark Xpress et al) I got used to leading and kerning. Now it’s all line-height and letter-spacing. I guess these labels are a little more self descriptive than leading and kerning which i guess relate to the old skool print press process, rather than the web. Cant wait for your next installment.

For beginners, I’d recommend “The Non-Designer’s Type Book” by Robin Williams; it’s a good guide to typographically-correct punctuation and such, as well as layout and readability, etc.

Thanks for this, one for the bookmarks!

I’m a programmer trying to dive into the minds of designers…

Very interesting, our guys would just “huh” to these advice ;-)

An em *is not* the size of a capital M. It is a square of the point size.

An em is just a unit, like a pica or point, but relative to the text instead of absolutely defined. There’s no reason an em can’t describe a vertical measurement. In web design, for example, ems are used to define the sizes of things that must scale with the size of the text.

Where did all this 1 Em = the width of 1 letter ‘M’ come from? It’s not the first time I’ve heard this. Is it a rough approximation?

How do points relate to screen? Whilst I can understand the points system on paper, I just don’t get how it translates across to screen. But I do get how if text is 12px (wide), 1Em = 12px. Didn’t there used to be a measurement like 1Ex or something like that? What was that all about?

One other confusing thing about pixels is that if a font size is 12 pixels, one could assume that each letter fits within a box 12 pixels wide by 12 pixels high. Do font creators aim to make maximum use of a box and if so, how?

"Didn?t there used to be a measurement like 1Ex or something like that? What was that all about?”

I read that Ex is a relative measure corresponding to the height of a lowercase x character (but not yet accurately calculated by browsers so it doesnt get used much in web dev).

Mark- Super interesting conversation.  I’ve had no formal training in typography, but I love to learn.  This has been a very informative post. One thing not clear to me is that a ?W? in most cases, is the widest character not an ?M?. Why would they use ?M?? 

Guy- I hear you on the pixel units to describe a type.  12px doesn’t equal 12 square px.  I have noticed most fonts tend to be 2 to 3 pix less in height than described. (e.g. a 12px font size will most likely be 9px in actual height and the width will vary character to character.)

This is fascinating.

The letter ‘i’, for instance, with the font size of 11px might be 11px heigh but only 3px wide yet the letter ‘m’ might be 11 pixels high but 7 pixels wide. How does somebody who creates a font get to grips with the intended kerning for their font? I’d love to hear more about font creation if anybody has done such a thing?

I’d also love to hear more on how browsers / Operating Systems work out font sizes, specifically in relation to pixels and percentages. It’s a very confusing topic that isnt covered much in detail elsewhere.

Thanks Mark. I’ll keep my eyes on this.

How do points and pixels map? Not very well. A lot of software assumes that screens are 72 dpi. So 1 pixel = 1/72” = 1/12 pica = 1 point. Some use the information in the monitor profile. I’ve also seen software that actually asks you to stick a ruler up to the screen to calibrate it. (Which on a CRT is probably the only way to get it right, since the size of the borders is adjustable.)

I don’t see much value there is in using points on the web, anyway. Giving some of the measurements in physical units and some in pixels seems like it’d be a way to make your page render weirdly on different-resolution screens, even if the DPI logic were more consistent. (Here I’m using “resolution” to mean the actual DPI, not pixel count. The terminology is stupid; there should be two separate words.)

Also, pixels aren’t necessarily square. It’s common to run 4:3 screens in 1280x1024...which isn’t 4:3. (Maybe that’s related to Thad’s observation that most fonts aren’t square? I’m not sure.)

it is very good and for up comming designer who doesn’t know head tail of the design ,typography they are saying themself they are expert in design nowadays they think if they know software tolls is they r disigner .....and this site is very good to know about certain issue ..
shahshi

Excellent article Mark. I definitely learned something from this. The problem with web design is that almost anyone can learn to do it without having any sort of design education, thus missing out on base principles such as these.

Thanks!

Adjacent to the Comments header, it says “Post you [sic] own comment.” Is it supposed to say that?

Good article. One picky point: if you’re using reverse type to design for *print*, you’re asking for trouble if you reduce the weight too much (descenders and other letter elements may become too narrow to print well).

Is there any documentation that CSS ex := 0.5em?

By the way, CSS assumes a 96-dpi screen.

http://www.w3.org/TR/CSS21/syndata.html#length-units

Oh the subject of pixels and thier shape, pixels when designing in CSS or Photoshop are square while video pixles are rectangle. :)

EM, EN and EX.  I’d never heard of EX before the comments in this article.  But, as others, I’d always been told that EM was width of Capital letter M, it was never intended to be as wide as the widest character (someone pointed out “W").  I was also told that half of an EM was an EN, which would only “make sense” if the capital N were half as wide as the capital M.  Could it be that some groups call it an EN, and others call it an EX?

So, we have EM space, EM dash, EN space, EN dash, then, we add to that Thin Space and Thin dash.  If memory serves, the “Thin” is the width of common puctuation, like period, colon, exclamation point (bang), etc.

Graham, it’s America’s way of paying you back for the Spice Girls.

Excellent article on a topic that sometimes doesn’t receive the attention it deserves.

The typographer’s ‘em square’ was a square, blank type where each side was the width of a capital M in that font. In CSS, the definition is that it is equal to the font size, however that is specified. An ‘em’ is sometimes referred to as a ‘quad width’ by typographers.

The ‘ex’ unit is the font’s x-height, which is the average height above the basline of a lowercase letter. Browsers usually define 1ex as 0.5em, so it is independent of the font. Note that the x-height is defined even if the font doesn’t contain a glyph for the lowercase ‘x’.

For an example of how a flexible CSS layout can scale the “measure,” or width of the column as type size increases, check out this article on Elastic designs…

http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/

I found this article interesting and useful in a number of respects. 
But as a music grad, literature grad, and design grad, I have to
fundamentally and respectfully disagree.  The logic smacks a tad of the grammarian or fundamentalist’s standpoint.  I would encourage a less rigid approach.  I believe what we are discussing here is evolution in the art.

Implementing conflicted font types and sizes which may not be related
to the traditional scale can be exceedingly effective.  Just as the
greatest composers used dischord to evoke emotion or to strike
brilliant contrast.

There are a great many scales in music as well, and they are not all
equally pleasent, however, they are all equally viable options to the
designer (as it were).

Words that were once long-ago slang have been seamlessly incorporated
into our language; Words that incited riots or curled the hair of the right and proper are now used caually in our everyday language to marvelous effect.

The eye, like the ear will see order in what might have at one time been considered chaos.

I see the scale as a guideline only.

You make some good points with which I can (conditionally) agree.  I personally would maintain that design and art cannot be truly separated because one is the necessary extension of the other.  The foremost factor is that both concern themselves with communication. Design is simply more secular than art. This virtue does require that we know the rules so we can use them to our advantage. I don’t, however, think it is important to know them first.  Let me illuminate on that a bit though…

I recall my art instructors (more so than my Design instructors) being crucially critical of classmates who had a na?ve style.  These individuals produced some of my favorite stuff.  It was often soulful and emotive and hilarious too.  While I implicitly understood the instructors’ concerns for a properly structured approach, I honestly lamented the loss of innocence that followed.  I felt something was being lost that was worth keeping.  Does that make sense?

Hey, I cringe at bad design as much as the next designer, don’t get me wrong!  This includes bad font usage and bad art in general.  But some part of me loves it too because it deserves to exist; to provide contrast and comparison, to push the envelope and to encourage growth.  I see it as part of the primordial ooze I suppose.

Please accept my words as constructive.  I mean no offense.  Nice site.  I am still trying to develop my CSS skills.  I find coding annoying.  I have an over developed right brain and an underdeveloped left brain.  The abstract nature of coding is in direct opposition to my nature.  lol!

Peace,
JayDub
Winnipeg, Manitoba, Canada

Great article! Thanks for the information. I’ve never known typography can be so complicated.

Great series. I have to point out something that really gets on my nerves. It’s not typography as such, but grammar. Never start a sentence with ?But?.

?But, with the advent of DTP packages and the website design the following are also now used:?

Could be:

?With the advent of DTP packages and the website design the following are also used:?

Hey, pedantry is a survival skill.

Hey great writeup! Found the link on an austrailian forum. Posted the link on Kirupa and everyone loves it! Any chance u can make a pdf version?

I haven’t seen anyone mention the EL space. For those of us crossword freaks, there are three traditional character spacings: EL (for letters like ‘l’, ‘i’, and ‘t’); EN (for the bulk of letters that are nominal width); and EM (for ‘m’ and ‘w’). However, I’d always used the ratios of 0.5, 1, and 1.5 to calculate the width of type, so an EN would not be half an EM.

Mark--"There is an optimum width for a Measure and that is defined by the amount of characters are (sic) in the line.” ...up in your Measure explanation.

I was linked to this site from a friend’s web log.  This is some great stuff, as I am a writer and am never satisfied in how my works looks typographically on the web.  There’s a small grammatical error I found to correct ( I know, I’m one of those stuffy English types).  It’s in the sentence in the first section:

“Please note that this figure will vary widely with research, this is just the figure I use and it seems to work well as a generally rule of thumb.”

Either change ‘generally’ to ‘general’ or say ‘seems to work well generally as a rule of thumb.’

Much thanks; keep up the good work and keep the craft alive!

Many times I read about the size of a line. This often results in a web page filling just about 1/3 of my web browser in width. Also this page is only filling a small part; lukily especialy on this page I can switch off the style and the text is floating the whole width.

I find it mostely very strebuous to read such pages. Ist much easier if my eyes havn’t to switch to new lines such often.

What I whant to say is that is depends hardly on the reader what is better to read and what not. If I like it to read the text more smaller I can scale the windowof the browser. Unfortunality this does not work for the other way.

The biggest sin of new typographics is to teach the web designer that this line width is also guilty on web browsers. I absolutely agree that on paper this might be true but not on web pages where the user should be free to fit the windowto his reading preferences.

??? ????? ???? ????? ??? ??????

??? ???? ,??/?? ??? ?????!!
??? ??? ???? ????? ????.

??? ????? ?? ???? ??? ?????.
???????
???? ????? ^^

http://5myjob.com
http://5myjob.com

*????? ??? ??? ???? ????*

??????
“ ???????????????????? (? ?50??7)” ? ???
??? ????? ????? ??? ??? ???????? ????
???? ??? ????????? “????” ? ????
??????? ???? ??? ?????????.

(????: )
??????: 1234

Klaus,

I suggest you go read up on a man named Fibonacci and how the golden section relates to everything that is good, balanced and beautiful in the world.  Unless you’re blind, I can’t imagine wanting to read in a straight line forever scrolling to the right, though in braille that might be alright.