The word font refers to a text character or a set of printable characters or displayable characters with specific styles and sizes.
Fonts are used in both printable media and digital media. Fonts are classified into different typefaces. There are 5 basic classifications:
serif, sans serif, script, monospaced, and display.
What is a Unit?
A unit is set on the size of a property for an element.
For example, if we wanted to set the property of a paragraph, we would set a specific value. This value includes the unit.
It’s important to consider the two categories of units:
absolute and relative.
Absolute Units
Absolute units are useful when responsiveness is not required in a project.
Their scale is relative to its parent element or window size.
Absolute units are
px
pt
pc
cm
mm
In
Relative Units
Relative units are useful when we have to style responsive projects, their scale is relative to its parent element or window size.
Relative units can be a little more difficult than absolute units
Relative units are
%
em
rem
ch
vh
vw
vmin
vmax
How to pick the different font sizes for your website ??
With the Golden ratio number
Step 1 – Define our base font size for our project :
Recommended minimum font size is 16px. (Paragraph text)
Step 2 – Multiply base font size by the golden ratio number (1.333) to get Heading text values.
Golden ratio : Value = base font size x 1.333
| Tags | Formula | Font size |
| P | 16px | 16px |
| h6 | 16 x 1.333 | 21px |
| h5 | 21 x 1.333 | 28px |
| h4 | 28 x 1.333 | 37px |
| h3 | 37 x 1.333 | 50px |
| h2 | 50x 1.333 | 68px |
| h1 | 68 x 1.333 | 89px |
Without the Golden ratio number
Step 1 – Define our base font size for our project :
Recommended minimum font size is 16px. (Paragraph text)
Step 2 – Next font size is our choice. ( h6 = 20px )
Step 3 – Calculate new Ratio
New Ratio = nextfont(h6)/basefont = 18/16 = 1.125
Step 4 – Multiply font size by the new ratio number (1.125) to get the next Heading text values. New ratio : Value = font size x 1.125
| Tags | Formula | Font size |
| P | 16px | 16px |
| h6 | 18px | 18px |
| h5 | 18 x 1.125 | 20px |
| h4 | 20 x 1.125 | 23px |
| h3 | 23 x 1.125 | 26px |
| h2 | 26 x 1.125 | 29px |
| h1 | 29 x 1.125 | 32px |
How do identify line-height ?
For optimal readability and accessibility – 140%-180% of font size
For example – font size = 16px
Line height = 16px x140% or 1.4 = 22.4px
Line height = 16px x 180% or 1.8 = 28.8px
For small fonts, go with 170% or 1.7
Use smaller line height for large headings, if the font is above 36px then go with 120% or 1.2.
For Example,
Line height : 16px x 120% = 19.2px
Line height : 16px x 140% = 22.4px
Line height : 16px x 160% = 25.6px
Line height : 16px x 180% = 28.8px
