The Best “font-size” and “line height” for you according to UI/UX Design guidelines.

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 

TagsFormulaFont size
P16px16px
h616 x 1.33321px
h521 x 1.33328px
h428 x 1.33337px
h337 x 1.33350px
h250x 1.33368px
h168 x 1.33389px

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 

TagsFormulaFont size
P16px16px
h618px18px
h518 x 1.12520px
h420 x 1.12523px
h323 x 1.12526px
h226 x 1.12529px
h129 x 1.12532px

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

 

About the author

Leave a Reply

Your email address will not be published.