Typography

We achieve styling through opt in classes and do not style elements globally. This is to reduce the number of style collisions across projects. Elements can inherit styles from copy-[classname] or otherwise applied directly.

Typographic elements do not come with any margins attached to them in order to make them more flexible in where they can be used.

They get margins when they are inside a wrapper with a class of context--content. We may need to work on the naming but the principle is solid.

CSS
        
.price::before {
	content: '$';
	position: relative;
	top: -0.20rem;      /* top = roughly 25% of font-size */
	font-size: 0.8rem;  /* font-size = roughly 70% of parent */
}        

CSS
      
.month::after {
	content: '/m';
	position: relative;
}        

CSS
      
.am::after {
	content: 'am';
	text-transform: uppercase;
	font-size: 0.6rem;  /* font-size = roughly 50% of parent */
}