.g.mb1
  .g-b.g-b--1of4
    %p 1.0
    %p.lh1 Yup, more placeholder text. I’m not a huge fan of standard lorem ipsum mostly because it all looks so boring. I know that’s kind of the point, but it just feels so tired. Plus, it’s pretty hard to test out readability when the text is in Latin.
    %p.mb0 Too tight
  .g-b.g-b--1of4
    %p 1.25
    %p.lh125 Yup, more placeholder text. I’m not a huge fan of standard lorem ipsum mostly because it all looks so boring. I know that’s kind of the point, but it just feels so tired. Plus, it’s pretty hard to test out readability when the text is in Latin.
    %p.mb0 About right
  .g-b.g-b--1of4
    %p 1.5
    %p.lh15 Yup, more placeholder text. I’m not a huge fan of standard lorem ipsum mostly because it all looks so boring. I know that’s kind of the point, but it just feels so tired. Plus, it’s pretty hard to test out readability when the text is in Latin.
    %p.mb0 A little loose
  .g-b.g-b--1of4
    %p 1.75
    %p.lh175 Yup, more placeholder text. I’m not a huge fan of standard lorem ipsum mostly because it all looks so boring. I know that’s kind of the point, but it just feels so tired. Plus, it’s pretty hard to test out readability when the text is in Latin.
    %p.mb0 Too loose

.g
  .g-b.g-b--2of4
    %p 1.3
    %p.lh3 Yup, more placeholder text. I’m not a huge fan of standard lorem ipsum mostly because it all looks so boring. I know that’s kind of the point, but it just feels so tired. Plus, it’s pretty hard to test out readability when the text is in Latin.
    %p.mb0 A little tight
  .g-b.g-b--2of4
    %p 1.4
    %p.lh14 Yup, more placeholder text. I’m not a huge fan of standard lorem ipsum mostly because it all looks so boring. I know that’s kind of the point, but it just feels so tired. Plus, it’s pretty hard to test out readability when the text is in Latin.
    %p.mb0 About right
View Compiled
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro')

html
  background: #f7f7f6
  font-family: 'Source Sans Pro', 'Open Sans', sans-serif
  padding: 37.5px

body
  margin-left: auto
  margin-right: auto
  width: 1000px

p
  margin-bottom: 20px
  margin-top: 0

.g
  display: flex
  margin-left: -40px

.g-b
  box-sizing: border-box
  padding-left: 40px

.g-b--2of4
  width: 50%

.g-b--1of4
  width: 25%
  
.mb0
  margin-bottom: 0
.mb1
  margin-bottom: 20px

.lh1
  line-height: 1
.lh125
  line-height: 1.25
.lh13
  line-height: 1.3
.lh14
  line-height: 1.4
.lh15
  line-height: 1.5
.lh175
  line-height: 1.75

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.