Comments on: 15 Excellent examples of Web typography http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/ Thu, 09 Feb 2012 06:38:25 +0000 hourly 1 http://wordpress.org/?v= By: 15 Excellent Examples of Web Typography. Under the Bonnet | WhiteSandsDigital.com http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-10891 15 Excellent Examples of Web Typography. Under the Bonnet | WhiteSandsDigital.com Thu, 11 Sep 2008 13:19:37 +0000 http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-10891 [...] great analysis of the use of type on ‘A list apart’.read more | digg [...] […] great analysis of the use of type on ‘A list apart’.read more | digg […]

]]> By: Grego Borisov http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-6770 Grego Borisov Thu, 24 Apr 2008 12:12:31 +0000 http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-6770 Yes. Internet so you do not printed glossy magazine. I understand why you need a grid. There is clarity. But why completely empty left corner? We must understand that people first turn draws attention to this corner. p/s. You can put advertising announcement ;) Yes. Internet so you do not printed glossy magazine. I understand why you need a grid. There is clarity. But why completely empty left corner? We must understand that people first turn draws attention to this corner.

p/s. You can put advertising announcement ;)

]]> By: Good Typography on the Web. http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-3346 Good Typography on the Web. Thu, 03 Jan 2008 16:52:19 +0000 http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-3346 [...] also Part 2 [...] […] also Part 2 […]

]]> By: i love typo =) « Naya’s blog http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-2597 i love typo =) « Naya’s blog Sun, 16 Dec 2007 02:07:13 +0000 http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-2597 [...] de près ou de loin à la typographie, un très bon article en deux parties (partie 1 / partie 2) qui analyse les choix, l’utilisation et la fonction des typos au travers de 15 très bons [...] […] de près ou de loin à la typographie, un très bon article en deux parties (partie 1 / partie 2) qui analyse les choix, l’utilisation et la fonction des typos au travers de 15 très bons […]

]]> By: am Design » Baabelin kirjasto » Artikkelikatsaus: Syyskuu 2007 http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-2293 am Design » Baabelin kirjasto » Artikkelikatsaus: Syyskuu 2007 Tue, 04 Dec 2007 09:56:03 +0000 http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-2293 [...] toisessa osassa Part II: Taking a list apart analysoidaan tarkemmin ensimmäisen [...] […] toisessa osassa Part II: Taking a list apart analysoidaan tarkemmin ensimmäisen […]

]]> By: Nolawi http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-2089 Nolawi Mon, 26 Nov 2007 04:06:57 +0000 http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-2089 I just don''t think there is nothing wrong with negative letter spacing in headlines and even in sub headlines regardless of caps or no caps.... I just don”t think there is nothing wrong with negative letter spacing in headlines and even in sub headlines regardless of caps or no caps….

]]> By: Aristotle Pagaltzis http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-848 Aristotle Pagaltzis Thu, 11 Oct 2007 21:48:24 +0000 http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-848 Negative letter-spacing never improves the legibility of text. However, it doesn’t necessarily degrade it. A very careful, modest application of negative letter-spacing for very limited amounts of text can be acceptable. For example, I’ve used a minimal amount of negative spacing to darken the colour of small headers just a touch. In that particular case I had to somehow fit all of H1-H6 into an 0.6em range (1.6em for H1, 1.0em for H6), which makes it rather difficult to make the consecutive header sizes visibly different. My response was to use letter-spacing to vary the colour in addition to the font size – but the largest negative spacing I used was -0.015em. You <em>can</em> see that! Together with the positive letter-spacing (equally modest) it was enough to make even H6 and H5 clearly distinguishable from each other. Another trick I’ve found is that a minor positive letter-spacing can make smaller font sizes equally as legible as larger ones, allowing you to set a large block of copy in smaller type, and thus cramming more text onto the screen without significantly degrading readability. We’re talking about spacing on the order of 0.02–0.05em. So tiny letter-spacing adjustments can be used productively to carefully tweak the appearance of copy. The key is to stick to extremely small adjustments. Negative letter-spacing never improves the legibility of text. However, it doesn’t necessarily degrade it. A very careful, modest application of negative letter-spacing for very limited amounts of text can be acceptable.

For example, I’ve used a minimal amount of negative spacing to darken the colour of small headers just a touch. In that particular case I had to somehow fit all of H1-H6 into an 0.6em range (1.6em for H1, 1.0em for H6), which makes it rather difficult to make the consecutive header sizes visibly different. My response was to use letter-spacing to vary the colour in addition to the font size – but the largest negative spacing I used was -0.015em. You can see that! Together with the positive letter-spacing (equally modest) it was enough to make even H6 and H5 clearly distinguishable from each other.

Another trick I’ve found is that a minor positive letter-spacing can make smaller font sizes equally as legible as larger ones, allowing you to set a large block of copy in smaller type, and thus cramming more text onto the screen without significantly degrading readability. We’re talking about spacing on the order of 0.02–0.05em.

So tiny letter-spacing adjustments can be used productively to carefully tweak the appearance of copy. The key is to stick to extremely small adjustments.

]]> By: johno (iLT) http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-653 johno (iLT) Sun, 07 Oct 2007 19:04:19 +0000 http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-653 Kari Yes, I think you could be right about the Coudal Partners site. It's true that the negative spacing is indiscriminate. The only way to manage different letter pairs differently would be to use some regexp (and apply the negative letterspacing only to certain pairs), but in effect what you'd be doing is creating another (CSS) 'kerning' table. Klingsor Thank you. It most certainly is (thanks to everyone reading and commenting). Dimitru Thanks. I have some more in the oven... Barney Yes, as I mentioned in my response to Kari above, it hardly seems worth it -- the CSS negative letterspacing just creates more problems, which then have to be fixed with yet more CSS/coding. Cody There's definitely a distinction to be made between print and web here. In fact the nomenclature only goes to confuse the matter, because we're talking about <em>CSS</em> letterspacing, rather than kerning. For print, it might make more sense to look at side bearings, and adjust those if necessary; but then we really have to get our hands dirty. Sally Yi It's nice to see you here. Hope all is well in China. From what I've been reading on your blog things -- besides the toppling painters -- are going well. <blockquote><em>favourite blog of all time</em>.</blockquote> Where's that <em>blush</em> smiley when I need it. Thank you. Tylor It's a wonderful book. In fact one could learn a lot about typography from just holding and looking at it -- as opposed to reading it. I dream of interviewing Bringhurst on this blog one day. Well, we can all dream! Roger Thanks for your enthusiastic praise. The time I spend researching and writing these articles is more than rewarded by all these wonderful comments. Thanks for being a part of it. Kari
Yes, I think you could be right about the Coudal Partners site. It’s true that the negative spacing is indiscriminate. The only way to manage different letter pairs differently would be to use some regexp (and apply the negative letterspacing only to certain pairs), but in effect what you’d be doing is creating another (CSS) ‘kerning’ table.

Klingsor
Thank you. It most certainly is (thanks to everyone reading and commenting).

Dimitru
Thanks. I have some more in the oven…

Barney
Yes, as I mentioned in my response to Kari above, it hardly seems worth it — the CSS negative letterspacing just creates more problems, which then have to be fixed with yet more CSS/coding.

Cody
There’s definitely a distinction to be made between print and web here. In fact the nomenclature only goes to confuse the matter, because we’re talking about CSS letterspacing, rather than kerning. For print, it might make more sense to look at side bearings, and adjust those if necessary; but then we really have to get our hands dirty.

Sally Yi
It’s nice to see you here. Hope all is well in China. From what I’ve been reading on your blog things — besides the toppling painters — are going well.

favourite blog of all time.

Where’s that blush smiley when I need it. Thank you.

Tylor
It’s a wonderful book. In fact one could learn a lot about typography from just holding and looking at it — as opposed to reading it. I dream of interviewing Bringhurst on this blog one day. Well, we can all dream!

Roger
Thanks for your enthusiastic praise. The time I spend researching and writing these articles is more than rewarded by all these wonderful comments. Thanks for being a part of it.

]]> By: Roger Gordon http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-626 Roger Gordon Sat, 06 Oct 2007 10:22:41 +0000 http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-626 Thanks for this absolutely excellent article. I really appreciate the time and effort that goes into every post on this blog. It's rare to find such quality on the net. Personally, I think you should charge for that .pdf book you mentioned, because these articles really are worth paying for. Thanks again - I've learned so much about typography and design in general just from this article. Thanks for this absolutely excellent article. I really appreciate the time and effort that goes into every post on this blog. It’s rare to find such quality on the net.

Personally, I think you should charge for that .pdf book you mentioned, because these articles really are worth paying for. Thanks again - I’ve learned so much about typography and design in general just from this article.

]]> By: tylor http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-553 tylor Tue, 02 Oct 2007 03:29:59 +0000 http://ilovetypography.com/2007/09/27/15-excellent-examples-of-web-typography-under-the-bonnet/#comment-553 I just finished reading that Bringhurst quote this morning... interesting to see how prolific that book really is! I just finished reading that Bringhurst quote this morning… interesting to see how prolific that book really is!

]]>