« Comment Spam Alert | Main | The Style Contest is Live »

Font Sizes and Colors

mtbadge-small.gif
Updated
Movable Type uses CSS elements defined in your weblog's stylesheet template to control font sizes as well as other style factors. The following graphic indicates which default stylesheet classes and IDs correspond to which heading and text elements in the MT3.2 default Vicksburg style.

font-size-MT32.gif

To change the size or color of one of the font elements, you need to change the stylesheet. For example, in the default Vicksburg stylesheet, find the following:

/* Vicksburg (theme-vicksburg.css) */

/* basic page elements */

body
{
font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif;
font-size: 12px;
}



Change the font size to the desired level. Save and rebuild your stylesheet. You may need to empty your browser cache to see the changes reflected on your site. This change affects the text in the body of your posts.

Likewise, changing the font size or colors in this part of the stylesheet:

.module-header,
.trackbacks-header,
.comments-header,
.comments-open-header,
.archive-header
{
/* ie win (5, 5.5, 6) bugfix */
p\osition: relative;
width: 100%;
w\idth: auto;

margin: 0;
border-left: 5px solid #36414d;
padding: 5px;
color: #fff;
background: #a3b8cc;
font-size: 11px;
font-weight: bold;
line-height: 1;
text-transform: uppercase;
}

will change the headers in your sidebar.

Regarding colors, if you scroll through your stylesheet you will see several instances of the word "color" followed by a # sign and six (or three) characters comprised of letters and or numbers. These six characters represent a color; the first 2 characters affect the RED tones of RGB, the third and fourth characters represent the green, and the fifth and sixth characters the blue. Much like the red, green, blue color adjustments of your TV, these three colors in combination create the millions of colors that you can see on computer screens. #FFFFFF will produce white, #000000 will produce black, #FF0000 - red, #00FF00 - green, and #0000FF - blue. You can use a tool like CSS Color Values to experiment with different color combinations and see the color values that result. (When a color is represented with only three characters, for example #FFF, it is just a shorthand for six of the same characters, e.g. #FFFFFF.)


Earlier Versions of Movable Type

Versions of Movable Type ealier than MT 3.2 used a different default stylesheet and a different default style. The following graphic indicates which default stylesheet classes correspond to which heading and text elements in the Gettysburg style.

test_blog_fonts.gif

To change the size of one of the font elements, you need to change the stylesheet. For example in the default Gettysburg stylesheet, you'll find the following:

.content p {
color: #666666;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}

In this case, Movable Type uses absolute-size keywords for font sizes in the default stylesheet templates. Absolute-size keywords are xx-small, x-small, small, medium, large, x-large, and xx-large. (Note: I've also seen these exact same keywords referred to as relative keywords.)

Change the font size to the desired level. Save and rebuild your stylesheet. You may need to empty your browser cache to see the changes reflected on your site.

One problem with using the keyword font sizing method is that the Windows IE 5 browser renders every font one size bigger than it's supposed to be, messing up the way your MT weblog looks on older browsers. This is becoming less of a problem as people upgrade to IE 6, but there is still some segment of the population that uses IE 5 (in the case of my recipe site, that's about 9%). There are two fixes to this problem: the voice-family hack and absolute pixel sizes.

1. The voice-family hack. You can add some odd code to each font size declaration fooling the IE 5 PC browser into thinking that that's the end of the style element. The above banner heading style code would look like this with the hack (my notes in comments):

.content p {
color: #666666;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
font-size: x-small; /* REDUCE desired size a notch for IE 5 */
voice-family: "\"}\"";
voice-family: inherit;
font-size: small; /* REAL DESIRED SIZE for all other browsers */
}

For more information about how this hack works, look up Tantek voice-family hack in Google.

2. Absolute Pixel Sizes. The most popular way to deal with the fact that different browsers render font sizes in different ways is to use absolute pixels to define your font sizes. I've done this with my recipe site as I can't count on my visitors to have the most recent browsers. With pixel sizes, the content p class would look like this:

.content p {
color: #666666;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}

The font sizes translate from keywords to pixels approximately like the following:

font-size: xx-large; » font-size: 30px;
font-size: x-large; » font-size: 24px;
font-size: medium; » font-size: 16px;
font-size: small; » font-size: 12px;
font-size: x-small; » font-size: 10px;
font-size: xx-small; » font-size: 8px;


Accessibility and Relative Font Sizes

Both the default keyword sizes and absolute pixel sizes discussed above have the disadvantage that they make it more difficult for some people to adjust the view of the content in a larger size in their browsers. Accessibility proponents encourage the use of relative font sizes that adjust the font sizes relative to whatever default setting the user has selected for his or her browser. The two methods of relative sizing are percentages and em. With the percentage method, a font size of 100% would be the same as the default font size on a browser. If the default size is 16px, then a font size of 80% would be 80% x 16px or 12.8px. With the em method, a setting of font-size: 1em is the equivalent of font-size: 100%. font-size: 1.2em would be font-size: 120%.

The percentage and em methods have their own browser consistency issues which you should be aware of before using. As I am clearly not an expert in CSS, I recommend researching the different options for more informed opinions.


Links:
Tantek Celik's Hack
Relative Font Sizes and Inheritance
How Do I Size Fonts?
Side-stepping IE
Care With Font Size - Quality Web Tips - from W3

Comments (2)

Mark Rabinowitz Author Profile Page:

Is it possible to change font size within a specific part of a specific article w/o using the stylesheet? For example, the copyright credit at the bottom of many of my posts. I'd like them to be smaller than the normal font. Will using an HTML fontsize= tag work? It hasn't in the past....

Thanks!

Mark

is it possible to use a non-standart font for the titels of a post? How do i insert this option in the stylesheet, and how can I let IE / Firefox know that they have to use the font which is on my server??

Post a comment

(If you haven't left a comment here before, your comment may need to be approved before will appear on the entry. Thanks for waiting.)