murks

This blog came with a default CSS file. It became obvious pretty quickly that it is not what the author of the blog software uses himself pointlessramblings.com. I used the default as a basis anyway and tweaked it to my liking. I took a fair bit of advice from the fantastic Butterick’s Practical Typography and more technical best practices from w3schools.com. There were a number of things to consider and decisions to make.

Line lengths

Butterick recommends 45-90 characters, a random sampling of books I checked had just above 60 characters, two online newspapers used about 60 and 80 characters respectively. I decided to aim near the upper end of this scale and decided to wrap at max-width: 35em. With my body font-size: 1.5em; this works out to just below 80 characters. I was sort of reluctant to do this as I hate it when I am forced to read extremely narrow columns while most of the screen is empty. The alternative would have been the fefe way, which means to wrap when you run out of screen width. This does not look too good either. My setting requires about 870 px of width. On a standard 1920x1080 px display that still leaves more than half of the page empty. I am not entirely satisfied, but I doubt that I will find a better compromise.

Alignment

The standard design justifies for the body text. In theory this is fine, in practice not so much. There are basically three ways to achieve justification: hyphenation, word spacing an letter spacing. Letter spacing is a typographical no-go, since the space between letters has been carefully chosen by the font designer. Word spacing can be acceptable but I find it very irritating. That leaves hyphenation, which is language dependent and has abysmal support in web browsers. Most web browser are unable to hyphenate anything but English text and do even that badly. Even though I do write in English my decision is to not justify but use text-align: left; or not specify anything at all, since left aligned is usually the default setting.

This is a good example of how bad the web is for typesetting. True, there are javascript libraries that do a better job than web browsers do by default, but that is just adding another layer of crap on top of huge crap heap. It might look better but it will smell even worse. I will rant more about the stupidity of today's web technologies in another post.

Fonts

I decided to generally use a serif font for the page. A long standing recommendation has been to use a sans serif font for the web, but the reason for this were the low resolution displays of the previous decade. Which ones to use? One thing is clear, Times New Roman is out. I also decided against using web fonts, as I dislike loading them from somewhere else and whether distributing fonts is legal is at least questionable. So you either have the font installed or your browser will use a fallback. Hopefully your default fonts are reasonably pretty to look at. Here is my font order: font-family: "Bitstream Charter", Georgia, serif;. Charter is a beautiful font and some versions of it are freely available. I was considering "Source Serif Pro" in there, which is nice enough and also free. However, it was released two years ago and is still lacking italics, which is a major bummer. I wonder whether Adobe will ever deliver on their promise and release a version with italics. Both of these fonts are unlikely to be installed, so the next in line is a so called "web safe" font, which simple means that it is installed on a lot of computers by default. I chose Georgia, which should be available on about 95% of computers out there, machines running Linux being the exception. If all of this fails, the browser will use its default serif font. You should be fine either way.

For code snippets and preformatted text I decided on a simpler font order: font-family: "Source Code Pro", monospace;. "Source Code Pro" is one of the nicest monospace fonts available and it is free. Curiously enough, it does have italics, only the serif variant of the "Source Pro" family of fonts is lacking it. Since "Source Code Pro" is also unlikely to be installed on your machine there is a fallback to your default monospace font.

Margins and Padding

For those I used my eyes and the handy live style editing feature of firefox or firebug. Just right click, choose "Inspect Element", "Style Editor" and tweak those settings until it looks good. I chose to use em instead of px for anything but lines. I added padding: 0.5em; to the wrapped text so that it has minimal padding, otherwise it will collide with the screen borders on small screens.

Outlook

This is probably not the last post about the look and feel of this website and it is currently evolving. However, what was presented here was certainly the most important part. Upcoming is a post about the mobile friendliness and performance.