![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
Once in a while, usually when I have a lot of serious work to do, I waste time fiddling with the design of my various websites. This time, I blame ![[livejournal.com profile]](https://www.dreamwidth.org/img/external/lj-userinfo.gif)
jupitah, whose recent post on fonts prompted me to follow chains of links on typography, web design, CSS and so on. You see, I'm a font fetishist, and I'm always looking for ways to reproduce on the web the simple beauty of an expertly-typeset book. This is almost impossible, given the limited range of browser fonts and the rather crude way browsers handling things like justification and kerning, but I can't resist trying.
Thus it was that instead of grading essays, I spent most of last night fiddling with my home page. Not a whole site, mind, just one page. To make matters worse, these were not major layout changes that people might actually notice; they were itsy-bitsy changes that only I - and maybe a few serious web-nuts - will notice.
First of all, I changed the background, putting the content inside a <div> tag to give a border effect as I do in our department's site. However, rather than putting the background image in the border with a plain colour for the content background, I gave it a plain white border and used the image for the content. If you've looked at the page, you will now be wondering where the image is, since it looks like a plain colour (very like the original background in fact). Hah, that's the subtle part. The background image is almost a plain colour, produced by scanning a blank sheet of paper and manipulating the image a little. In fact, I manipulated it too much: there are supposed to be slight irregularities in the colour. I have a hypothesis that this is more restful to the eye than a completely featureless slab of colour. I need to work on this a bit more.
Now for the typography. After a lot of experimentation with different fonts, I changed the font families to Bitstream Vera Serif for body text and Georgia for headings (Georgia is a lovely font, but doesn't look good in small sizes). As backups, there are URW Palladio L, Bookman, Palatino, and of course the browser's default serif font. Note the absence of Times New Roman, which I don't particularly like. As the name suggests, it's more of a newspaper font than a book or web font, and is thus too compressed for my tastes.
The next stage was to change the apostrophes and quotation marks so that they come out facing the right way. I'd stuck strictly to straight vertical quotation marks for years after an early encounter with the dreaded Microsoft "smart quotes". Yes, in those days I was young and foolish, and thought you could produce a web page by writing in Word and saving it as HTML. E-mails from people who viewed my quotation marks as anything but quotation marks disabused me of this notion. Once bitten, twice shy, or as we say here in Turkey, he who burns his tongue on hot milk, blows on his yoghurt. Of course there are ways to do this properly in HTML, and I decided it was high time I did so, sprinkling my text liberally with special characters like “ and ’ (which give “ and ’ respectively). A similar operation replaced hyphens with em-dashes.
All of this so far is fairly standard web design stuff; the real typo-fetishism comes with the next stage. Spacing is something that even most word processors handle badly, let alone browsers. (If you want to see really nice word spacing and kerning, look at something typeset with LaTeX.) A kludge some people use in both word processing and web page writing is to put two non-breaking spaces ( ) at the end of each sentence, but this relic of the typewriter age produces an effect almost as inelegant as the situation it was intended to remedy. Proper typesetting software uses a complex algorithm to make sure that the space after, say, a comma is very slightly greater than that after a normal word, and the space after a sentence is longer still, but still not normally as long as two word-spaces. Reproducing this on the web is not easy. It came as a surprise to find out that HTML actually has over a dozen special characters for spaces; the problem is that these will only work as intended if your lines are ragged right rather than justified, since justification may add even more space. Eventually I came up with a workaround: leave a normal space after punctuation, and add a space thinner than you would normally want after that. I used a thin space after a sentence and a hair space after other punctuation (which was probably unnecessary, since a lot of browsers don't render it, and besides, it's a trivial space compared to what is arbitrarily added by justification). The final spacing trick is to insert a thin space after anything in italics, so they don't lean over the next word.
As a finishing touch, I put acronyms like CGI inside an <abbr> tag and reduced the size slightly.
The question is why I would spend so much time on minor changes that almost no one will notice. In a way, the answer is in the question. There is a publishers' saying that good typography should be invisible.
Update. So much for invisibility: Internet Explorer not only doesn't render hair spaces, it replaces them with a square box. The question is whether I should remove the spaces in the interests of world peace and browser compatibility, or just put a notice at the top of the page saying something like "If you see a lot of little squares in this page, go and get yourself a proper browser."
jupitah, whose recent post on fonts prompted me to follow chains of links on typography, web design, CSS and so on. You see, I'm a font fetishist, and I'm always looking for ways to reproduce on the web the simple beauty of an expertly-typeset book. This is almost impossible, given the limited range of browser fonts and the rather crude way browsers handling things like justification and kerning, but I can't resist trying.Thus it was that instead of grading essays, I spent most of last night fiddling with my home page. Not a whole site, mind, just one page. To make matters worse, these were not major layout changes that people might actually notice; they were itsy-bitsy changes that only I - and maybe a few serious web-nuts - will notice.
First of all, I changed the background, putting the content inside a <div> tag to give a border effect as I do in our department's site. However, rather than putting the background image in the border with a plain colour for the content background, I gave it a plain white border and used the image for the content. If you've looked at the page, you will now be wondering where the image is, since it looks like a plain colour (very like the original background in fact). Hah, that's the subtle part. The background image is almost a plain colour, produced by scanning a blank sheet of paper and manipulating the image a little. In fact, I manipulated it too much: there are supposed to be slight irregularities in the colour. I have a hypothesis that this is more restful to the eye than a completely featureless slab of colour. I need to work on this a bit more.
Now for the typography. After a lot of experimentation with different fonts, I changed the font families to Bitstream Vera Serif for body text and Georgia for headings (Georgia is a lovely font, but doesn't look good in small sizes). As backups, there are URW Palladio L, Bookman, Palatino, and of course the browser's default serif font. Note the absence of Times New Roman, which I don't particularly like. As the name suggests, it's more of a newspaper font than a book or web font, and is thus too compressed for my tastes.
The next stage was to change the apostrophes and quotation marks so that they come out facing the right way. I'd stuck strictly to straight vertical quotation marks for years after an early encounter with the dreaded Microsoft "smart quotes". Yes, in those days I was young and foolish, and thought you could produce a web page by writing in Word and saving it as HTML. E-mails from people who viewed my quotation marks as anything but quotation marks disabused me of this notion. Once bitten, twice shy, or as we say here in Turkey, he who burns his tongue on hot milk, blows on his yoghurt. Of course there are ways to do this properly in HTML, and I decided it was high time I did so, sprinkling my text liberally with special characters like “ and ’ (which give “ and ’ respectively). A similar operation replaced hyphens with em-dashes.
All of this so far is fairly standard web design stuff; the real typo-fetishism comes with the next stage. Spacing is something that even most word processors handle badly, let alone browsers. (If you want to see really nice word spacing and kerning, look at something typeset with LaTeX.) A kludge some people use in both word processing and web page writing is to put two non-breaking spaces ( ) at the end of each sentence, but this relic of the typewriter age produces an effect almost as inelegant as the situation it was intended to remedy. Proper typesetting software uses a complex algorithm to make sure that the space after, say, a comma is very slightly greater than that after a normal word, and the space after a sentence is longer still, but still not normally as long as two word-spaces. Reproducing this on the web is not easy. It came as a surprise to find out that HTML actually has over a dozen special characters for spaces; the problem is that these will only work as intended if your lines are ragged right rather than justified, since justification may add even more space. Eventually I came up with a workaround: leave a normal space after punctuation, and add a space thinner than you would normally want after that. I used a thin space after a sentence and a hair space after other punctuation (which was probably unnecessary, since a lot of browsers don't render it, and besides, it's a trivial space compared to what is arbitrarily added by justification). The final spacing trick is to insert a thin space after anything in italics, so they don't lean over the next word.
As a finishing touch, I put acronyms like CGI inside an <abbr> tag and reduced the size slightly.
The question is why I would spend so much time on minor changes that almost no one will notice. In a way, the answer is in the question. There is a publishers' saying that good typography should be invisible.
Update. So much for invisibility: Internet Explorer not only doesn't render hair spaces, it replaces them with a square box. The question is whether I should remove the spaces in the interests of world peace and browser compatibility, or just put a notice at the top of the page saying something like "If you see a lot of little squares in this page, go and get yourself a proper browser."
