<div class="box box--em">
  <h2 class="title">1em</h2>
  
  <div class="cells">
    <div class="cell arial"></div>
    <div class="cell georgia"></div>
    <div class="cell comic-sans"></div>
    <div class="cell courier"></div>
  </div>
</div>

<div class="box box--ex">
  <h2 class="title">2ex</h2>
  
  <div class="cells">
    <div class="cell arial"></div>
    <div class="cell georgia"></div>
    <div class="cell comic-sans"></div>
    <div class="cell courier"></div>
  </div>
</div>

.box {
  &--em .cell {
    width: 1em;
    height: 1em;
  }
  
  &--ex .cell {
    width: 2ex;
    height: 2ex;
  }
}

// Helpers
BODY {
  background: white;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-size: 80px;
  font-family: Arial, sans-serif;
}

.title {
  margin: 0;
  margin-bottom: .4em;
  font-size: .35em;
  text-align: center;
  font-weight: normal;
}

.cells {
  --gap: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
  align-items: center;
  justify-content: center;
  justify-items: center;
  padding: var(--gap);
  background: 
    linear-gradient(
      #DDD 1px, 
      transparent 0, transparent var(--gap),
      #DDD calc(var(--gap) + 1px), #DDD calc(var(--gap) + 2px),
      transparent 0,
    ),
    linear-gradient(90deg,
      #DDD 1px, 
      transparent 0, transparent var(--gap),
      #DDD calc(var(--gap) + 1px), #DDD calc(var(--gap) + 2px),
      transparent 0,
    );
  background-position: center;
  background-size: 100% calc(var(--gap) + 2px), calc(var(--gap) + 2px) 100%;
  background-repeat: no-repeat;   
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  &::before {
    font-size: .18em;  
  }
}


.arial {
  background: palegreen;
  font-family: Arial, sans-serif;
  
  &::before {
    content: 'Arial';
    line-height: 1;
  }
}

.courier {
  background: pink;
  font-family: Courier New, monospace;
  
  &::before {
    content: 'Courier';
  }
}

.georgia {
  background: paleturquoise;
  font-family: Georgia;
  
  &::before {
    content: 'Georgia';
  }
}

.comic-sans {
  background: palegoldenrod;
  font-family: Comic Sans MS;
  
  &::before {
    content: 'Comic Sans';
  }
}