Lab
Test1. Vertical rhythm of text in block elements on web
line-height: 24px
Josefin Slab 14px
Roboto 18px
Roboto Slab 22px
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequuntur dicta distinctio expedita facilis id illo ipsa necessitatibus neque sunt!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequuntur dicta distinctio expedita facilis id illo ipsa necessitatibus neque sunt!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi consequuntur dicta distinctio expedita facilis id illo ipsa necessitatibus neque sunt!
Test2. Various font sizes of text
font-family: Droid Serif | line-height: 80px
font-size: 14px
font-size: 35px
font-size: 56px
Lqfglx
Lqfglx
Lqfglx
Test3. Various line heights of text
font-family: Droid Serif | font-size: 40px
line-height: 40px
line-height: 80px
line-height: 120px
Lqfglx
Lqfglx
Lqfglx
Test4. Various font families of text
font-size: 56px | line-height: 80px
font-family: Josefin Slab
font-family: Roboto
font-family: Roboto Slab
Lqfglx
Lqfglx
Lqfglx
Test5. Baseline grid gap
font-family: Droid Serif | font-size: 60px | line-height: 120px
baseline grid gap
= baseline height + bottom leading
Lqfglx
Lqfglx
Test6. Default line height of text in inline element
font-size: 40px | line-height 40px
font-family: Droid Serif
font-family: Englebert
Lqfglx
Lqfglx
Test7. Default line height of text with leading in inline element
font-size: 40px | line-height 80px
font-family: Droid Serif
font-family: Englebert
Lqfglx
Lqfglx