Typography

Introduction

The AODocs Pattern Library is a huge toolbox made by us. With this library, we can reuse UI & UX elements instead of reinventing the wheel or roping in an engineer.
We can see all of our patterns in one place, quickly revealing maintenance issues. We are now able to speed up our creative process and solve some quick UX/UI problems.

Typography

We are using the lighter, friendlier and more legible Open Sans. We follow line-height ratio of 1.5.

Capture_d_e_cran_2018-01-18_a__16.07.49.png

Download

 

Capture_d_e_cran_2018-01-18_a__16.23.11.png

Paragraph width

In order to choose our body font size, we should consider our paragraph width (instead of picking it randomly). There is a rule which can help us find a font size from a paragraph's width, the 66-character line.

Thanks to with a little bit of math, it’s easy to retrieve the right font size based on our paragraph width: Font-size = width/30.

“Anything from 45 to 85 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 60 characters.”

Line height

Because the typographic scale is a scale, it must obey the scaling property: if x is a size in the scale, then r * x must also be a size in the scale, where r is the ratio of the scale. This ratio is a defining property of the scale, 1.5 in your case.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.