Web 2.0 Typography for the Element of Design
When developing your site you want to decide what font you are going to use before you start designing your layout. Each font will render differently, depending on your operating system and your web browser. You web typography will have a different effect on each area of your site. There are a few things to be aware of when deciding which font to use. There are a hand full of fonts are the safe typography for development.
Sans-Serif Font and Serif Fonts
With typography there are two board categories of fonts. One is sans-serif and the other is serif fonts. A sans-serif font is the most common used. Arial and Verdana on a Windows operating System and Helvetica for a Mac operating system. Sans-serif fonts are similar, but they have small flat spots on the bottom of their text. These small flat spots have a nick name of feet. Some serif fonts are Times New Roman and is the most popular serif font that developers use. The best way to determine if your font is serif font or a sans-serif font is to look at the bottom of the text for their feet.
Serif fonts have small feet at the ends of their text.
Sans-Serif font has a clean cut off at the bottom.
Windows Fonts, Linux Fonts and Mac Fonts
Each operating systems has their own section of fonts. Out of all the popular operating systems, most of them have a variety of the same fonts. But there are a lot of windows fonts that aren't supported by the other operating systems. For example Windows Vista has added some different fonts to its operating system that isn't supported by others. This means in choosing a font can determine how your site is rendered. Choosing a font that isn't support by the operating system, will force the operating system to choose one. This can result your design to crash, change your layout and just not look correct. Choosing a font that is supported by all operating systems will keep you design safe from rendering incorrectly.
Web Safe Fonts
These typography fonts have been common to all versions of Windows, Linux and Macs
- Andale Mono
- Arial
- Arial Black
- Century Gothic
- Comic Sans MS
- Courier New
- Helvetica
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Chooseing your Web Typography Size and Weight
When chooseing your font-family you need to find a good size and weight. Make sure that you font size is readable on all operating systems and browser. Font size can differ between the different operating systems. A font size of 12pt on a Windows operating system is smaller than a font size of 12pt on a Mac operating system.
Font weight is also important when adjusting font sizes. When choosing a bold font weight, size can change how much bold effects your font. A small font size will not take the bold attribute as much as the larger the font size. The larger the font, the bigger the bold. This can cause a change of your focus point and design.
CSS Tip
When choosing your font-family for your site code the proper font-family css attribute to control want fonts you want. This css font-family attribute will tell the site to use the first font listed first, the second font listed second and so on. If the computer can't find the fonts listed it will then choose to use a sans-serif or serif font.
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
}
Web 2.0 Typography can be Fun!
There might be fonts on your developing computer that you might love. But it might not be the best choice to use for your site. Play around and be creative with your web typography. Just keep in mind what your users will be viewing. Windows in the majority of the market, but you never what to turn away a visitor or a customer. If their computer can’t find the font, it will be the computer's choice by default. This could change the whole outlook of your page. You can check your typography and design with different browsers and operating systems at:
BrowsersShots.org
Related Design Articles
