logo
g Text Version
Auto
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Society & Culture
Sports
Travel & Leisure
TV & Movies

dailyclick
Bored? Games!
Postcards
Astrology
Take a Quiz
Rate My Photo

new
Ethnic Beauty
Adolescence
Middle Eastern Culture
Yoga
Vision Issues
Paper Crafts
Comedy Movies


dailyclick
All times in EST

Full Schedule
g
g HTML Site
Elizabeth Connick
BellaOnline's HTML Editor

g

Choosing the Right Font, Part Two

Now that you've selected your font type and the specific style, your work isn't quite finished. You have a few more design decisions to make about your website text.

First, there's font size to consider. If you already have a basic site design laid out, you will want to take that into consideration and choose a font size that will blend well with your overall site layout. You should keep your audience in mind as well; for example, a site intended to provide information for the elderly should have a fairly large font. Of course, don't go overboard and put everything in huge letters either. Your font size should be large enough to be legible, but small enough to fit the most text possible "above the fold" (meaning the part of the page that is visible without scrolling down). As a rule of thumb, your main font size should be between 12 and 16 pixels.

Header text should be significantly larger than body text, so that your readers are immediately aware that these sections are critical. If your body text is 12 pixels, don't put in headers that are 14 pixels – use an 18 or 20 pixel font instead.

While we are on the subject of font sizes, let me mention that you should always use pixels rather than points to specify size. Points are a measurement scale based on paper printing; because it wasn't designed for use on computers, different monitors will render the same point size slightly differently – which can be more than enough to throw off your page layout or even render fairly small text unreadable. Pixels, on the other hand, are fully consistent across different monitors and computers.

Next, you'll need to choose a font color. Studies have shown that the color combination that is easiest for human eyes is black text on a white background. Of course, this can get pretty dull and it may or may not work with your site's color palette. Often you'll need to compromise between design and legibility.

Try to avoid a lot of light text on dark background – it gets very difficult to read after awhile. If you feel you must use a dark background, then choose a font size that's a little bigger so that it's easier on the eyes. Bright colors like red, blue and yellow are best reserved for header text where you'll really want to draw the reader's eyes. In general, you'll want to stick to neutrals like black, white and gray for your site's body text.

RSS | Related Articles | Previous Features | Site Map

Add Choosing+the+Right+Font%2C+Part+Two to Twitter Add Choosing+the+Right+Font%2C+Part+Two to Facebook Add Choosing+the+Right+Font%2C+Part+Two to MySpace Add Choosing+the+Right+Font%2C+Part+Two to Del.icio.us Digg Choosing+the+Right+Font%2C+Part+Two Add Choosing+the+Right+Font%2C+Part+Two to Yahoo My Web Add Choosing+the+Right+Font%2C+Part+Two to Google Bookmarks Add Choosing+the+Right+Font%2C+Part+Two to Stumbleupon Add Choosing+the+Right+Font%2C+Part+Two to Reddit


Content copyright © 2009 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact Elizabeth Connick for details.

g


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor

g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter

jobs
what
job title, keywords
where
city, state or zip
jobs by job search


vote
Growing a Garden
Veggies and Flowers
Veggies Only
Flowers Only
No Garden

g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2009 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor