Grid Sizes

Gap

Grid Columns

Rounded

Padding

gap-5: 20px / 2.5rem
p-10: 40px / 5rem
rounded-lg

gap-5: 20px / 2.5rem
p-10: 40px / 5rem
rounded-lg

gap-5: 20px / 2.5rem
p-10: 40px / 5rem
rounded-lg

gap-5: 20px / 2.5rem
p-10: 40px / 5rem
rounded-lg

gap-5: 20px / 2.5rem
p-10: 40px / 5rem
rounded-lg

gap-5: 20px / 2.5rem
p-10: 40px / 5rem
rounded-lg

gap-5: 20px / 2.5rem
p-10: 40px / 5rem
rounded-lg

gap-5: 20px / 2.5rem
p-10: 40px / 5rem
rounded-lg

Text Sizes

Container Width

H1 Size

H2 Size

H3 Size

H4 Size

Base Text Size

Letter Spacing (tracking)

Line Height

Fundamentals of Text Readability

Line Length and Leading

The optimal line length for comfortable reading is between 45-75 characters (including spaces). This translates to approximately 9-12 words per line in English. At this length, the reader's eye can easily find the beginning of the next line.

Line Spacing

Leading (line spacing) should typically be 120-145% of the font size. For example, for text set at 16px, the optimal line spacing would be 19-23px.

Parameter Relationships

As line length increases, line spacing should be proportionally increased as well. This helps the reader's eye transition more easily to the next line and maintains text readability.

“Good typography becomes invisible, allowing readers to focus entirely on the content”
  • 45-75 characters per line
  • Leading 120-150% of font size
  • Proportional increase in leading for longer lines