Different font sizes

Different font sizes

by Csaba Hellinger

HTML

<span class="font1">Hello</span>
<span class="font2">Hello</span>

<button>
  <span class="font1">Hello</span>
</button>
<button>
  <span class="font2">Hello</span>
</button>

CSS

.font1 { font-family: 'Impact'; }
.font2 { font-family: 'Courier New'; }

span {
  background-color: gray;
  font-size: 40px;
}

button {
  --border: 0;
  background-color: skyblue;
  --h: 40px;
  --line-height: 1.3;
  --height: var(--h);
  --padding-block: calc((var(--h) - 1.3lh) / 2);
  
  height: 48px;
}

/* just for demo purposes */
body {
  display: flex;
  --gap: 0.2rem;
  align-items: flex-start;
}