Web fonts basics - how to use fonts more effectively on your website.

Web Fonts

HomeBuildingPromotionIncomeAdvancedToolsResources

Web fonts have a great subconscious effect on the impression your site gives to visitors. Is it formal or casual? Modern or traditional? Serious or friendly? Warm or cool? These feelings can be conveyed instantly, even if the visitors may never consciously notice the Web fonts used on your site.

You can specify any font installed on your computer, but if you stray from using the standard fonts that everyone has installed on their computers, the viewer won't see your fonts as intended.

Basic "safe" Web fonts

Times New Roman
Times New Roman is a Windows serif font that looks like something you'd see in a newspaper or magazine. It's specially hinted for easier reading on-screen, but Microsoft's free font Georgia is really a better typeface for the screen.
Mac users can download it for free...
  Download Times New Roman for Mac [466 KB]

Times
Times is a Mac serif font. It's similar to Times New Roman, but it isn't as carefully designed for on-screen viewing.

Georgia
Georgia is a Microsoft's serif face. It's much easier to read on screen than other serif Web fonts because it was designed for the screen.
Georgia has excellent italics that are easy to read and attractive.
You can download Georgia for free...
  Download Georgia for Mac [347 KB]
  Download Georgia for Windows [383 KB]

Arial
Arial is a Windows sans serif font that has a streamlined, more modern look, but isn't easy to read on screen because it's narrow and can look very light in smaller sizes.

Helvetica
Helvetica is a Mac sans serif font similar to Arial.

Verdana
Verdana is an extremely easy-to-read sans serif font that's included with the Internet Explorer.
Mac users can download it for free...
  Download Verdana for Mac [293 KB]

Tahoma
Tahoma comes with Microsoft Office and is almost identical to Verdana.
Mac users can download it for free...
  Download Tahoma for Mac [215 KB]

Comic Sans MS
Comic Sans MS is a sans serif font that's included with the Internet Explorer. It's informal and friendly, which is great for some websites, but not professional enough for others.
You can download it for free...
  Download Comic Sans MS for Mac [179 KB]
  Download Comic Sans MS for Windows [240 KB]

You can use bold or italic to emphasize some text, but keep in mind that italic type looks better for serif fonts, while bold type looks better for sans serif fonts (sans serif means without serifs - the little doohickeys at the ends of each letter).

The <font> tag allows site designers to specify what font the browser should display...
<font size="value" color="#rrggbb" face="names">
The size attribute sets the font size. Valid values range from 1-7. The default font size is 3.
The color attribute sets the color for the text.
"#rrggbb" is a hexadecimal (base 16) red-green-blue triplet used to specify the color.
The fase attribute sets the typeface that will be used to display the text on the screen. It allows you to specify a list of Web fonts to use in case the visitor's computer doesn't have the first one.

Always list fonts by the easiest to read first. For serif faces, this should be...
<font face="Georgia,Times New Roman,Times,serif">

For sans serif faces, it should be...
<font face="Verdana,Arial,Helvetica,sans-serif">


Using <font> tags ties the presentation of your website with its content, making it hard to modify your site design. If you later decide to change the color scheme or Web fonts used in your site, you'll have to edit every page in order to do this.

Cascading Style Sheets (CSS) provide a solution to this problem. Instead of defining the site design in each and every page, you can use a style sheet to control the overall layout of the website. Then if you want to change your site design, you simply modify the style sheet.

For more information on CSS, see Advanced: Cascading Style Sheets (CSS).

Web fonts and graphics

Many sites use graphics to stray from the standard fonts. If graphics is used only for a few words at most, the files are small and download quickly.

Don't use graphics for an entire paragraph of text unless it's absolutely necessary for the style of your website. And make sure to include all the text in your Alt tag - you want to make sure people can read your text, even if they can't see your graphics. ALT text is also important because it can be indexed by search engines.

The best software for creating graphic text are vector-based programs such as CorelXara or the universal solution for Web graphics, Web page design and image editing...

Ulead PhotoImpact Corel PhotoImpact (formerly Ulead PhotoImpact)

It offers features usually found only in programs costing 5-8 times as much...

  • Edit images and create complete Web pages.
  • Full array of imaging and painting tools.
  • Vector 2-D and 3-D graphics.
  • Over 60 exclusive special effects and filters.
  • Visual Web page layout and one-click HTML output.

Its text creation tools allow you to easily create text for your graphics and give you options to fine-tune text spacing, kerning, and others. Unique type effects offer you the ability to twist and wrap words, skew them in an direction, create special 3D text, and animate them, so that your messages make a greater impact, whether as an animated GIF or as a still image.


To see a list of programs that you can use to create Web graphics, go to Resources: Graphics Editors.

Whatever program you use to turn some fonts into graphics, make sure they are anti-aliased. This makes the Web fonts appear smoother. Make sure to anti-alias them to the background color of your page, or it will have an unattractive "halo effect." For more information, see Web Graphics.


If you need help of professional website designers visit...

DesignCrowd
DesignCrowd is a marketplace for crowdsourced graphic design like custom logos, websites, flyers, business card design and more. Businesses launch a design project and receive on average 100+ designs in 5 days from 400,000 freelance designers and agencies worldwide. DesignCrowd offers over 40 design services including logo design, website design, app design, business cards, promo flyers, posters and more services to help entrepreneurs and small business grow their businesses.

99designs.com
99designs.com provides a useful service. It connects thousands of passionate designers with small businesses and individuals who need design projects completed. Simply post your design brief and multiple designers from around the globe will enter the contest by submitting different designs for you to choose from.

Logo Garden
LogoGarden.com is the simplest way to create a professional brand for any business. You can create a customized logo in just minutes, no design experience needed. Start building your professional brand by creating a free logo.

crowdSPRING
This is an online marketplace for graphic design. Entrepreneurs and businesses who need things designed - from logos and stationery to websites and brochures - simply post what they need and name their own price and deadline. Once posted, over 87,000 designers from 150+ countries around the world will submit actual designs - not bids or proposals - for the buyer to review until they find the "the one."


See also...

Web Design
General tips and links to useful Web design resources.

Web Page Design
How to make your pages logically organized and user-friendly.

Web Page Backgrounds
The basics, tricks, examples.

Website Navigation
Maps, navigation bars, frames, JavaScript, site search engines.

Solo Build It!

What's New

How to Create a Website
One-page guide for beginners.

 

Easy Website builders
Easy way to build a professional looking site for commercial use or just for fun.

 

Dedicated IP hosting
Benefits of using a static over shared IP address.

 

How to create a mobile version of your website

Sponsored links

Copyright © 2002-2023 BuildWebSite4u.com