CSS Fonts | all about css font and styling – codewithrandom







CSS Fonts | all about css font and styling – codewithrandom

CSS Fonts define the font family, size, style, weight or boldness and variant of a text.

CSS Font Family

There are two types of font family names in CSS:


<generic-name>: a group of font families which have similar looks e.g. Sans-serif, Monospace

<family-name>: a specific font family name e.g. Lucida Console, Verdana

Here is a table of the most common generic font names with some of their specific font family names.

<generic-name> <family-name>
serif “Times New Roman”, Georgia, Lucida Bright, Lucida Fax, Palatino, “Palatino Linotype”, Palladio, “URW Palladio”
sans-serif  Arial, Verdana, “Open Sans”, “Fira Sans”, “Lucida Sans”, “Lucida Sans Unicode”, “Trebuchet MS”, “Liberation Sans”, “Nimbus Sans L”
monospace “Courier New”, “Fira Mono”, “DejaVu Sans Mono”, Menlo, Consolas, “Liberation Mono”, Monaco, “Lucida Console”
cursive “Brush Script MT”, “Brush Script Std”, “Lucida Calligraphy”, “Lucida Handwriting”, “Apple Chancery”
fantasy Papyrus, Herculanum, Party LET, Curlz MT, Harrington

Note: It is recommended to enquote font family names with multiple words e.g. “Lucida Console” (double quotes), ‘Liberation Mono’ (single quotes).

The font-family CSS property specifies a list of prioritized font families.

Each font family name or generic names should be separated by a comma “,“.

Having multiple font family names specified lets the browser select an acceptable fallback font when necessary.

The browser will then pick a font to use from the specified list starting from first to last specified.

If the browser does not support the first font, it will try the second font and so on.

 p {  
font-family: Arial, Verdana, sans-serif;
}

CSS Font Size

The font-size CSS property sets the size of a font.

Valid Values:

  • xx-small, x-small, small, medium, large, x-large, xx-large: absolute-size keywords
  • smaller, larger: relative-size keywords the font would either be smaller or larger than its parent element
  • <length>: px and em are the most common and recommended
  • <percentage>: relative to the font size of the parent element

Example:

Click the ‘Play It Yourself’ button below to play with all the keyword values.

 p {  
font-size: medium;
}

Setting Font Size in Pixels

A px value is a good choice and recommended esp. if we need pixels accuracy.

A px value is static.

 p {  
font-size: 32px;
}

Setting Font Size in Ems

Setting font size with the em value is highly recommended. It allows the user to resize text in the browser’s settings.

An em value is dynamic. It uses the browser’s default font size which is 16px so 1em = 16px.

To convert px to em , use this formula: em = pixels/16

 #p1 {  
font-size: 1em;
}
#p2 {
font-size: 2em;
}


CSS Font Style

The font-style CSS property sets how a font should be styled.

Valid Values:

  • normal: sets the font to its normal style
  • italic: italicizes a font
  • oblique: selects the font style classified as oblique
 #p1 {  
font-style: normal;
}
#p2 {
font-style: italic;
}
#p3 {
font-style: oblique;
}

CSS Font Weight

The font-weight CSS property sets the weight or boldness of a font.

Valid Values:

  • <number>: a number from 1 to 1000
  • normal: sets a font to its normal weight; same as 400
  • bold: emboldens a font; same as 700
  • lighter: sets the font weight to be lighter than its parent element’s available font weights
  • bolder: sets the font weight to be heavier than its parent element’s available font weights
 #p1 {  
font-weight: normal;
}
#p2 {
font-weight: bold;
}
#p3 {
font-weight: lighter;
}
#p4 {
font-weight: bolder;
}
#p5 {
font-weight: 1000;
}

CSS Font Variant

The font-variant CSS property sets whether a text should be displayed normally or in small-caps.

Valid Values:

  • normal: specifies a normal font face
  • small-caps: lowercase letters are converted to uppercase; converted uppercase letters appears in a smaller font size
 #p1 {  
font-weight: normal;
}
#p2 {
font-weight: bold;
}
#p3 {
font-weight: lighter;
}
#p4 {
font-weight: bolder;
}
#p5 {
font-weight: 1000;
}

Check out more…..

Share on:

Leave a Comment