fonts

Are Your Fonts Always Welcome

related media: books | sites

No!


Graphic designers have an unlimited library of fonts but web designers have about twenty. The reason that your library has been vastly reduced is because the fonts you use, need to be on all of your users’ computers and there are very few fonts that are common to all computers.

Although you can embed a particular font into a page it is not recommended. Before embedding a font you need to be sure that the font is copyright free which is not the case for the majority of fonts.

UP-DATE - A more recent article on fonts on the web
Even though now you have more choice over the fonts you can use for the web we still suggest that for those just starting out in web design to stay within the bounds of the fonts that are common to the majority of all computers.

Fonts Embedded into Images:

For your banners and other design elements where it is necessary to use a particular font you need to embed that font into an image.

Serifs / Sans Serifs:

Your library of fonts is further reduced because most text on the web needs to be sans serif. Although it is easier to read serif typeface in print it is harder to read it on a screen.

SerifsIf your fonts are 16px or under then you need to use sans serifs. Once you use sans serifs for the majority of your copy you will need to use sans serifs for your titles and headers because from a design perspective you should not be mixing your fonts.


Font Sizes

You can select the size of fonts either with pixels, points or ems. Points are not suitable for the web. Pixels are frequently used for the web but they do not resize in Internet Explorer. Some users like to have the ability of resizing the text. Ems allows all of your text to be resized proportionately.

You need to set up the base font size in your CSS. The default font on most browsers is set to medium which is 16px. The math will be easier for you if you set the base font to 10px.

First you need to set the base font in your CSS to a percentage.
10px is 62.50% of 16px the body in your CSS would look like this:
body{
font-size: 62.50%;
}

Now lets set up the rest of you font size in ems. Base on how we just set up the body font size in the CSS 1em is equal to 10 pixels.

h1{
font-size: 1.8em;
}
#menu{
font-size: .1em;
}

#content{
font-size: 1.2em;
}

You need to experiment a bit to find the sizes that work for you or you can use:
Type Tester www.typetester.org
Which allows you to select in various font values and then gives you the result of those values.


Which Fonts to Use

        Common Fonts

The following fonts, each shown at 20px are common to almost
all computers.

FONT FACE

Six sans serif fonts that work very well for the web are:
Arial,
Comic Sans MS
Helvetica
Trebuchet MS
Verdana, which was designed for the web

 

Serif
Georgia
Georgia was also designed for the web but its best not to use it under 16px.

You would list their values in your CSS as follows:
.content{
font-family: Arial, Helvetica, san-serif;
font-weight: normal;
font-style: normal;
font-size: .9em;
line-height: normal;
text-decoration: none; text-indent: 0px;
word-spacing: normal;
color: #333;
}

The Selector:

You need to use a selector which will identify which element(s) in the web page will be affected by a particular style. The selector can either identify the style element by specific tags, class or id.
You CSS could have:
p{
font-size: 20px;
}

Now everytime you use the paragraph tag your text will be 20px;
You can also redefine the heading tags
for example:
h4{
color: #fff;
}

Now all of your text between the h4 tags will be white.

Div

When you want to affect a large section of text you can use a “div” tag. The “div” is a block tag.

Span:

When you want to affect a word or a few words then you use the “span” tag. The “span” in an inline tag.

Specific Tags:

Instead of naming the selector you can use a specific tag such as body, p, etc and use it as the selector for example:
body{
then your styles
}

Font Family

To match the font name, the user’s browser uses an available font that has the same family name that is on the users computer. The font’s appearance and metrics might not be the same. In this case, the user’s computer uses an available font that is the closest match in appearance to the requested font.

In order to get a closer match you just list a series of fonts that are similar to each other in height and width in the hope that one of them is on the user’s computer. For instance with the CSS listed above, if the user’s computer does not have Arial then it will display Helvetica if it does not have either it will display another sans-serif font that is close in appearance to Arial or Helvetica (these two fonts are very close to each other in appearance, their width is almost the same.

Even though the browser tries to match the font you still need to list fonts that you believe to be on the majority of computers or the results could be a disaster.

Line Height:

Line height controls the leading. Leading is the extra space between lines of text above and beyond the font’s size. We have 100% in the example above, in which case you could just leave it out. Leading is normally 1.2 the size of the font.

Font Size

Specify the font in pixels or ems.

Font Weight:

It can be normal, bold, bolder or you can give it a numeral value 100, 200 and up. I have not found the numeral values to work well. Bold does not normally work on font sizes that are under 11pxs.

Color:

It is best if you only use Web Colors (216) or Web Smart colors (4096). You only need to use 3 digits for the hex number. For example for the color red which is #ff0000, you can only have to write the first digit of each two digits: FF 00 00 can be expressed a #F00. If the color is not represented by a number that is listed as pairs then it is not a Web Safe or Web Smart color.

Text Decoration:

None, underline, overline, line-through

Text Align

Left, center, right, justify. Text on screen should not be justified or centered it is harder to read.

Font Variant

Either normal or small caps (small-caps) for lower case characters.

Font Stretch

The font stretch indicates the desired amount of condensing or expansion in the glyphs used to render the text, relative to other fonts in the same font family.

Font Style

The font style specifies whether the text is to be rendered using a normal, italic, or oblique face.

Text Indent:

Can specify the size of an indent at the beginning of a paragraph.

Word Spacing:

Can increase or decrease the negative space between words.



share / bookmark



Send the link for this page to yourself




code

color

CSS

design

type

writing

info arch

the net

php

seo

user

usabilty


be inspired


my notes


sites


CLOSE WINDOW      

Type Tester www.typetester.org
Allows you to select various font values and then gives you the result of those values.

Are Your Fonts Always Welcome


Dr. Wilson – Text Font Readability Study
Sans Serifs for the web – about.com
Online demo comparing Sans Serifs vs Serifs for the web.
Web Design Bureau: ” You need to use san serifs on the web”>

Ems


Resource on Font Sizing - a variety of opinions
W3C on Font Sizes
Discussion of size – ems
Discussion of size – clagnut

Headings and Hierarchy


W3C Organizing a Page Using Headings
W3C Using h1-h6 to identify headings
RNIB Web Accessibility

Writing for the Web


Jakob Nielsen There is a ton of information about writing for the web on this site

books



Type
Thinking Type: A Critical Guide for Designers, Writers, Editors, & Students
by Ellen Lupton
Amazon


Fluid Web Typography
by Jason Cranford Teague
Amazon

Eye Tracking
Eye Tracking
by Jakob-Nielsen
At Amazon