ex unit

dabblet.css

/**
 * ex unit
 */

p{
  font-size:40px;
  color:DarkBlue
}
p span{
   font-size:1ex;
   color:DarkCyan;
}
#p1{font-family:serif}
#p2{font-family:sans-serif}
#p3{font-family:monospace}
#p4{font-family:cursive}

dabblet.html

<p id='p1'>Xx<span>Xx</span> AaBbCcDdPpQqFfGg<span>AaBbCcDdPpQqFfGg</span></p>
<p id='p2'>Xx<span>Xx</span> AaBbCcDdPpQqFfGg<span>AaBbCcDdPpQqFfGg</span></p>
<p id='p3'>Xx<span>Xx</span> AaBbCcDdPpQqFfGg<span>AaBbCcDdPpQqFfGg</span></p>
<p id='p4'>Xx<span>Xx</span> AaBbCcDdPpQqFfGg<span>AaBbCcDdPpQqFfGg</span></p>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}