: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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.