Virtual font

by phloe

HTML

<h1>
Hello you silly cow of a human being
</h1>

<button class="flex">
  <span>Click here</span>
</button>

<button class="two">
  <span>Click here</span>
</button>

CSS

@font-face{
  font-family: Publik;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src:
    url(https://www.dr.dk/global/fonts/DRPublik-SemiBold-9860ac45dcc6d54a81010c70b01e7000.woff2) format("woff2"),
    url(https://www.dr.dk/global/fonts/DRPublik-SemiBold-5116bfed56a2de9ddc671dd715851128.woff) format("woff");
  /*
  _size-adjust: calc((1000 / 690) * 100%);
  _ascent-override: calc(((690 + 200) / 1000) * 100%);
  _descent-override: calc((200 / 1000) * 100%);
  */
}


:root {
  --ascender: 1;
  --descender: 0.2;
  --cap-height: 0.69;
  --x-height: 0.5;
  --line-height-normal: calc(var(--ascender) + var(--descender));
}

body {
  font-family: Publik;
}

h1 {
  background-color: cyan;
  font-weight: 600;
  --line-height: 1.618033988749895;
  line-height: var(--line-height);
  margin: 1rem 0;
}

h1::before, h1::after {
  content: "";
  display: table;
  --half-leading: calc((var(--line-height) - var(--line-height-normal)) / 2);
}
h1::before {
  margin-bottom: calc((var(--half-leading) + (var(--ascender) - var(--cap-height))) * -1em);
}
h1::after {
  margin-top: calc((var(--half-leading) + var(--descender)) * -1em);
}

button {
  background-color: red;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  font-family: inherit;
  font-weight: 600;
}

.flex span {
  line-height: 20px;
  height: 20px;
  font-size: calc((20 / var(--cap-height)) * 1px);
  display: flex;
  justify-content: center;
  align-items: baseline;
  background-color: blue;
}

.flex span::after {
  content: "";
  visibility: hidden;
  font-size: 0;
  height: 100%;
  width: 0;
  display: grid;
  align-items: end;
}

.two {
  height: 36px;
  --align: -2px;
  padding: 0 1rem;
  display: inline-flex;
}

.two span {
  vertical-align: var(--align, 0);
  line-height: 36px;
  _height: 20px;
  font-size: calc((20 / var(--cap-height)) * 1px);
  background-color: blue;
  display: inline-block;
}