24px grid test

by kthornbloom

HTML

<link rel="preload" href="https://media.sweetwater.com/fonts/aspira/aspira_demi/Aspira-Demi.woff2" as="font" type="font/woff2" crossorigin>

<b>Shown at 24px next to 18px text</b><br>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<style type="text/css">
	.st5{fill:none;stroke:#1373A8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st6{fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<path class="st5" d="M19,17l4.5-5c0,0,0,4.9,0,6.5c0,1.6-6.1,6.4-8.7,7.4c-2.6-1-8.4-5.7-8.3-7.4c0.1-1.7,0-10.8,0-10.8
	C7.6,7,10.3,5.5,15,5.5c3,0,4.7,0.6,6.1,1.2"/>
<path class="st6" d="M11.2,13.7l3.6,3.6L26.2,5.8c0,1.9,0,8.6,0,13.1S14.8,29.5,14.8,29.5S3.8,23.6,3.8,19.1s0-11.2,0-13.1
	c0,0,3.1-3.7,11.1-3.7c3.8,0,6.5,1.1,8.2,2"/>
</svg>

Grid: 32 Stroke: 1.5

<br>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#1373A8;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
	.st1{fill:none;stroke:#000000;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<path class="st0" d="M64.4,48.6l9.6-10c0,0,0,15.3,0,20.3S56,76,48,79c-8-3-26.2-14.7-26-20s0-37.4,0-37.4c3.3-2.4,11.2-5.6,26-5.6
	c9.5,0,16.2,0.7,20.6,2.6"/>
<path class="st1" d="M36.7,41L48,52.3L83,18c0,6,0,27,0,41S48,89,48,89S13,73,13,59s0-35,0-41c0,0,10-11,35-11c12,0,20.3,2,25.7,4.7
	"/>
</svg>

Grid: 24 (at 96) Stroke: 1.5

<br>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 96 96" style="enable-background:new 0 0 96 96;"...

CSS

body {
  font-family: 'aspira';
  font-size: 16px;
  line-height: 1.5em;
  padding: 40px;
}

svg {
  width: calc(1em * (1 + (1/3))); /* 24 */
  vertical-align: middle;
}

.bigger {
  font-size: 2em;
  line-height: 1.5em;
  padding:1em 0;
}

.biggest {
  font-size: 4em;
  line-height: 1.5em;
  padding:.1em 0;
}