Wednesday, April 13, 2005

More cosmetic changes

Just bear with me for the week or two, and the blog will have "real content". But for now, since the look of the blog doesn't make me a happy man yet, all the entries will still be about CSS changes.

What I've done more to the blog this time is to choose the "right" font.

One the first day I revived this blog, the first impression I had on this template is that, "hey, there should be better font that suits all these headers than this." But that thought just drifted away really quickly.

After messing around with the code for a day or two, though, that thought came back to me again. Upon closer looks at the CSS, I finally realized that my system didn't have the font that the page designer intends to use...

Those who are familiar with CSS will know that, usually, when one wants to specify a font for a particular element of the page, one can achieve that by defining font-family for that element. For example:

code {
font-family: "Courier New", Courier, mono;
...
}

In the above rule, we basically tells the browser that all the text inside every <code> tag should use one of these fonts. The key point here is that, when the browser sees this list, it will try its best to find and use the earlier font(s). For example, if your system has Courier New, the browser will use it for rendering the text, and disregard other fonts on the list; otherwise, it keeps going down the list, until it finds the one that it can use.

Looking closely at the CSS rules for all the headers, I found something similar to the following:

font-family: "Lucida Grande", "Trebuchet MS";

which means the page designer originally intends to use Lucida Grande for all the headers. Unfortunately, Lucida Grande didn't come with my computer, so my browser keeps using Trebuchet MS instead. And though Trebuchet doesn't make the page looks that ugly, I felt that the page could look better. Besides, Trebuchet is still a fallback font. So, later that day, I managed to get Lucida Grande installed on my system.

And, phew, what a difference! After getting the font installed, the page looked decent. But, then, I never like how the page header looks. And this afternoon, I just realized that what I need is a more round-looking kind of font. So I thought of Arial Rounded MT Bold. The font is already on my system, so this time I didn't have to waste time finding more font, and was able to start coding CSS right away.

Now, after a second round of changes to <h1>, <h2>, and <h4> tags to use Arial Rounded font, the page looks almost perfect. :-D

No comments: