Letterform Construction

in this example, we'll use the div's and some specific
CSS styles heavily, including but not limited to:

... {
	width: 100px;
	height: 10px;
	background: red;
	transform: rotate(10deg) translate(0, 10px) scale(-1);
	position: [absolute, relative];
	[top, left, bottom, right]: 10px;
}
				
you can also use CSS Variables to make it easier
to keep parts of your typeface consistent. to use
CSS Variables, you define a value for them either
on html or the :root node in your stylesheet , like:

:root {
	--fontHeight: 200px;
	--color: white;
	--negativeColor: black;
	--baseKern: 20px;
	--stemWidth: 20px;
}
				
you can also use CSS Variables to make it easier
to keep parts of your typeface consistent. to use
CSS Variables, you define a value for them either
on html or the :root node in your stylesheet , like:

:root {
	--fontHeight: 200px;
	--color: white;
	--negativeColor: black;
	--baseKern: 20px;
	--stemWidth: 20px;
}
				
later you can then use those values in place of numbers
in your stylesheet

.stem {
	background: var(--color);
	width: var(--stemWidth); 
	height: var(--fontHeight);
}
				
later you can then use those values in place of numbers
in your stylesheet

.stem {
	background: var(--color);
	width: var(--stemWidth); 
	height: var(--fontHeight);
}
				
we'll also want to think about how to use CSS classes
to make reusable modules
				
<div class="a letter">
	<div class="stem rightLeaning one"></div>
	<div class="stem leftLeaning two"></div>
	<div class="crossBar three"></div>
	<div class="counter four"></div>
	<div class="counter five"></div>
</div>
				
.letter {
	float:left;
	position:relative; 
	padding-right:var(--baseKern); 
	height:calc(var(--fontHeight) + 20px);
}
.letter * {
	position:absolute;
}
.letter {
	float:left;
	position:relative;
	padding-right:var(--baseKern); 
	height:calc(var(--fontHeight) + 20px);
}
.letter * {
	position:absolute;
}
.letter {
	float:left;
	position:relative; 
	padding-right:var(--baseKern); 
	height:calc(var(--fontHeight) + 20px);
}
.letter * {
	position:absolute;
}
.letter {
	float:left;
	position:relative; 
	padding-right:var(--baseKern); 
	height:calc(var(--fontHeight) + 20px);
}
.letter * {
	position:absolute;
}
.stem {
	background: var(--color);
	width:var(--stemWidth); 
	height: var(--fontHeight);
}

.leftLeaning {
	transform:rotate(-20deg) 
}

.rightLeaning {
	transform:rotate(20deg) 
}
				
.crossBar {
	background: var(--color);  
	height: var(--stemWidth); 
}

.counter {
	transform-origin: center;
	background: var(--negativeColor);    
}
.a {
	width:170px;
}

.a>.one {
	left:40px;  
}

.a>.two {
	left:110px;  
}

.a>.three {
	left: 40px;
	top: 110px;
	width: 80px;
}
.a>.four {
	top:-8px; 
	width:170px;
}

.a>.five {
	bottom:14px;
	width:170px;
}

font drawing example