Updating the Typography in vf-core

[sturobson]

The current typography scale set for vf-core is starting to become a little tired now that we are seeing more and more pages going live.

There are several things that have changed recently that mean we should look to update the typography system sooner, rather than later.

If we look at pages on embl.org we have 'two types' of typography:

1. What is required for components.
2. What is required for long form content.

Currently they both use the same scale, inherit the same line-height/leading, and can inherit the same margins.

Moving forward type used in components should (more often than not) be devoid of any margin for spacing so we can rely on vf-stack to do things for us at the component level.

What I think we should do:

1. Switch out the current type scale for something that matches a type scale.
2. Revisit the design tokens for this typographic scale and be more purposeful with the naming (dropping the t-shirt sizing for something a little more semantic)..

Along with this we should note that 'the web' handles leading differently to everything else. It adds space below the baseline as well as above the cap height. I think we should include something like text cropping which should help keep things 'tidy' whilst we wait for CSS to catch up with leading-trim.

Here's a quick side-by-side demo of the existing typographic scale with one that treats 18px (1.125em) as the base font size and uses a minor third scale (1.2) to increase and decrease other sizes.

Thoughts?