<h2>Unique letter characters</h2>
<div class="grid">
  <div class="grid-item pt-sans">
    <h3>bd, pq, ft, ij, mw, nu, Il1<br>(PT Sans — sans-serif)</h3>
  </div>
  <div class="grid-item noto">
    <h3>bd, pq, ft, ij, mw, nu, Il1<br>(Noto Serif HK — serif)</h3>
  </div>
  <div class="grid-item courgette">
    <h3>bd, pq, ft, ij, mw, nu, Il1<br>(Courgette — cursive)</h3>
  </div>
</div>
<hr>
<h2>Repeated letter characters</h2>
<div class="grid">
  <div class="grid-item sora">
    <h3>bd, pq, ft, ij, mw, nu, Il1<br>(Sora — sans-serif)</h3>
  </div>
  <div class="grid-item marcellus">
    <h3>bd, pq, ft, ij, mw, nu, Il1<br>(Marcellus — serif)</h3>
  </div>
  <div class="grid-item poiret">
    <h3>bd, pq, ft, ij, mw, nu, Il1<br>(Poiret One — cursive)</h3>
  </div>
</div>

@import url(https://fonts.googleapis.com/css2?family=Open+Sans);

@import url("https://fonts.googleapis.com/css2?family=PT+Sans");

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+HK");

@import url("https://fonts.googleapis.com/css2?family=Courgette");

@import url("https://fonts.googleapis.com/css2?family=Sora");

@import url("https://fonts.googleapis.com/css2?family=Marcellus");

@import url("https://fonts.googleapis.com/css2?family=Poiret+One");

body {
  font-family: "Open Sans", sans-serif;
  margin: 2rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  margin: 0 auto;
}

.grid-item {
  padding: 0 1.25rem 1.5rem;
  margin: 1rem;
  text-align: left;
  overflow: hidden;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.25rem;
}

p {
  font-size: 1rem;
}

.pt-sans {
  font-family: "PT Sans", sans-serif;
}

.noto {
  font-family: "Noto Serif HK", serif;
}

.courgette {
  font-family: "Courgette", cursive;
}

.sora {
  font-family: "Sora", sans-serif;
}

.marcellus {
  font-family: "Marcellus", serif;
}

.poiret {
  font-family: "Poiret One", cursive;
}