Webopedia on Google+Webopedia on TwitterWebopedia on FacebookTech Bytes Blog
Main » Did You Know » Hardware & Software »

How To Match Fonts With Personality? Part 2: Font Basics

(Go back to Page 1)

Ideally, you should limit your font choices to the Core Web Fonts so that your visitors will see your site as you designed it to look. If you use a graphic Web editor such as Dreamweaver, for example, the program may offer a series of font alternatives when you are specifying fonts. So, for example, in Dreamweaver you can choose a font declaration like: 'Verdana, Arial, Helvetica, sans-serif.' This tells the browser to use Verdana if it is installed, if not, use Arial, if that isn't available use Helvetica and if none of these fonts are on the system to use its default sans-serif font.

So, one way or another, your visitor will see the page displayed in a sans-serif font of some type. The font combinations that Dreamweaver uses take into account the fonts that are typically installed on a range of operating systems including Linux/Unix, Mac OS and Windows.

Font Family Basics

When deciding what fonts to use, there are some basic principles to follow that can help you create a clean and readable design. First, do not use more than three or four different types of fonts on a page, as it will be cluttered and hard to read. Mixing fonts is a good idea so your pages don't look flat, but don't make the common mistake of overdoing it. It's rare that use of more than three or four fonts in a design will work. You may want to use fonts from the same family, which means though they make look narrower or bolder, they still share the same basic design elements.

Second, stick to sans-serif fonts, which are those without hooks on the ends of letters. While good for print, serifs aren't a good match for the Web. When viewed on a computer screen, all those little tails blur together, so it's best to use sans-serif for your main copy. Some examples include Geneva, Helvetica and Arial.

Finally, when combining different types of fonts, try to use ones that have similar proportions. Look at their respective lowercase heights in some sample copy, and check that they are about the same, as are letters that descend below the line.

Fancy Fonts as Images

Don't' be discouraged, however, if you fall in love with a fancy font and want to use it, there is a way it can be done. If you really want to use a fancy font on your Web site, you need to find a way other than using plain text to display it.

The simplest option is to create the font element as a picture using your graphics software. To do this, launch a program such as Photoshop and create a new image. Type the text using the desired font into the image and color and format it as desired. Crop and save the image as either a JPEG or GIF format image and use that on your Web page in place of plain text.

While this solution adds a layer of complexity to your Web page and increases the page size and the subsequent download speed — images are much larger than plain text — it lets you use fancy fonts in a way that ensures that all viewers, who have image display enabled in their browsers, will see your page and the font as you planned it to appear.

 
You can use fancy fonts on your Web site if you create the font element as an image. Click to view larger image.

(Go back to Page 1).

Article courtesy of Ecommerce-Guide.com.

Key Terms To Understanding  Fonts:

Related Articles on Webopedia:




Helen Bradley is a respected international journalist writing regularly for small business and computer publications in the USA, Canada, South Africa, UK and Australia. You can learn more about her at her Web site, HelenBradley.com.




';
TECH RESOURCES FROM OUR PARTNERS
QUICK REFERENCE
How to Create a Desktop Shortcut to a Website

Creating desktop shortcuts to a websites is useful. When you double-click the icon from your desktop it automatically launches the browser and... Read More »

Flash Data Storage Vendor Trends

Although it is almost impossible to keep up with the pace of ongoing product releases, here are three recent highlights in the flash data storage... Read More »

15 Important Big Data Facts for IT Professionals

Keeping track of big data trends, research and statistics gives IT professionals  a solid foundation to plan big data projects. Here are 15... Read More »

DID YOU KNOW?
Hype Versus Action in the Developer's World

Often times technologies start as hype but with time become adopted. As a developer or technologist, it is worth reading the hype and knowing the... Read More »

Microsoft Hyper-V Network Virtualization Q&A

The top 5 Hyper-V questions with answers provided by Nirmal Sharma, a MCSEx3, MCITP and Microsoft MVP in Directory Services. Read More »

Storage Trends: Solid State and Software Defined

Solid state drives and software defined storage are two leading trends in the rapidly growing storage market.  Read More »