Create typography component in code #3342
Description
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;
}