Squawk redesign part 3: Type choices & SIFR
This is the third instalment of the series on how the redesign of this site developed. This time I will be focusing mainly on typography, as well as on the implementation of SIFR.
If you have scanned my archives you might have found a link to a site explaining the differences between the versions/substitutes of Lucida Grande on different operating systems. I will reiterate the content of this link, mainly because I want you to stay on my site;-)
I am big fan of Lucida Grande, but unfortunately it is not installed by default on windows machines. I do not know about Linux, but I suspect that the font is also missing on quite a few systems.
Since Lucida Grande is not installed on at least half of the systems visiting this website, we revert to Lucida Sans Unicode and Lucida Sans. Both of these have a couple of flaws:Lucida Sans Unicode looks almost like Lucida Grande, yet is a menace to look at in Bold and Italic.
On the other hand Lucida Sans looks great in bold and italic, yet is an insult to look at, when displayed normally.
So what can be done to make sure that we get the nice traits from the different font-families: Selective CSS here we come....
* { font-family:'Lucida Sans Unicode', 'Lucida Grande', ' Trebuchet MS', Helvetica, Verdana, Arial, sans-serif; }
strong, em { font-family:'Lucida Sans', 'Lucida Grande', ' MS', Helvetica, Verdana, Arial, sans-serif; }
strong { font-weight:bold; }
em { font-style:italic; }
This way all strong or italic elements use Lucida Sans, while all other text is rendered in Lucida Sans Unicode. Lucida Grande is invoked on most Macs, because they have neither of its alternatives. Trebuchet MS, Helvetica, Verdana and Arial are the remaining fallback options for those that do not have any Lucida version installed.
The headings
As you probably saw the headings on this website are not displayed using Lucida Grande. If everything works well, you should see them drawn in a slabserif font. (Let’s thank SIFR for font goodness at this point. Go on, kneel on the floor...)
The choice of font for my headings was determined by readability and price. By the latter I am referring to ‘free’, which (of course) limits my selection significantly.
Through some research online I decided that a slabserif font would be the best choice for displaying titles, especially because it remains readable down to very small sizes.
The font used in the titles is called GeoSlab703 Md BT. If you do a standard search with Google you are bound to find a download link. I will not link to one directly, because they seem to change every couple of days.
SIFR: Font heaven & testing hell
I used SIFR 3 to dynamically replace my standard Times font with the GeoSlab703 Md BT. If you are interested in SIFR you can read up on how to use it in the SIFR 3 wiki. Remember to do lots of testing in different browsers.
There is only one thing about SIFR that took me a long time to find out: How to style child nodes of a sifrerised element differently. So I will quickly outline my mistake and method, hoping that it will save you time:
sIFR.replace(font, {
selector: '
,wmode: 'transparent'
,css: [
'.sIFR-root { color:#2f3d4a; font-size:23px; background-color:#fff; }'
,'a:link { text-decoration:none; color:#2f3d4a; }'
,'a:visited { text-decoration:none; color:#2f3d4a; }'
,'a:hover { text-decoration:none; color:#105496; }'
,'a:active { text-decoration:none; color:#ffa000; }'
,'.span { color:#969086; }'
]
,ratios: [8,1.41,10,1.33,14,1.31,16,1.26,20,1.27,24,1.26,25,1.24,26,1.25,35,1.24,46,1.23,67,1.22,70,1.21,71,1.22,75,1.21,76,1.22,80,1.21,81,1.22,1.21]
});
In this case the ‘.span { color:#969086; }’ styles all the elements with a class of ‘span inside the h3 element. I found out that I have to specify a class, just selecting a span element like this ‘span { color:#969086; }’ does not work. (Effectively I use a span element with a class of span. Talk about doubling up here...)
To be continued
Next time (the last part of this series), I will have a look at the coding process for this site. Expression Engine goodies all inclusive.
// celsius
Friday, November 2nd 2007
at 21:46 PM
sifr rocks. thanks for the post & bravo on the lovely site.
// Dominik Lenk
Saturday, November 3rd 2007
at 4:12 AM
celsius: Thanks for the comment and welcome to Squawk. (My plan is to pick up blogging a lot more with this redesign...)
Bytheway, I love your gravatar—very much inline with the name “celsius"—is there a red version as well?
// Hamish M
Wednesday, November 7th 2007
at 22:54 PM
Very nice job. I like it a lot.
I’ve been meaning to redesign my blog as well—seems like I get that urge every month or so :p
// arjuna
Thursday, January 10th 2008
at 22:37 PM
there is a typo on … ‘Lucida Grande’, ‘ MS’, Helvetica, ... Trebuchet is missing ;)
however good job
arjuna
// Dominik Lenk
Friday, January 11th 2008
at 2:47 AM
Thanks a lot Arjuna. I just fixed it.
When I read your comment my eye drew MS and Helvetica together. My first thought was that Microsoft was overdoing it now. First they create a wannabe Helvetica, then they completely rerelease it under their own name;-)
// Maksim Grinman
Thursday, January 17th 2008
at 21:59 PM
I’m loving the site, and the readability
You said you are using GeoSlab for the headers, I like this font
But how did you choose it? I’ve never heard of it before, and I found links for d/l but not much about it. What was the process in finding that font?
Thanks a lot, I’ll be a regular visitor of this site.
// Dominik Lenk
Friday, January 18th 2008
at 19:54 PM
Maksim: First of all, welcome. I did quite a bit of research before deciding on a font. Most of this research only yielded the general recommendations such as using a big x-height, large line- and letter-spacing etc. In the end I found this very helpful article on the best type faces for the screen.
Another recomendation I have about readability online (and anywhere else really) is to decrease the font size a little, while increasing the line-height by the same amount. You do not loose any space, however your layout feels lighter and text becomes more readable.
// Maksim Grinman
Friday, January 18th 2008
at 20:38 PM
Thanks for the link and the explanation
I didn’t know about that tip about the line-height either. I’ll try that.
Speaking of the fonts, on my PC I am using Lucida Grande, at a smaller size, and at the smaller sizes Lucida Grande looks better to my eye when bold. By way, it looks more like it does on a Mac that way. Is that contradictory to what you are saying, that lighter text is more readable, or do you think that different rules apply to smaller sizes?
// Dominik Lenk
Friday, January 18th 2008
at 21:08 PM
Maksim: I wouldn’t say that there are specific rules for small sizes. It always depends on the typeface that you use. For example Times is almost illegible at anything smaller than 10pt while Lucida Grande remains very readable. Of course, I am not a fully qualified typographer but I think that experimentation is the key to success. In the case of Lucida, I agree with you. It looks better in bold, but make sure to use it sparingly.
On the note of Lucida looking like it does on the Mac; this is due to the different font-smoothing technologies. You can read more about this here.
// VoIP Hardware
Monday, February 18th 2008
at 5:51 AM
Good job