Search within TutorialsPark

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

4. Font-stack: Its a comma seperated list of fonts in the font-family property.
Eg: font-family: Arial, Verdana, Helvetica, sans-serif;


CSS : Generic Font Family

Generic Family Font-family Description
Sans-Serif Helvetica Sans-Serif fonts have uniform width and straight ends.
Serif Times New Roman. Serif fonts have extra details like hooks at ends and thick and thin strokes.
Cursive Comic Sans MS. Cursive fonts which appear like Caligraphy done with Hands
Monospaced Lucida Console. Monospaced Fonts have all characters of same width. Used mostly for Code examples.
Fantasy Papyrus Fancy looking fonts with no specific design pattern.

CSS Font Properties

CSS Font Property : Font-Family

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

font-family:

1. CSS property of font-family allows you to specify the typeface to be used for text content on the page.

2. Always begin you font-stack with the most prefered font, and the second most and so on. Fonts with a space in between names must be included within quotes. Eg: "Times New Roman"

3. Always end your font-stack with a generic font family, because if browser finds no match within fonts from your font-stack, it can make an intelligent decision to use the closest matching font.

Example: CSS Fonts - font-family

Give it a TRY! » Note:Font names are not case sensitive, hence "TIMES NEW ROMAN" and "times new roman" have the same meaning.

CSS Font Property: font-size

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

font-size:

The size of font can be set using the CSS property font-size, the value of which can be defined using any of the following method

Absolute-size keywords

1. It uses keywords to set the value of font-sizes, each keyword is associated with a index(scaling factor) which is used by browser to compute the font-size.

2. For all browsers the default size is medium which has the scaling index as "1"

Possible Values are:

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

absolute-size xx-small x-small small medium large x-large xx-large
Scaling Index 3/5 3/4 8/9 1 6/5 3/2 2/1
Heading h6 h5 h4 h3 h2 h1

Example: CSS Font Size - Absolute Sizes with Keywords

Give it a TRY! »


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..

2. Here,

small-caps : Converts the lowercase text to uppercase , but slightly smaller in size.

normal : Removes all inherited font-variant values and renders text normally.

Example: CSS Font Property font-variant

Give it a TRY! » Note: Notice that, with small-caps the all characters are in uppercase, but the first character is slightly bigger in size.


CSS Font Property: line-height

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

line-height:

1. CSS Font Property line-height enables you to control the vertical spacing between the line of text.

2. line-height can be set in percentages, length or numbers. But negative values are not allowed.

3. The best way is to use no unit of measurements, and just declare values as numbers. Eg: line-height: 1.5;

Example: CSS Font Property line-height

Give it a TRY! » Note: The default value for line-height is 1.5 spaces. It is used make the text blocks more legible.


CSS Font Shorthands

1. CSS allows you to compress several declaration into one.However the order must be remembered correctly or else declarations won't be applied.

font-style(optional)

font-variant(optional)

font-weight(optional)

font-size

line-height(optional)

line-family

2. The first three properties are optional and can be put in any order, but the remaining must follow the order.

3. Also a forward slash(" / ") must be used to separate font-size and line-height

Example: CSS Font Shorthands

Give it a TRY! » Note: The font-family cannot be used as substitute for font. !very Important