Mark Boulton

45 Responses to “Five simple steps to better typography — Part 2”

1. 
   Rob Lewis said on: April 18th, 2005 at 5:58 pm

   Thanks for another inter­est­ing art­icle Mark.

   In my lim­ited exper­i­ence with Quark I’ve found it quite clunky, so I’m not sur­prised it struggles with hanging punc­tu­ation. Maybe the new ver­sion will sort this out (either that or after the Mac­ro­media deal Adobe will decide to acquire Quark too and InDes­ign will takeover!?).

2. 
   Veerle Pieters said on: April 19th, 2005 at 10:55 am

   Thanks for the walk-though. Very enlight­en­ing and well writ­ten, the same goes for your art­icle in Design by Flight. Yes, I finally found the time to read it :-) I enjoyed it till the last char­ac­ter, nicely struc­tured, easy to fol­low and under­stand etc. just per­fect like it should be :-) There aren’t much people around (at least as far as I know) that write­ty­po­graphy, so thanks for tak­ing the time and for shar­ing this.

3. 
   Graham Sanders said on: April 19th, 2005 at 2:05 pm

   What’s with the Amer­ican quo­ta­tion marks? 

   *tuts* 

   PS
   
   I for one am not happy with the Adobe/Macromedia deal, mono­pol­ies only res­ult in inflated prices to the end con­sumer. Let the beacon of Quark shine forever!!!

4. 
   Mark Boulton said on: April 19th, 2005 at 2:24 pm

   Rob — Who knows what will hap­pen. Maybe we’ll end up with an uber-corporation like AGFA / MONOTYPE. 

   Veerle — No prob­lem, glad you liked it and the art­icle in Design In Flight. The thing that is being lost, across all of design industry, is the little nuances of type­set­ting. It’s such a shame that details like these, which have taken hun­dreds of years to evolve, are being lost in a couple of dec­ades due to tech­no­logy and a lack of education.

   Gra­ham — Well, as the audi­ence of this site is mostly US (57% — com­pared to 7% UK) I thought it best to design to my audience ;-)

5. 
   Rob Weychert said on: April 19th, 2005 at 3:24 pm

   Nice series, Mark. I?m look­ing for­ward to the next install­ment, and I?m very glad to see this level of detailed atten­tion to typo­graphy on the web, where it is so often neg­lected. Keep up the good work! 

   Gra­ham, whatever hap­pens with Adobe/Macromedia, Quark still deserves an etern­ity in a watery grave?

6. 
   Sebastian Schmieg said on: April 19th, 2005 at 3:51 pm

   Like Rob W. said, great series, Mark! How­ever I don’t agree on the hanging punc­tu­ation because I don’t like it aes­thet­ic­ally, des­pite being “cor­rect”. Also I think bul­lets should brake the flow.

   BTW, I’ll never under­stand the Quark bash­ing (OK, haven’t tried out InDes­ign yet).

7. 
   Sebastian Schmieg said on: April 19th, 2005 at 3:58 pm

   Oh, and one (per­haps stu­pid) question: 

   Shouldn’t the head­line be aligned with the text and not with the bul­lets in the “cor­rect” ver­sion? Now that I think about it, per­haps I didn’t get it. What if there’s only one bul­let, would the whole column be inden­ted and the head­line would be aligned with the bullet?

8. 
   Mark Boulton said on: April 19th, 2005 at 4:02 pm

   Rob W — Thank, I will! Even though I’ve been using Quark for the past 12 years, against my bet­ter judge­ment might I add, I’m still appalled by some of it’s typo­graphic hand­ling. Indes­ign is much bet­ter at hanging punc­tu­ation for example. 

   I don’t know, it’s swings and round­abouts — Quark is over­priced and still industry stand­ard, Indes­ign is cheaper but a bit bloated and slow. 

   I don’t think it’s time for the watery grave yet for Quark… maybe a little tent on the beach for now.

   Sebastian — I see your point. This really is a case of aes­thetic pref­er­ence, and if you like it — fine. The thing is, up until DTP, there were never bul­lets which were inden­ted. it just wasn’t the done thing for the print­ers and typo­graph­ers (the good ones at least.) But when DTP came along and the soft­ware couldn’t handle hanging pun­tu­ation, it just ignored them, like ligatures. 

   Now, we’re all used to see­ing bul­lets and punc­tu­ation treated in this way. Some would argue that typo­graphy and type­set­ting is evolving, which is fine. My ques­tion to you would be, is it for the better? 

   Oh, and per­haps that’s my mis­take about the head­ings — they aren’t sup­posed to be related to the text, just an indic­a­tion as to which is cor­rect or incor­rect. Head­lines should be aligned with the left hand column of text, only punc­tu­ation hangs into the gutter.

9. 
   Rob Weychert said on: April 19th, 2005 at 4:24 pm

   I star­ted using Quark ten years ago and I hated it from the get-go. For me, everything about it is counter-intuitive, and hav­ing had no real industry com­pet­i­tion for so long, they res­ted on their laurels, mak­ing no sig­ni­fic­ant changes or upgrades to the applic­a­tion for years and years. It was already the 21^st cen­tury by the time they incor­por­ated lay­ers (badly, I might add)! 

   I haven?t done many big page lay­out pro­jects lately, and I have admit­tedly only used InDes­ign for one pro­ject so far, but what a joy it was to use for that pro­ject!  The first time I opened InDes­ign (CS), I spent about six hours dig­ging around in all the fea­tures and gig­gling like a school­girl. Its con­struc­tion, organ­iz­a­tion, and inter­face all make a mil­lion times more sense than Quark?s, and its stylesheets are so much more powerful. 

   With ver­sion 6, Quark had a chance to prove their rel­ev­ance in the face of such a power­ful adversary. And they failed miser­ably, with the only note­worthy upgrade to the pro­gram being com­pat­ib­il­ity with Mac OS X. Sorry, Quark; too little, too late. As I said before, whatever hap­pens with Adobe/Macromedia, I can say with no small amount of spite that I hope Quark gets squashed like a bug.

10. 
    Sebastian Schmieg said on: April 19th, 2005 at 4:25 pm

    This might be an explan­a­tion why I prefer the inden­ted bullets—I’m just too young to know bet­ter. But I’ll stick to it.

    Now, we?re all used to see­ing bul­lets and punc­tu­ation treated in this way. Some would argue that typo­graphy and type­set­ting is evolving, which is fine. My ques­tion to you would be, is it for the better?

    I would say evol­u­tion never is a bad thing but only if the “old rules” are still know and taught (my typo­graphy course starts next week…) and if those who brake them do know why. How­ever I think there are typo­graphic rules, exper­i­ences might be the bet­ter word, that’ll never get old and outdated.

11. 
    Tim said on: April 19th, 2005 at 8:37 pm

    Nice con­cise and very use­ful art­icles. Thanks, Mark.

12. 
    Nigel said on: April 20th, 2005 at 4:51 am

    Uh oh. Guilty. But like Sebastian I think bul­lets should stand out which they do when inden­ted. IMO they’re also more logical and neater. What if you have a nes­ted list? Indent­ing each level cre­ates an obvi­ous hier­archy and makes more sense to me. I don’t know how a nes­ted list would work with “out­dent­ing.” (Am I mak­ing up words again?) Nice to know the his­tory and that there’s another option, I would never have even con­sidered it before. I’m with you on the punctuation.

    Another good art­icle.  Keep them coming!

13. 
    Mark Boulton said on: April 20th, 2005 at 11:36 am

    Brian — You’re right an em is just a unit and it is rela­tional. You’re also right in say­ing that there’s no reason why it can’t be used for ver­tical meas­ure­ment, it’s just tra­di­tion­ally points and picas (spe­cific­ally picas) were used as meas­ures of ver­tical distance.

    Of course with the advent of CSS the Em was per­fect for cre­at­ing rela­tion­ships, between type size and lead­ing for example, which need to be retained when the type was resized. 

    This is a great example of typo­graphy evolving to suit dif­fer­ent media. 

    Guy — I’m not sure where it came from. One of my typo­graphy lec­tur­ers at uni told me it’s an easy way of estim­at­ing the size and remem­ber­ing the approx­im­ate size (I guess because ‘Em’ sounds like ‘M’. I can see the logic, if not entirely accurate.

    Text size: I’m going to be writ­ing about this is one of the install­ments of this series. It all gets a bit com­plic­ated for on screen use because of the dif­fer­ences in pixel res­ol­u­tions on mon­it­ors. There is a meas­ure­ment of Ex in CSS which relates to the x-height of a char­ac­ter, at least it’s sup­posed to, in real­ity it’s half an em. The x-height isn’t embed­ded inform­a­tion in most fonts, so the browser just inter­prates it this way. Inter­est­ingly this is one thing that IE5 on a Mac does well, it intern­ally renders a lower case x, of the font you are using, and then counts the num­ber of pixels.

14. 
    Matt said on: April 20th, 2005 at 1:25 pm

    “The thing is, up until DTP, there were never bul­lets which were inden­ted. it just wasn?t the done thing for the print­ers and typo­graph­ers (the good ones at least.)” 

    And until Power­Point, bul­lets were used spar­ingly, if at all. Writers and type­set­ters used other obsol­ete typo­graphic con­ven­tions such as “com­plete sen­tences” to express ideas. Time spent won­der­ing how to align bul­let points is time that could have been spent con­vin­cing the cli­ent to writewell.

    (Yeah, yeah. I know. It’s all for naught, the client’s going to want his bul­lets, etc.)

15. 
    Mark Boulton said on: April 20th, 2005 at 4:18 pm

    Matt — Hmmmm, not sure about that. I know in the realm of cor­por­ate present­a­tions and lit­er­at­ure bul­let points have all but des­troyed plain writ­ten eng­lish. But, in the realm of inform­a­tion and book design, bul­lets or other sim­ilar glyphs, have been used for cen­tur­ies to draw the read­ers eye to cer­tain types of copy. 

    You’re right though, we do see too many of them.

16. 
    chris said on: April 20th, 2005 at 9:14 pm

    Mark, I briefly checked with Bring­hurst — yet again — to see if there was a rule about how far to out­dent. There isn’t, though I ima­gine that it’s what is pleas­ing con­sid­er­ing the font. It might also be good to men­tion that it is in the “Story Set­tings…” in InDesign.

17. 
    Chris Hunt said on: April 21st, 2005 at 2:52 pm

    “Not sure about Word — prob­ably not.” 

    Hanging indents have been pos­sible in Word for years. The copy of Word 97 on my desktop handles it with ease — just drag the little point­ers in the ruler bar such that the first line indent goes back into the mar­gin, or go into Format>Paragraph and give the Indent­a­tion prop­er­ties Left:-0.5cm, Special:Hanging, By:0.5cm. 

    Mind you, like Sebastian, I think a bul­let list often *should* break the flow of a doc­u­ment. Bul­let points are read dif­fer­ently to nor­mal body text, you want that extra pause to swap into bullet-point-reading mode. 

    As to quotes, I can see some merit in hanging the open­ing quote, but I don’t think the clos­ing quote should. What if your example quote was one short word longer? You’d have almost a column-width of spaces between the last word in the quote and the clos­ing quote mark — that can’t be right.

    This assum­ing that you’re talk­ing about nor­mal quote mark usage within body text — If it’s big and/or col­oured quote marks used to illus­trate a pull quote, then your pos­i­tion­ing of the clos­ing quote would be correct.

18. 
    Mark Boulton said on: April 21st, 2005 at 7:10 pm

    chris — Thanks for that 

    Other Chris — I hon­estly don’t use Word that much, but thanks for let­ting me know. The prob­lem I have with this is that applic­a­tions are passing on the ter­min­o­logy. It may be pos­sible to do it, but it’s called some­thing else.

    Re Bul­lets break­ing the flow of the reader. I think it kind of depends on the con­text. My prob­lem with bul­lets which are inden­ted is they are too strong a visual tool. They make the read­ers eye jump, often past para­graphs before the list, straight to the bul­lets. I think that might have some­thing to do with the white space inden­ted bul­lets cre­ate. Now, this is fine if that’s what you want to do. I just think hanging bul­lets is a much more visu­ally soph­ist­ic­ated, and typo­graph­ic­ally cor­rect, way of ren­der­ing a bul­leted list.

19. 
    W. Gene Powell said on: April 21st, 2005 at 10:58 pm

    Hanging any type ele­ment is a dicey thing at best. Be care­ful when devel­op­ing blanket “rules” like this. Typo­graphy requires too much nuance and sens­it­iv­ity to make any kind of one-size-fits-all decrees.

20. 
    Adam Thody said on: April 22nd, 2005 at 12:04 am

    Great series. It really is hard (or so I’ve found), to find inform­a­tion on the fun­da­ment­als of good typography. 

    It’s nice to see the gears turn behind what we recog­nize intu­it­ively as “good typography”.

21. 
    chris said on: April 22nd, 2005 at 3:23 am

    i’ve always found that when i get a bul­leted list from word, and pull it into indes­ign, that a subtle hanging quo­ta­tion works won­ders. also, many people default to at least a line length after each bul­let. pulling them closer will also help. It’s one of the things I do after a “find-replace” on double spaces after a period… mark — shall we tackle that next???

22. 
    Mark Boulton said on: April 22nd, 2005 at 9:20 am

    W. Gene Pow­ell — I’m afraid I dis­agree. Type­set­ting is full of rules like this. The gulf between type­set­ting and typo­graphy these days is such that a lot of these simple rules are being for­got­ten, being replaced by ‘nuance and sensitivity’.

    Adam — Thanks, what is turn­ing out to be more inter­est­ing than the short art­icles them­selves is the ensu­ing debate that follows. 

    chris — Oh, don’t get me star­ted on double spacing :-)

23. 
    Daniel Roberts said on: April 22nd, 2005 at 3:47 pm

    I don’t know if it is from being a pro­gram­mer or from just always see­ing it this way in html but it looks strange to see a non-indented list. I expect to see a head­ing like “Here are 5 tips:” with the fol­low­ing list’s bul­lets aligned with the left side of the list head­ing. It gives the feel­ing that the state­ment before groups or labels the fol­low­ing list ele­ments. Oth­er­wise it looks like the list items are just out there without con­text. May see­ing these rules in con­text would help me accept them easier. I look for­ward to such changes on your site as an example :)

24. 
    Jeremiah said on: April 22nd, 2005 at 4:45 pm

    What are “Amer­ican quo­ta­tion marks”? Is Gra­ham call­ing for «guille­mets» instead, or the straight double-tick marks used to abbre­vi­ate units of measure?

25. 
    Mark Boulton said on: April 22nd, 2005 at 4:51 pm

    Jeremiah — What Gra­ham is refer­ring to is that in Amer­ican Eng­lish “ is used. In Brit­ish Eng­lish ‘ is used to the do the same job. If you have a look here, scoll down to the table of quo­ta­tion marks it gives details of the glyphs used for each language.

26. 
    Jough Dempsey said on: April 22nd, 2005 at 9:55 pm

    In Hakon Lie’s book on CSS, he says that the “em” unit is the width of the cap­ital M in a par­tic­u­lar font.  I don’t know if that’s accur­ate, but it makes sense. 

    Mark, just get­ting people *think­ing* about typo­graphy on the web is a good start.

27. 
    Dustin Sauls said on: April 25th, 2005 at 1:56 pm

    On inden­ted bullets:

    My obser­va­tion, espe­cially in tech­nical writ­ing, is that inden­ted bul­leted text provides structure–and more import­antly, hierarchy–to an oth­er­wise form­less doc­u­ment. The indent­a­tion facil­it­ates pack­aging of items together under a list header. Though bul­lets can be pur­posed to merely high­light text, they are cer­tainly use­ful for quickly draw­ing a reader’s eye down a list. 

    What I’m try­ing to say is that these rules can poten­tial change with the type of doc­u­mentin which they are applied.

28. 
    Adam said on: April 26th, 2005 at 8:23 am

    I have just a quick ques­tion about the place­ment of hanging quotes. If the quote was a couple of words shorter, and didn’t span the width of the column, where would the end quote be best placed? I can ima­gine it might be pos­sible to right align the text so the second row ends near the end quote, but what gen­er­ally is best prac­tise in this (more com­mon) cir­cum­stance, assum­ing its not right align­ing quotes?
    
    Thanks

29. 
    Mark Boulton said on: April 26th, 2005 at 9:32 am

    Dustin — You’ve got a very good point. When a list is sup­posed to draw the eye and be sep­ar­ate from the body copy then, yes, indent­ing has it’s mer­its. Of course lists within lists have to be dif­fer­en­ci­ated as well, this can either be done by the glyph used for the bul­let or by indenting.

    Adam — No, you are abso­lutely right and that is a bit of a slip up with my dia­gram. The last quo­ta­tion mark should of course fol­low the last word. If the last word is at the edge of the mar­gin how­ever, the quo­ta­tion mark should hang.

30. 
    Dustin Sauls said on: April 26th, 2005 at 1:28 pm

    By the way, I really enjoy your site and your writ­ing. This series has been a real treat. Keep it up.

31. 
    Allan White said on: April 26th, 2005 at 9:15 pm

    I don’t think I’ve ever con­sidered hanging the bul­lets or quotes out­side the left mar­gin in ten years of design. Very interesting. 

    I sup­pose con­text affects this choice greatly — book design, magazine lay­out, web page, et. al. I may try it sometime. 

    Quark peeps: try InDes­ign, you may like it. But, bring a fast machine…

32. 
    Allan White said on: April 26th, 2005 at 9:18 pm

    I guess I’m hav­ing a bit of a hard time with this one — it brings a bit too much atten­tion to some­thing that pops out of the mar­gin (unless that’s what the con­tent needs). 

    One error I do see a lot is fail­ure to indent the fol­low­ing lines on a bul­let or quote (so the text after the bullet/quote appear aligned, rather than wrap­ping back to the far left). That bugs me!

33. 
    Mark Boulton said on: April 26th, 2005 at 10:14 pm

    Dustin — Thanks, I’m already work­ing on the next “simple steps” tutorial. keep tuned.

    Allan — Hanging bul­lets in lists has really died a bit of a death due to soft­ware, but also due to type­set­ting mov­ing from one of learned craft over many years to on e where you read the Quark XPress manual or if you’re lucky get a tutorial in college. 

    Maybe resur­rect­ing a seem­ingly dead (or cer­tainly in on it’s last legs) typo­graphic con­ven­tion is not a wise thing to do. Maybe what we’ve seen with hanging bul­lets is typo­graphic evol­u­tion over the past twenty years or so. I cer­tainly think people aren’t used to see­ing type set in this way any­more, so there­fore should it still be done? 

    I think it has it’s place, and as poin­ted out in this com­ments thread it also doesn’t have it’s place. I still believe it is cor­rect type­set­ting though. What I’m try­ing to show is type­set­ting has rules, or rather had rules. Rules should be under­stood and then fol­lowed, or broken. But they should be under­stood first right?

34. 
    Simon C said on: April 27th, 2005 at 10:03 am

    I’m glad someone else thinks that Quark’s hand­ling of typo­graphic ele­ments is ham-fisted. 

    The soft­ware that I first used (and some­times still do) to cre­ate long doc­u­ments was Corel Ven­tura. This has such detailed con­trol over typo­graphy that you can set how much, by per­cent­age, the punc­tu­ation should hang out­side the column of text. I found this to be great, as I thought that puctu­ation that hung com­pletely out­side looked a little jarring. 

    I also think that the choice of bul­leted lists to illus­trate the point was maybe a little unwise, as it could be said that indent­ing them serves a pur­pose. As has been poin­ted out, what about nes­ted lists?

35. 
    Mark Boulton said on: April 27th, 2005 at 10:24 am

    Simon C — It’s great that this tutorial has sparked debate about hanging punc­tu­ation, spe­cific­ally hanging bul­lets. Obvi­ously this is hav­ing a jar­ring effect on many people because it’s just not done much any more.

    Nes­ted lists are obvi­ously an instance where indent­ing is per­haps neces­sary to ensure the inform­a­tion is chunked to be legible to the reader. Another way of of nest­ing lists is by using dif­fer­ent bul­let glyphs — although this, I agree, may not be so legible.

36. 
    Allan White said on: April 27th, 2005 at 8:13 pm

    While I cher­ish typo­graphy and its rich his­tory, this does demon­strate to me that I’m a product of the digital era. I entered school just as ruby­lith and wax were fad­ing away. It is strik­ing how much typo­graphic norms have been influ­enced by the tools.

37. 
    Peter G. said on: April 30th, 2005 at 12:32 am

    If any­one wants to see a good example of hanging bul­lets used online, check out the newly redesigned forevergeek.com

38. 
    Bruce Collier said on: May 2nd, 2005 at 4:12 am

    The hanging bul­lets look ter­rible. Please tell me, how would you include a para­graph break within a bul­leted item if it’s not indented? 

    I bet you can­not do this clearly.

39. 
    nick sweeney said on: May 6th, 2005 at 6:13 pm

    Please tell me, how would you include a para­graph break within a bul­leted item if it?s not inden­ted?

    I’d sug­gest that if you need to insert a para­graph break, then it shouldn’t be bul­leted to begin with, and that you ought to use a dif­fer­ent format.

40. 
    Mark Boulton said on: May 9th, 2005 at 9:09 pm

    Bruce — I’d pretty much agree with what nick sweeney is say­ing. If you’re using para­graphs within a bul­let list, you really shouldn’t be using a list at all.

41. 
    David Robarts said on: May 17th, 2005 at 7:19 am

    I love InDesign’s optical mar­gin align­ment. Rather than hanging punc­tu­ation fully over the mar­gin, it attempts to hang over just enough so that the mar­gin line looks straight. Sadly I’ve taken two classes that include InDes­ign and neither of the classes have poin­ted out the won­der­ful feature..

42. 
    Brian said on: May 17th, 2005 at 11:26 pm

    Great post. Where should the clos­ing quote appear if the last line of the quote is not close to the right mar­gin? Thanks for keep­ing type alive.

43. 
    Mathias said on: June 8th, 2005 at 12:32 am

    I’ve got a ques­tion about ordered lists:
    
    What is the typo­graph­ic­ally cor­rect thing to do in the case of a ordered list in text with a first line indent? I assume the num­bers are to be in the gut­ter. How­ever, how should we set the text of the list?

44. fred design » Rules for good typography said on: December 9th, 2009 at 11:25 am

    […] Not inden­ted. Like­wise, punc­tu­ation marks should be in the mar­gin as well. The image below from Mark Boultons site illus­trates this per­fectly. You can see a tutorial for bul­let points here, and punctuation […]

45. Portfolio Tips – Part 3: Typography « Design + Build said on: May 25th, 2010 at 5:57 am

    […] Another detail to be aware of is hanging punc­tu­ation. This is most use­ful when block­ing out quotes, or using bul­let points. Most  desktop pub­lish­ing pro­grams will indent the text, keep­ing the punc­tu­ation (bul­let, or quotes” inside the line of the text. It is actu­ally much easier to read text when the punc­tu­ation is set out­side the width of the text, so the text block is the same size. I recom­mend you check out Part 2 of the afore­men­tioned Five Simple Steps to Typography. […]