Photoshop Templates

It’s about time that you learn how to apply fonts using CSS. We will specifically tackle the following:

• Font-family
• Font-style
• Font-variant
• Font-weight
• Font-size
• Font

Font-family

This property is used to set a prioritized list of fonts that you want to be used to display in a particular element or web page. With this property, in case the first font on the list is not installed on the computer a visitor is using to access your site, the succeeding fonts on the list will then be tried until an appropriate font works.

Two types of names can be used to categorize fonts: family-names and generic families.

Generic families are groups of family names with uniformed appearances. The three types of generic family are: serif, sans-serif and monospace. Family-names are what we generally called fonts.

Examples of font-families that belong to generic family “serif”: Times New Roman, Garamond, Georgia. If you notice the three fonts, there is one common characteristic that they share – having a base.

Notice they have sort of like support at the bottom or tip of each letters.

The generic family “sans-serif”, on the other hand has not base on each letters. Examples of sans-serif are: Trebuchet, Arial, Verdana. Observe each font-families and compare them to the generic family “serif”.

Clearly, you can see the difference now between the two generic families, one with a base and one without a base.

The third generic family is “monospace”. You can easily distinguish fonts under this type by observing the characters having a fixed width. Font-families under this type include: Courier, Courier New and Andele Mono.

In choosing fonts and listing them for your webpage, it is best that you put the best preferred font and then followed by alternative fonts. I would suggest that you specify fonts of the same generic family so that a font of the same family, say sans, will show if none of the specified fonts are available in the computer being used by the visitor.

Example of prioritized list of fonts:

In the given example, headers with the tag <h1> will use the “Arial” font. Now, if this font is not available on the visitor’s computer, the next font on the list will be used. If the next font on the list still doesn’t work, the next font will be tried and so on until something works. If you specified fonts that are of the same generic family, a font from the same generic family will be displayed on the header.

Font style

This property will define a specific font you have chosen to be in any of the following styles: normal, italic or oblique.

Example of font style syntax: font-style: italic

Font variant

This property let’s us choose the small caps style of the typeface. When you choose “small-caps”, the fonts will be displayed in smaller sized capitalized letters and not in lower case letters. However, if the font-variant is specified as small-caps but the variant is not available, the browser, in stead will automatically show the text in uppercase.

Font weight

This property allows you to choose the weight or boldness of the font. Fonts can either be normal or bold. To make a font bolder, you can choose numbers between 100 and 900 to describe how bold you want the font to be.

Font Size

This property lets you select the size of a font. You can choose from among the many different units which you want your font size to be displayed.

The fours units in the examples given have one key difference. “px” and “pt” make font sizes absolute. The “%” and “em” units allows the adjustments of font size the way you want them to display. As courtesy to everyone, especially to those who have poor vision like the senior citizens, you should make your website accessible by adjusting the font size using the units “%” and “em”.

Adjusting font sizes of any page in most browsers is possible. Like in Mozilla Firefox, you can adjust the font size to become either larger of smaller by going to “view” located at the taskbar. A menu will pop out, the go to “increase text size” or “decrease size”. You can also just key in “ctrl++” or “ctrl+-“. For Internet Explorer users, you can adjust the font size by going to “view” then look for “text size”, click on it and a menu will appear giving you the following options: largest, larger, medium, smaller, smallest.

Compiling

The “font” property makes it possible to cover many different properties in one single property.

Now, using the “font” property, you can just incorporate everything in one single line.

You should follow this order to do this.

font-style | font-variant | font-weight | font-size | font-family

After learning all that we have discussed, you probably know by now that with CSS, you can simply just change font information or description in no time. CSS allows easy editing if you want to change the font in your entire website. You won’t have to type many codes because with CSS, you can just simply the commands and your desired style will be coded.