CSS Fonts

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

em Vs px vs rem

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

Absolute Font Size

Font Size can have absolute size values. There are total 8 absolute size values in css between small to 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.

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

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 which is ration of line height and font size.

Line-height in px is fixed, whereas in numbers 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.

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

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

Font Weight value in number

• 100 or thin
• 200 or extralight
• 300 or light
• 400 or regular
• 500 or medium
• 600 or semibold
• 700 or bold
• 800 or extrabold
• 900 or black

Change Font Weight

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

• Italic
• Normal

<p style="font-style:normal"> Font style Normal </p>

<p style="font-style:italic"> Font style Italic </p>

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

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

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

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.

• normal
• condensed
• semi-condensed
• ultra-condensed
• extra-condensed
• expanded
• semi-expanded
• ultra-expanded
• extra-expanded

<p style="font-stretch:normal"> Font stretch normal </p>


<p style="font-stretch:condensed"> Font stretch condensed </p>

<p style="font-stretch:semi-condensed"> 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>

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

<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

Font Stack is grouping matching fonts together to avoid cross operating system issues. When one font is missing in a particular OS, the substitution font will work. This is called font Stack. Like sans-serif can be used with arial and helvetica and times can used with times new roman.

<p style="font-family: helvetica, arial, sans-serif"> Font family  Helvetica,  Arial and sans serif in combination. </p>
    

<p style="font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;"> Font family system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; in combination. </p>   

<p style="font-family:times, 'times new roman', serif"> Font family Times, times new roman and serif in combination. </p>   

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 (/).

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