:ruby
  text_string = 'This text is exactly 40 characters long.'
  zero_string   = ''
  
  40.times do
    zero_string += 0.to_s
  end

.monospace.mbm
  %h1 Courier
  %p= text_string
  .chUnits width: 40ch
  %p= zero_string

.sans-serif.mbm
  %h1 Arial
  %p= text_string
  .chUnits width: 40ch
  %p= zero_string

.serif
  %h1 Georgia
  %p= text_string
  .chUnits width: 40ch
  %p= zero_string
View Compiled
html
  font-size: 20px
  line-height: 1.4
  padding: 40px 40px 0

h1
  margin-bottom: 0.5em
  margin-top: 0
  line-height: 1
  font-size: inherit

p
  margin: 0

.chUnits
  background-color: rgba(red, 0.1)
  display: block
  height: 30px
  line-height: 30px
  text-indent: 20px  
  width: 40ch

.monospace
  font-family: 'Courier', monospace

.sans-serif
  font-family: 'Arial', sans-serif

.serif
  font-family: 'Georgia', serif

.mbm
  margin-bottom: 1.75em
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.