CSS3 References

CSS Fonts

Introduction and applications of CSS Fonts to improve the appearance of text

CSS Typography

CSS: Serif vs Sans-Serif

Serif : For Serif fonts there exists some extra details
on the ends of the main strokes of the letters,
these detail strokes are called as serif .On printed paper, serif fonts is considered easy to read.

Sans-Serif : For Sans-Serif fonts the width of strokes is uniform and has straight ends,
hence a much cleaner look.On Screen, Sans-serif fonts are cleaner to read.

CSS : Font-Stack

For ease of Classification, fonts are broadly classified as :

Generic Family: Its a group of font-family that have a similar appearance. Eg: Serif, Sans-Serif, Monospace

Font Family: Its a group of a series of fonts that have a similar appearance. Eg: Times , Verdana, Arial

Font : Its a specfic version of font from a given font-family. Eg: Arial, Arial Black, Arial Italic.

1. For your Website visitor to see the contents in the same font as you have set,
they must have the same fonts installed on their Devices as well.

2. The fonts installed on the Device depends upon the Operating Systems as well as other programs on it.

3. Hence a safe strategy is to define a list of fonts as alternatives, also called as a font-stack

Example: CSS Font Size - Absolute Sizes with Keywords

Relative-size keywords

A person should not be too honest. Straight trees are cut first and honest people are screwed first.
-chanakya

font-size:

Relative font are of just two types:

larger : Increases the font-size relative to that of parent element.

smaller : Decreases the font-size realtive to that of parent element.

Eg: If the font-size of parent element is medium and font-size value for current element is smaller,
then the current element's font-size is changed to "small"

Example:CSS Relative Font Size with Keywords

Give it a TRY! » Note: The :hover and :active are called as dynamic pseudo classes, as they are functional only on user interaction.

Font-Sizes: Using Pixels("px")

A person should not be too honest. Straight trees are cut first and honest people are screwed first.
-chanakya

font-size:

1. The most easy way to set font-sizes is using pixels("px"),
the sizes are completely independent of all browser settings.

2. The great thing about pixel values is that the text-sizes remain consistent
across all devices(Computers, tablets, phones) and browsers.

Eg: If you set "font-size: 20px", the text will be displayed as 20px tall, clean and simple. here, 1px is 1/96th of an inch.

Example: CSS Font-size using Pixels("px")

Give it a TRY! » Note:Apple retina display has huge pixel density,
it multiplies the pixel size by a factor of "2" to utilize the high pixel density.i.e 10px to 20px.

CSS Font-Size using Percent(" % ")

A person should not be too honest. Straight trees are cut first and honest people are screwed first.
-chanakya

font-size:

1. To set the font-size of an element relative to that inherited from its ancestors or parent element use percentages("%").

2. The standard base text size for all browsers is " 16px " i.e " 100 % " , so all sizes are relative to this.
Say if you wish to set the size of text as half of this i.e " 8px " then the equivalent value in percentages is "50 %" .

3. Since the font-sizes are inherited from parents or ancestors,
text could enlarge or shrink depending from the current size(in %) and inherited font-size. Also called as
Multiplier Effect

4. Eg: If font-size for parent element is " 50% " or(" 8px ") and that of child element is also " 50% ",
then the effective font-size of child element is " 4px " (50% of 8px = 4px).

Example: CSS Font-Sizes using Percent(%)

Give it a TRY! » Note:If you want you text to have font-size adaptive to its surroundings, then use percent units.

CSS Font-Sizes in Ems

A person should not be too honest. Straight trees are cut first and honest people are screwed first.
-chanakya

font-size:

1. For the sake of theory, in Typography the word " em " refers to the size of
capital M letter for a particular font.
But in CSS the meaning is not the same as in Typography.

2. In CSS, font-size of "1em" is same as "100%" , and font-size of "0.5em " is same as "50%", and the reverse is true as well.

3. And all thats true for Percentages is true for "Em" as well i.e Inheritance and Multiplier Effect

4. A new feature with CSS3 is "rem" called "Root Em", its similar to em but font-size is relative to that of root element(usually <body>),
removing all inheritance and multiplicative effects.

Example:CSS Font-Size in "em" and "rem"

Give it a TRY! » Note: The utility of " rem " is to avoid the child element to inherit font-sizes from parent element.And
set length only relative to the root element.

CSS Font Property: font-weight

Take up one idea. Make that one idea your life - think of it,
dream of it, live on that idea.
Let the brain, muscles, nerves, every part of your body,
be full of that idea, and just leave every other idea alone.
This is the way to success. - Swami Vivekananda

font-weight:

1. The level of boldness of the text can be set using the CSS property font-weight

2. The font-weight makes the text appear as normal or bold.

Example: CSS Property font-weight

Give it a TRY! » Note: The boldness is assigned relative to the font-weight of parent element, it can be used to add emphasis to text.

CSS Font Property : font-style

A person should not be too honest. Straight trees are cut first and honest people are screwed first.
-chanakya

font-style:

To render the text in italic use CSS property font-style.

It can assume three value.

"italic" : Renders text in italic style

"normal" : Removes the Italic style

"oblique" : Applies the oblique version of the font,
if it exists, or else the italic version of font is applied.

Example: CSS Pseudo Class font-style

Give it a TRY! » Note: Most Browsers make no distintion between italic and oblique designs.

CSS Font Property : font-variant

A person should not be too honest. Straight trees are cut first and honest people are screwed first.
-chanakya

font-variant:

1. CSS font-variant enables you to display the text in uppercase or lowercase fonts..