In CSS, font properties determine family font, density, size and style for text.

Font Family in CSS

In CSS there are two types of names of family fonts:

1. generic family - font family group with similar appearance (eg serif or monospace)
2. font family - certain family font groups (eg Times New Roman or Arial)

Generic family Font family Description Serif

Times News Roman

Georgia

Font serif has the last small tiles of some Sans-serif characters

Arial

Verdana

'Sans' means 'no', this font does not have a Monospace character (uniquely)

Courier New

Lucida Console

Single-character characters have the same width

Serif is the footer of the word, the sans-serif font is a font without a foot.

The difference between serif and sans-serif fonts

Font family

The family font of a piece of text is defined by the font-family. This feature should have several font styles to reserve. If the browser does not support this font, it will try the following font and so on.

Select the font you want first and end with a font belonging to the generic family group so that the browser selects the same font in this group if there are no other fonts available. Fonts separated by commas.

Note: If the family font name has more than one word, it must be placed in quotation marks.

 p { 
 font-family: "Times New Roman", Times, serif; 
 } 

Font style

The font-style feature is often used to define italic text; it has three values:

1. normal - normal text
2. italic - italics
3. oblique - italic text in italic but less supported

 p.normal { 
  font-style: normal; 
 } 
 
 p.italic { 
  font-style: italic; 
 } 
 
 p.oblique { 
  font-style: oblique; 
 } 

Font size

font-size properties used to specify text size. Control of text size is very important in web design. However, the text size should not be used to make text that looks like a title or title look like a piece of text.

Always use appropriate HTML tags, like

 

next

 

for good titles

for text paragraphs. Text size values ​​can be absolute or relative.

Absolute size

1. Select a specific size for the text
2. Do not allow users to change the text size on all browsers (not good for readers' accessibility)
3. Useful when it comes to specifying the physical size of the output

Relative size

1. Set the text size relative to the surrounding elements
2. Allow users to change the text size on the browser

Note : If you do not specify the font size, the default default size of the text (paragraph) is 16px (16px = 1em).

Set font size in pixels

Select the text size in pixels for you to have full control over the text size.

 h1 { 
  font-size: 40px; 
 } 
 
 h2 { 
  font-size: 30px; 
 } 
 
 p { 
  font-size: 14px; 
 } 

Note: If using pixels, you can still use the zoom in / out tool to resize the whole page.

Set font size by em

To allow users to change text (on the Browser Menu), many developers use me instead of pixels. I am also a unit encouraged by W3C.

1em is equivalent to the current font size. The default text on the browser of the text is 16px. So the default size of 1em is 16px. To convert from pixel to em using the formula: pixel / 16 = you.

 h1 { 
  font-size: 2.5em; /* 40px/16=2.5em */ 
 } 
 
 h2 { 
  font-size: 1.875em; /* 30px/16=1.875em */ 
 } 
 
 p { 
  font-size: 0.875em; /* 14px/16=0.875em */ 
 } 

In the above example, the text size is equal to the previous pixel usage example but for me it is possible to change the text size in all browsers. However, on older versions of IE there is still a problem, when the text is enlarged it will look bigger than the correct size, similarly when scaled it will be smaller than the actual level.

Use a combination of percent and me

The solution that works for all browsers is to set the default text size as a percentage of the element .

 body { 
  font-size: 100%; 
 } 
 
 h1 { 
  font-size: 2.5em; 
 } 
 
 h2 { 
  font-size: 1.875em; 
 } 
 
 p { 
  font-size: 0.875em; 
 } 

Weight font

The font-weight is used to specify normal or bold text.

 p.normal { 
  font-weight: normal; 
 } 
 
 p.thick { 
  font-weight: bold; 
 } 

Text size with feedback

Text size can be set in units of vw, ie viewport width. Then the text size will follow the browser window size.

Hello

Note: Viewport is the browser window size. 1vw - 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Variant font

The font-variant determines whether the text is displayed in small-caps. In small-caps, lowercase letters are converted to uppercase but smaller in size than regular capital letters.

 p.normal { 
  font-variant: normal; 
 } 
 
 p.small { 
  font-variant: small-caps; 
 } 

Previous article: Text in CSS

The following article: Icon in CSS