CSS Font Properties

css font
CSS Font

CSS can change Font Properties of HTML text elements, like font size, line height, font family, font weight, font style, font stretch, font variant, Font Family etc. Using fonts properties, we can change look of any html text element. In this article, we will learn all CSS Font Properties one by one.

CSS Font Properties List

  1. Font Size
  2. Line Height
  3. Font Weight
  4. Font Style
  5. Font Variant
  6. Font Stretch
  7. Font Family
  8. Font Property

Font Size

Font size property in css can change the font size of fonts. By default, all html elements are having their own font size set by useragent (browser).

Default Font size of root element html is 16px, p tag is 1em and h1 tag is 2em.

The popular units for CSS fonts size are em and px. The Top 5 font-size font-size units are.

Font Size values in CSS

  • Pixels (px) → As per height of screen pixals
  • Em(em) → Relative to nearest parent.
  • Points (pt) → Fixed unit n points
  • percentage (%) → Relative to parent element.
  • rem (rem) → relative to root parent ( HTML Tag)

Others units are pc (picas), cm (centimeters), mm (millimeters) and in (inches).

"em", "rem", and "%" are relative units, whereas px and pt are fixed.

em is relative to parent element, but rem is relative to html element only.

If Font Size of body or parent element is 100% or 16px the font size of p tag will be

16px = 1em =100% =12pt = 1 rem.

em Vs px vs rem


Font size 16px

Font size 1 em

Font size 100%

Font size 12pt

Font size 1rem


<div style="font-size:16px">
    <p style="font-size:16px">Font size 16px </p>
    <p style="font-size:1em">Font size 1em </p>
    <p style="font-size:100%">Font size 100% </p>
    <p style="font-size:12pt">Font size 12pt </p>
    <p style="font-size:1rem">Font size 1rem </p>
</div>    		    
		    
		

If font-size of parent element is more than 100% or 16px, em and % will change, but px, pt and rem remains same.


Absolute Font Size

Font Size can have absolute size values. There are total 8 absolute size values in css between small to large.

xx-small

x-small

small

medium

large

x-large

xx-large

xxx-large


    <p style="font-size:xx-small">xx-small</p>    
    <p style="font-size:x-small">x-small</p>    
    <p style="font-size:small">small</p>    
    <p style="font-size:medium">medium</p>    
    <p style="font-size:large">large</p>    
    <p style="font-size:x-large">x-large</p>    
    <p style="font-size:xx-large">xx-large</p>    
    <p style="font-size:xxx-large">xxx-large</p>    

Relative Font Size

Font Size can have relative size values. There are 2 relative size values in css, smaller and larger.

smaller

larger


    <p style="font-size:smaller">smaller</p>
    <p style="font-size:larger">larger</p>


Line-Height

Css Line-height property defines the actual height of a line. The default line height of all html elements is normal. Other line height units are px and number.

Line-height in px is fixed, whereas n is relative to font-size. 1 means 100% of font-size, 2 means 200% of font-size.

For n number of lines, the line-height is equal to total height divided by no of lines.

Line Height Normal

Line Height 1

Line Height 2

Line Height 16px

Line Height 20px

Line Height 24px

Line Height 30px


    <div>
        <p style="line-height:normal">Line Height normal </p>
        <p style="line-height:1">Line Height 1 </p>
        <p style="line-height:2">Line Height 2 </p>
        <p style="line-height:16px">Line Height 16px </p>
        <p style="line-height:20px">Line Height 20px </p>
        <p style="line-height:24px">Line Height 24px </p>
        <p style="line-height:30px">Line Height 30px </p>
    </div>    		    
		    
		

Always prefer line height in numbers as numbers are relative. Line height is pixel is fixed.


Font Weight

In CSS, Font weight is used to give Bold or Bolder appearance to font. Various value of font-weight are

Font Weight values

  • Lighter
  • Normal
  • Bold
  • Bolder

Font Weight value in number

  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900

Number of Font Weights for any fonts can very. For example, serif supports 2, sans-serif supports 3, 'helvetica neue' supports 5.

Font weight lighter


Font weight normal


Font weight bold


Font weight bolder


Font weight 100


Font weight 400


Font weight 500


Font weight 700


Font weight 900



<p style="font-weight:lighter"> Font weight lighter </p>
<p style="font-weight:normal"> Font weight normal </p>
<p style="font-weight:bold"> Font weight bold </p>
<p style="font-weight:bolder"> Font weight bolder </p>
<p style="font-weight:100"> Font weight 100 </p>
<p style="font-weight:400"> Font weight 400 </p>
<p style="font-weight:500"> Font weight 500 </p>
<p style="font-weight:700"> Font weight 700 </p>
<p style="font-weight:900"> Font weight 900 </p>

Font Style

In CSS, Font style is used to gives italics appearance. Various value of font-style are

  • Italic
  • Normal
  • Oblique

Font style Normal


Font style Italic


Font style Oblique



<p style="font-style:normal"> Font style Normal </p>
<p style="font-style:italic"> Font style Italic </p>
<p style="font-style:oblique"> Font style Oblique </p>

Font Variant

CSS Font variant is used to set variant of font we are using. Font variant small caps set all text in smaller size and all capitals. Various values of font variant are

  • Normal
  • Small-caps

Font variant normal.


Font variant small caps.



<p style="font-variant:normal"> Font style normal </p>
<p style="font-variant:small-caps"> Font style small caps. </p>

Font Stretch

CSS Font stretch is used to stretch the font if available. Like we can set condensed, expanded, extra condensed or extra condensed values of font stretch.

Various values for font stretch are
  • normal
  • condensed
  • semi-condensed
  • ultra-condensed
  • extra-condensed
  • expanded
  • semi-expanded
  • ultra-expanded
  • extra-expanded

Font stretch normal.


Font stretch condensed.

Font stretch semi condensed.

Font stretch extra condensed.

Font stretch ultra condensed.


Font stretch expanded.

Font stretch semi expanded.

Font stretch extra expanded.

Font stretch ultra expanded.


<p style="font-stretch:normal"> Font stretch normal </p>
<p style="font-stretch:condensed"> Font stretch condensed </p>
<p style="font-stretch:semicondensed"> Font stretch semi condensed </p>
<p style="font-stretch:extra-condensed"> Font stretch extra condensed </p>
<p style="font-stretch:ultra-condensed"> Font stretch ultra condensed </p>
<p style="font-stretch:expanded"> Font stretch expanded </p>
<p style="font-stretch:semi-expanded"> Font stretch semi expanded </p>
<p style="font-stretch:ultra-expanded"> Font stretch extra expanded </p>
<p style="font-stretch:extra-expanded"> Font stretch ultra expanded </p>


Font Family

In CSS, Font family specify the Font Typeface or Font Family we are using. These fonts are already embedded in our operating system. But in CSS3, we can embedded external fonts too.

Web Safe Fonts

Web Safe fonts are fonts mainly used for websites. These fonts are available across all Operating Systems.

Sans Serif

Sans Serif and family fonts are best for screens. They can be used on websites, softwares, mobile apps, etc.

  • Sans-Serif
  • Arial
  • Helvetica
  • Helvetica Neue
  • Calibri
  • Gill Sans
  • Impact
  • Tahoma
  • Trebuchet MS
  • Verdana

Serif

Serif and family fonts are best for print. They are best suitable for css print media and print media.

  • Serif
  • Times new roman
  • Times
  • Georgia

Other Web Fonts

These fonts may not or may be available in all operating systems.

  • Courier
  • Comic Sans
  • Open Sans
  • Monospace
  • Cursive
  • Fantasy
  • Algerian

We can also use two different fonts together in a group. This tell the browser that if one font is unavailable, use another one.

Font Family on Browsers

Font family Arial

Font family Helvetica neue

Font family Helvetica

Font family Sans-Serif

Font family Roman

Font family Georgia

Font family Serif


<p style="font-family:arial"> Font family Arial  </p>
<p style="font-family:helvetica"> Font family Helvetica </p>
<p style="font-family:sans-serif"> Font family sans-serif </p>
<p style="font-family:"Times New Roman""> Font family Roman </p>
<p style="font-family:georgia"> Font family Georgia </p>
<p style="font-family:serif"> Font family Serif </p>

Font Stack

When one fond is missing in a particular OS, we can use a substitution font. This is called font Stack. Like sans-serif can be used with arial and helvetica and times can used with times new roman.

Font family Arial, Helvetica and sans serif in group

Font family Times, times new roman and serif in combination.


<p style="font-family: helvetica, arial, sans-serif"> Font family  Helvetica,  Arial and sans serif in combination. </p>
    
<p style="font-family:times, 'times new roman', serif"> Font family Times, times new romm=an and serif in combination. </p>    

Font Shorthand

CSS Font Property is used to group all font properties in one single property. Properties like font size and font family are compulsory to add, rest all are optional. Line height must come after font-size separated by slash (/).

css font
CSS Font Property

Font with size 16px, line height normal and arial font.

Font with size 14px, line height 18px and arial font.

Font with size 14px, line height 1.4, bold and Cursive font.

Font with size 18px, line height 1.4, bold, italic, small caps, condensed and arial font.


<style>  
    .p1{ font:16px arial; }
    .p2{ font:14px/16px arial; }
    .p3{ font:bold 18px/1.4 cursive; }
    .p4{ font:small-caps condensed bold italic 18px/1.4 sans-serif; }
</style>            

<p class="p1"> Font with size 16px, line height 18px and arial font.</p>

<p class="p2"> Font with size 14px, line height 18px and arial font.</p>

<p class="p3"> Font with size 18px, line height 1.4, bold  and Cursive font.</p>

<p class="4"> Font with size 18px, line height 1.4, bold, italic, small caps, condensed and arial font.</p>