Behind every good website the main reason of its success is the effective use of typography and fonts. That helps in provision of good readability of content that is delivered through website.If you are a developer or designer the Fonts play a vital role as it helps in clearly delivering the message to the end user.This article provides the quick guide for CSS and CSS3 mostly employed Font properties and styles.
CSS font properties define the font family, boldness, size, and the style of a text. In CSS, there are basically two types of font family names:
- A Generic family is a group of font families with a similar look and feel (like Serif or Monospace fonts)
- font family is a specific font family (like Times New Roman or Arial).
Generic Font Family
Lets have a quick look at the basic differences in the Serif,Sans-Serif and monospace fonts.
Serif:- Serif fonts have small lines at the ends on some characters. examples are Times New Roman, Georgia.
Sans-serif:- “Sans” means without – these fonts do not have the lines at the ends of characters. Examples are Arial , Verdana
Monospace:- All mono space characters have the same width. Examples are Courier New ,Lucida Console
Info: On computer display terminals, sans-serif fonts are considered easier to read than serif fonts.
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a fallback or backup system. so that if the browser does not support the font specified in first position, it tries the next font.
It is always good practice to start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
If the name of a font family is more than one word, it must be in quotation marks, like: “Times New Roman”. More than one font family is specified in a comma-separated list. You can have a look at the example to see this in implemented detail.
Font Style
The font-style property is mostly used to specify italic text.This property has three values:
- normal – The text is shown normally
- italic – The text is shown in italics
- oblique – The text is “leaning” (oblique is very similar to italic, but less supported)
Font Size
The font-size property sets the size of the text. For a web designer being able to manage the text size is important in web design heuristics. However, care should be taken not to use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Info: The font-size value can be either an absolute or relative size.
Absolute size:
- It sets the text to a specified size.
- It does not allow a user to change the text size in all browsers (bad for accessibility reasons)
- The absolute size is useful when the physical size of the output is known.
Relative size:
- It sets the size relative to surrounding elements.
- It Allows a user to change the text size in browsers.
Tip: If you do not specify a font size, the default size for normal text is 16px (16px=1em).
Font Size and Em
In order to avoid the resizing problem with older versions of Internet Explorer (IE), a lot of developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
Info: 1em = 16 pixels
CSS Usage Example
p{
font-family:"Times New Roman", Times, serif;
font-size:14px;/*font Size in Pixels */
}
p.normal{ normal;
}
h2 {
font-size:1.875em; /* 30px/16=1.875em */
}
CSS3 Web Fonts
CSS3 Web fonts allow Web designers to use fonts that are not installed on the user’s computer. When user have found/bought the font he wishes to use, then to use it , just include the font file on website’s web server, and it will be automatically downloaded to the user who is browsing the website when needed. Custom based own fonts are defined within the CSS3 @font-face rule.
CSS3 @font-face Usage Example
@font-face {
font-family: mycustomFont;
src:url(webfontname.WOFF );
font-weight: bold;
}
div {
font-family: mycustomFont;
}