Tutorials/Font Sizes
From CGWiki
Since most people who read this are looking to create a site for their webcomic, the font type and size will probably not be very important to them. After all, most of the text will be a part of images, so it'll be set in Photoshop or hand drawn, depending on how the comic is created.
However, some creators will want to add some text. Be it just news, a linked blog or pages and pages of background information on the characters, there are a few details to keep in mind.
Contents |
Setting fonts with <body> tag
The <body> tag is fairly easy to use in html. The only specification to be made for fonts is the colour. For example, at the top of a page you may see the following:
<body bgcolor="black" text="white">
This will give the page a black background and make the letters white. The actual colours chosen will depend on a few things, but some people consider the two main options to be either white text on black background or black text on white background (default). Be careful with your combinations to make them legible.
For anyone who just uses the <body> tag without a Cascading Style Sheet (css), then the colour is pretty much the only thing to worry about.
Setting fonts with a CSS file
The css can either be a seperate file or it can be a style at the top of the page. Fully explaining css is beyond the scope of this tutorial, but quick search should give some decent css tutorials.
For fonts, there are three main things that can be set by the css:
- Font colour.
- Font face.
- Font size.
The colour is fairly easy. Once you start playing with it, you'll find a combination that you like and that works well with your comic.
The face is a little harder. If you're not sure what this means, read this introduction to Font Families on W3Schools. The short version is: don't obsess too much with the face as you'll never be sure what fonts the reader does (or does not) have installed on their computer.
However, there is a lot to be said about the font size. We'll get to that in a moment.
To set the font properties in a css file, you'd normally see something like this:
{ color: #000000; font-family: courier, serif; font-size: 10px; }
(To the left of the { symbol will normally be the item being specified. If it was a <p> (paragraph) tag then every paragraph element would have that setting.)
The first part sets the colour. Easy. The second part sets the font family. Again, fairly easy. The last part is the font size, in this case set to ten pixels. However, specifying the size of the font in pixels is a rather bad idea.
Setting the Font Size
As a general rule, you shouldn't specify the font size at all. There are so many different people using so many different browsers in so many different configurations that it will always look bad on someone's computer. Lately it has become commonplace to set the font size in pixels, but that's wrong.
Why? Think of it this way: a letter that's 12 pixels high on a monitor with a resolution of 800 x 600 will be quite easy to read. Almost too big to be comfortable. A letter that is 12 pixels high on a monitor with a resolution of 1024 x 768 will still be quite legible, if a little small. That same 12 pixel high letter will be nigh on illegible on a monitor with a 1600 x 1200 resolution.
So if you shouldn't use pixels to set the font size, what should you use?
Use the Em setting for Font sizes.
What is an "Em"? The term Em is from the world of the printing press (people who make books). In short, it just means "the width of the letter M being printed". You can read the long version here if you're interested.
So how does that apply to webcomicers? When you specify font sizes, you should normally set the font as (from the example above):
{ color: #000000; font-family: courier, serif; font-size: 1em; }
(Note that this example focusses on the size, not the other elements such as colour or face)
What does "1em" actually mean? Basically, it says "use the default size". Most browsers have the option to set the default font size to however the user wishes. Someone who is shortsighted may set their font larger in order to be able to read the text. Someone who is using an old monitor may set the font to be smaller in order to fit more onto the screen. If you lock the size by using 10px, then you take away the readers choice in how to display the text.
So by using the em instead of the px to define the size of the font will make your page much more friendly to navigate for more people.
Bigger or smaller font sizes?
With the em, it's fairly straightforward to set the size for different parts of your site, such as headings and captions.
Bigger: Defining the font as 1.5em is the same as saying "set font to 150% of default".
Smaller: Defining the font as 0.5em is the same as saying "set the font to half of the default".
Obviously you wouldn't do this for all your text, just for the parts that you want to change. And you aren't limited to 50% increments. There's a nice write-up on this topic at w3.org that is well worth reading.
Return to the Tutorials page
