Create typography component in code

[vnys]

owner: @torleifhalseth

We are currently looking into using Inter as a replacement for the Equinor typeface in UI components on mobile. This issue will eventually be fleshed out with information needed to create the typography component while we’re waiting for support for CSS text-box-trim & text-box-edge.

Inter properties

Property	Value	Em
Em size	2816	1.0000
Ascent	2252	0.7997
Descent	564	0.2000
Cap height	2048	0.7272
x height	1536	0.5454

Using Capsize with 14px/20px, the resulting CSS is:

.capsizedText {
  font-size: 14px;
  line-height: 20px;
}

.capsizedText::before {
  content: "";
  margin-bottom: -0.3506em;
  display: table;
}

.capsizedText::after {
  content: "";
  margin-top: -0.3506em;
  display: table;
}

The CSS for the Equinor font:

.capsizedText {
  font-size: 14px;
  line-height: 20px;
}

.capsizedText::before {
  content: "";
  margin-bottom: -0.3798em;
  display: table;
}

.capsizedText::after {
  content: "";
  margin-top: -0.3488em;
  display: table;
}

[vnys]

The Equinor typeface used for headings

So we need to shave off 21.2% from the bottom and 23.4% (934 - 700) from the top, and then add extra padding to the top to round to the nearest 4.

[torleifhalseth]

Are you sure about the calculations @vnys ?
This is what made sense to me:
Total height: 943 + 212 = 1 155
Topp: (943-700)/total height = 0,2103896104 = 21%
Bottom: 212/total height = 0,1835497835 = 18.4%

[vnys]

No, I moved it to Google Sheets ;) Calculations based on CapSize. Made a codepen, but it doesn’t add up (yet). But if you want to take it from here that would be great :)

[torleifhalseth]

Amazing resource: https://github.com/jantimon/text-box-trim-examples

[vnys]

Resources

• Web typography: baseline grids made easy (finally!)
• Aligning type to baseline the right way using SASS
• Ultimate guide to baseline alignment using Figma’s auto layout
• Leading-Trim: The Future of Digital Typesetting
• Deep dive CSS: font metrics, line-height and vertical-align
• How We Implemented a Baseline Grid Using CSS

[vnys]

I think I have it now. I made a a full page codepen with both Inter and Equinor aligned and un-aligned, and the formulas in Google Sheets. I had made an error in the capHeightTrimGrid variable which is now fixed.

[torleifhalseth]

Amazing @vnys 🥳 Great work and creds for diving deep to solve this. Will you adjust the calculations in our components according to the new adjustments made?

[vnys]

I’m curious to see if we can use @oddvernes’s CSS solution in the typography component first:

--margin-top: calc((((1lh - 1cap) / 2) + var(--offset)) * -1);
--margin-bottom: calc((((1lh - 1cap) / 2) - var(--offset)) * -1);

That would simplify things a great deal, at least on the web. Not sure if there’s support for cap and lh in React Native.

[oddvernes]

By the way round() (+ rem() + mod()) ships in chrome 125, 4 weeks from now

[oddvernes]

If the line-height was provided as unitless value then in css we can do line-height: round(1em * 1.5, 4px); where 1.5 would be the unitless number coming from a variable. Then if someone were to override the font-size illegaly, the line-height would still be rounded off to multiple of 4px. If the line-height is only provided as px we could convert it to rem in the transformer and it would be one less calculation in the browser. But at the same time the overriding rapscallions would have to supply their own line-height override as well 🤷‍♂

[marinalinn]

Heads up @vnys

[oddvernes]

This component can not be finalized until color tokens are ready.
The plan for color:
Figure out default color. For uiText it should almost certainly be inherit, as it will be put inside components such as buttons etc which supplies text color on their own colors via tokens. I think maybe this should be the case for bodyText as well and maybe heading so that color can be set more easily on parent blocks instead of each text component individually. There should be a color prop where the user can put primary secondary etc explicitly, and there should be a way to give it any valid css color as well, either via the same prop or by overriding a custom property.
Links needs to be handled as well. In the old Typography component, link is and explicit boolean prop you have to add to give it link styles (color, underscore, focus ring). It is also possible to automatically add link styles if there is a href on the element.