<div class="p-table">
  
  <!--  Symbol  -->
  <div class="symbol unit unit-0 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Family </br> and/or Class
      </span>
      <span class="number right">
        Rank *
      </span>
    </div>
    <span class="letter">Symbol</span>
    <span class="name">Typeface</span>
    <div class="author-year">
      <span class="author left">
        Designer(s)
      </span>
      <span class="year right">
        Year Designed
      </span>
    </div>
  </div>

  <!--  Helvetica  -->
  <div class="unit unit-1 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        1
      </span>
    </div>
    <span class="letter">H</span>
    <span class="name">Helvetica</span>
    <div class="author-year">
      <span class="author left">
        Max Miedinger
      </span>
      <span class="year right">
        1957
      </span>
    </div>
  </div>
  
  <!--  Futura  -->
  <div class="unit unit-2 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        2
      </span>
    </div>
    <span class="letter">F</span>
    <span class="name">Futura</span>
    <div class="author-year">
      <span class="author left">
        Paul Renner
      </span>
      <span class="year right">
        1927
      </span>
    </div>
  </div>
  
  <!--  Bodoni  -->
  <div class="unit unit-3 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        3
      </span>
    </div>
    <span class="letter">B</span>
    <span class="name">Bodoni</span>
    <div class="author-year">
      <span class="author left">
        Gianbattista Bodoni
      </span>
      <span class="year right">
        1790
      </span>
    </div>
  </div>

  <!--  Univers  -->
  <div class="unit unit-4 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        4
      </span>
    </div>
    <span class="letter">U</span>
    <span class="name">Universe</span>
    <div class="author-year">
      <span class="author left">
        Adrian Frutiger
      </span>
      <span class="year right">
        1954
      </span>
    </div>
  </div>


  <!--  Arzidenz  -->
  <div class="unit unit-5 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        5
      </span>
    </div>
    <span class="letter">AK</span>
    <span class="name">Akzidenz-Grotesk</span>
    <div class="author-year">
      <span class="author left">
        Ferdinand Theinhardt </br>
        Hermann Berthold </br>
        Gunter G. Lange
      </span>
      <span class="year right">
        1880 - </br> 1972
      </span>
    </div>
  </div>



  <!--  Garamond  -->
  <div class="unit unit-6 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        6
      </span>
    </div>
    <span class="letter">G</span>
    <span class="name">Garamond</span>
    <div class="author-year">
      <span class="author left">
        Claude Garamond
      </span>
      <span class="year right">
        1530
      </span>
    </div>
  </div>
  
  <!--  Times  -->
  <div class="unit unit-7 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        7
      </span>
    </div>
    <span class="letter">T</span>
    <span class="name">Times</span>
    <div class="author-year">
      <span class="author left">
        Stanley Morison
      </span>
      <span class="year right">
        1931
      </span>
    </div>
  </div>
  
  <!--  Gill Sans  -->
  <div class="unit unit-8 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        8
      </span>
    </div>
    <span class="letter">Gs</span>
    <span class="name">Gill Sans</span>
    <div class="author-year">
      <span class="author left">
        Eric Gill
      </span>
      <span class="year right">
        1930
      </span>
    </div>
  </div>

  <!--  Optima  -->
  <div class="unit unit-9 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        9
      </span>
    </div>
    <span class="letter">O</span>
    <span class="name">Optima</span>
    <div class="author-year">
      <span class="author left">
        Hermann Zapg
      </span>
      <span class="year right">
        1954
      </span>
    </div>
  </div>


  <!--  Caslon  -->
  <div class="unit unit-10 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Garalde
      </span>
      <span class="number right">
        10
      </span>
    </div>
    <span class="letter">C</span>
    <span class="name">Caslon</span>
    <div class="author-year">
      <span class="author left">
        William Caslon
      </span>
      <span class="year right">
        1725
      </span>
    </div>
  </div>


  <!--  Frutiger  -->
  <div class="unit unit-14 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        14
      </span>
    </div>
    <span class="letter">Fr</span>
    <span class="name">Frutiger</span>
    <div class="author-year">
      <span class="author left">
        Adrian Frutiger
      </span>
      <span class="year right">
        1977
      </span>
    </div>
  </div>

  <!--  Bell Gothic  -->
  <div class="unit unit-16 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        16
      </span>
    </div>
    <span class="letter">Bg</span>
    <span class="name">Bell Gothic</span>
    <div class="author-year">
      <span class="author left">
        Chauncey H. Griffin
      </span>
      <span class="year right">
        1938
      </span>
    </div>
  </div>


  <!--  Syntax  -->
  <div class="unit unit-18 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        18
      </span>
    </div>
    <span class="letter">S</span>
    <span class="name">Syntax</span>
    <div class="author-year">
      <span class="author left">
        Hars Eduard Meier
      </span>
      <span class="year right">
        1968
      </span>
    </div>
  </div>

  <!--  Meta  -->
  <div class="unit unit-20 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        20
      </span>
    </div>
    <span class="letter">Me</span>
    <span class="name">Meta</span>
    <div class="author-year">
      <span class="author left">
        Erik Spiekermann
      </span>
      <span class="year right">
        1991
      </span>
    </div>
  </div>

  <!--  Avant Garde  -->
  <div class="unit unit-22 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Geometric
      </span>
      <span class="number right">
        22
      </span>
    </div>
    <span class="letter">Ag</span>
    <span class="name">Avant Garde</span>
    <div class="author-year">
      <span class="author left">
        Herb Lubalin
      </span>
      <span class="year right">
        1968
      </span>
    </div>
  </div>


  <!--  Franklin Gothic  -->
  <div class="unit unit-27 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        27
      </span>
    </div>
    <span class="letter">Fg</span>
    <span class="name">Franklin Gothic</span>
    <div class="author-year">
      <span class="author left">
        Morriz F. Benton
      </span>
      <span class="year right">
        1902
      </span>
    </div>
  </div>

  
  <!--  Myriad  -->
  <div class="unit unit-32 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        32
      </span>
    </div>
    <span class="letter">My</span>
    <span class="name">Myriad</span>
    <div class="author-year">
      <span class="author left">
        Robert Slimbach
        </br>
        Carol Twombly
      </span>
      <span class="year right">
        1992
      </span>
    </div>
  </div>

  <!--  Formata  -->
  <div class="unit unit-65 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Formata
      </span>
      <span class="number right">
        65
      </span>
    </div>
    <span class="letter">Fo</span>
    <span class="name">Formata</span>
    <div class="author-year">
      <span class="author left">
        Bernd Mollenstadt
      </span>
      <span class="year right">
        1984
      </span>
    </div>
  </div>

  <!--  Prokyon  -->
  <div class="unit unit-71 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        71
      </span>
    </div>
    <span class="letter">Pr</span>
    <span class="name">Prokyon</span>
    <div class="author-year">
      <span class="author left">
        Erhard Kaiser
      </span>
      <span class="year right">
        2002
      </span>
    </div>
  </div>

  <!--  Prokyon  -->
  <div class="unit unit-71 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        71
      </span>
    </div>
    <span class="letter">Pr</span>
    <span class="name">Prokyon</span>
    <div class="author-year">
      <span class="author left">
        Ernard Kaiser
      </span>
      <span class="year right">
        2002
      </span>
    </div>
  </div>

  <!--  Metro  -->
  <div class="unit unit-72 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        72
      </span>
    </div>
    <span class="letter">Mt</span>
    <span class="name">Metro</span>
    <div class="author-year">
      <span class="author left">
        William A. Dwiggins
      </span>
      <span class="year right">
        1929
      </span>
    </div>
  </div>

  
  <!--  Antique Olive  -->
  <div class="unit unit-74 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        74
      </span>
    </div>
    <span class="letter">Ao</span>
    <span class="name">Antique Olive</span>
    <div class="author-year">
      <span class="author left">
        Roger Excoffron
      </span>
      <span class="year right">
        1962
      </span>
    </div>
  </div>

  <!--  Eurostile  -->
  <div class="unit unit-47 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Geometric
      </span>
      <span class="number right">
        47
      </span>
    </div>
    <span class="letter">E</span>
    <span class="name">Eurostile</span>
    <div class="author-year">
      <span class="author left">
        Aldo Novarese
      </span>
      <span class="year right">
        1963
      </span>
    </div>
  </div>

  <!--  Didot  -->
  <div class="unit unit-13 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Didone
      </span>
      <span class="number right">
        13
      </span>
    </div>
    <span class="letter">D</span>
    <span class="name">Didot</span>
    <div class="author-year">
      <span class="author left">
        Firmin Didot
      </span>
      <span class="year right">
        1799
      </span>
    </div>
  </div>

  
  <!--  Baskerville  -->
  <div class="unit unit-19 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Realist
      </span>
      <span class="number right">
        19
      </span>
    </div>
    <span class="letter">BA</span>
    <span class="name">Baskerville</span>
    <div class="author-year">
      <span class="author left">
        John Baskerville
      </span>
      <span class="year right">
        1754
      </span>
    </div>
  </div>


  <!--  Interstate  -->
  <div class="unit unit-31 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        31
      </span>
    </div>
    <span class="letter">In</span>
    <span class="name">Interstate</span>
    <div class="author-year">
      <span class="author left">
        Tobias Frere-Jones
      </span>
      <span class="year right">
        1993
      </span>
    </div>
  </div>

  <!--  Din  -->
  <div class="unit unit-40 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Din
      </span>
      <span class="number right">
        40
      </span>
    </div>
    <span class="letter">Di</span>
    <span class="name">Din</span>
    <div class="author-year">
      <span class="author left">
        Ludwig Goller
      </span>
      <span class="year right">
        1926
      </span>
    </div>
  </div>

  <!-- Stone   -->
  <div class="unit unit-21 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Sans-serif
      </span>
      <span class="number right">
        21
      </span>
    </div>
    <span class="letter">ST</span>
    <span class="name">Stone</span>
    <div class="author-year">
      <span class="author left">
        Summer Stone
      </span>
      <span class="year right">
        1987
      </span>
    </div>
  </div>

  <!--  Thesis  -->
  <div class="unit unit-26 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Sans-serif, Mixed
      </span>
      <span class="number right">
        26
      </span>
    </div>
    <span class="letter">Th</span>
    <span class="name">Thesis</span>
    <div class="author-year">
      <span class="author left">
        Lucas de Groot
      </span>
      <span class="year right">
        1994
      </span>
    </div>
  </div>

  <!--  Rotis  -->
  <div class="unit unit-30 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Serif </br> Sans-serif
      </span>
      <span class="number right">
        30
      </span>
    </div>
    <span class="letter">R</span>
    <span class="name">Rotis</span>
    <div class="author-year">
      <span class="author left">
        Oti Aicher
      </span>
      <span class="year right">
        1988
      </span>
    </div>
  </div>

  <!--  Trinite  -->
  <div class="unit unit-17 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Serif </br> Realist
      </span>
      <span class="number right">
        Trinite
      </span>
    </div>
    <span class="letter">Tr</span>
    <span class="name">Trinite</span>
    <div class="author-year">
      <span class="author left">
        Bram de Does
      </span>
      <span class="year right">
        1982
      </span>
    </div>
  </div>

  <!--  Minion  -->
  <div class="unit unit-11 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Serif </br> Garalde
      </span>
      <span class="number right">
        11
      </span>
    </div>
    <span class="letter">M</span>
    <span class="name">Minion</span>
    <div class="author-year">
      <span class="author left">
        Robert Slimback
      </span>
      <span class="year right">
        1990
      </span>
    </div>
  </div>

  <!--  Lucia  -->
  <div class="unit unit-12 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Serif </br> Garalde
      </span>
      <span class="number right">
        12
      </span>
    </div>
    <span class="letter">L</span>
    <span class="name">Lucida</span>
    <div class="author-year">
      <span class="author left">
        Charles Bigelow </br>
        Kris Holmes
      </span>
      <span class="year right">
        1985
      </span>
    </div>
  </div>

  <!--  Fleischmann  -->
  <div class="unit unit-15 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Serif </br> Garalde
      </span>
      <span class="number right">
        15
      </span>
    </div>
    <span class="letter">Fl</span>
    <span class="name">Fleischmann</span>
    <div class="author-year">
      <span class="author left">
        Erhard Kaiser
      </span>
      <span class="year right">
        1997
      </span>
    </div>
  </div>

  <!-- Dax   -->
  <div class="unit unit-75 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        75
      </span>
    </div>
    <span class="letter">Da</span>
    <span class="name">Dax</span>
    <div class="author-year">
      <span class="author left">
        Hans Reichel
      </span>
      <span class="year right">
        1995
      </span>
    </div>
  </div>

  <!-- Today Sans -->
  <div class="unit unit-78 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        78
      </span>
    </div>
    <span class="letter">Ts</span>
    <span class="name">Today Sans</span>
    <div class="author-year">
      <span class="author left">
        Volker Kuster
      </span>
      <span class="year right">
        1968
      </span>
    </div>
  </div>
  
  <!-- Info -->
  <div class="unit unit-87 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        87
      </span>
    </div>
    <span class="letter">If</span>
    <span class="name">Info</span>
    <div class="author-year">
      <span class="author left">
        Erik Speikermann
      </span>
      <span class="year right">
        1996
      </span>
    </div>
  </div>

  <!-- Gotham  -->
  <div class="unit unit-60 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Geometric
      </span>
      <span class="number right">
        60
      </span>
    </div>
    <span class="letter">Go</span>
    <span class="name">Gotham</span>
    <div class="author-year">
      <span class="author left">
        Tobias Jones
      </span>
      <span class="year right">
        2000
      </span>
    </div>
  </div>

  <!-- Walbaum -->
  <div class="unit unit-44 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Didone
      </span>
      <span class="number right">
        44
      </span>
    </div>
    <span class="letter">W</span>
    <span class="name">Walbaum</span>
    <div class="author-year">
      <span class="author left">
        Justus Walbaum
      </span>
      <span class="year right">
        1800
      </span>
    </div>
  </div>
</div>

.left {
  float: left;
}

.right {
  float: right;
}

.sans-serif {
  font-family: Helvetica, san-serif;
}

.p-table {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(10, 1fr);
  @media(min-width: 772px){
    grid-template-columns: repeat(2, 1fr);
  }
  @media(min-width: 992px){
    grid-template-columns: repeat(18, 65px);
  }
}

.unit {
  border: 2px solid black;
  border-radius: 0px 8px 8px 8px;
  cursor: cell;
  display: flex;
  flex-direction: column;
  padding: 5px;
  text-align: center;
  position: relative;
  min-height: 68px;
}

.unit:hover {
  background-color: black;
  color: white;
  z-index: 1;
  animation: scale 0.5s ease-in-out forwards;
}

.symbol {
  max-height: 120px;
  
  .type-number {
    text-align: left;
    margin-bottom: 25px;
  }
  .name {
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 17px;
  }
  .author-year {
    font-size: 9px;
  }
}

.type-number {
  margin-bottom: 5px
}

.attributes {
  line-height: 1.2;
  font-size: 5px;
}

.number {
  font-size: 9px;
}

.letter {
  font-size: 32px;
  line-height: 0.9;
  margin-top: 3px;
}

.name {
  font-size: 6px;
  margin-bottom: 8px;
  margin-top: 0px;
}

.author-year {
  bottom: 0px;
  font-size: 3.5px;
  padding-bottom: 5px;
  position: relative;
  text-align: left;
  .author {
    position: absolute;
    bottom: 0px;
    line-height: 1;
  }
  .year {
    position: absolute;
    bottom: -1px;
    right: 0px;
  }
}


.unit-0 {
  grid-column: 4 / 6;
  grid-row: 2 / 4;
}

.unit-1 {
  grid-column: 0 / 1;
  grid-row: 0 / 1;
}

.unit-2 {
  grid-column: 17 / 18;
  grid-row: 0 / 1;
}

.unit-3 {
  grid-column: 18 / 19;
  grid-row: 2 / 3;
}

.unit-4 {
  grid-column: 0 / 1;
  grid-row: 2 / 3;
}

.unit-5 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.unit-6 {
  grid-column: 9 / 10;
  grid-row: 4 / 5;
}

.unit-7 {
  grid-column: 6 / 7;
  grid-row: 4 / 5;
}

.unit-8 {
  grid-column: 12 / 13;
  grid-row: 2 / 3;
}

.unit-9 {
  grid-column: 13 / 14;
  grid-row: 2 / 3;
}

.unit-10 {
  grid-column: 13 / 14;
  grid-row: 4 / 5;
}

.unit-14 {
  grid-column: 14 / 15;
  grid-row: 2 / 3;
}

.unit-16 {
  grid-column: 0 / 1;
  grid-row: 3 / 4;
}

.unit-18 {
  grid-column: 15 / 16;
  grid-row: 2 / 3;
}

.unit-20 {
  grid-column: 16 / 17;
  grid-row: 2 / 3;
}

.unit-22 {
  grid-column: 17 / 18;
  grid-row: 2 / 3;
}

.unit-27 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.unit-31 {
  grid-column: 0 / 1;
  grid-row: 4 / 5;
}

.unit-40 {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

.unit-21 {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}

.unit-26 {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
}

.unit-30 {
  grid-column: 5 / 6;
  grid-row: 4;
}

.unit-17 {
  grid-column: 7 / 8;
  grid-row: 4;
}

.unit-19 {
  grid-column: 8 / 9;
  grid-row: 4;
}

.unit-10 {
  grid-column: 10 / 11;
  grid-row: 4;
}

.unit-11 {
  grid-column: 11 / 12;
  grid-row: 4;
}

.unit-12 {
  grid-column: 12 / 13;
  grid-row: 4;
}

.unit-15 {
  grid-column: 13 / 14;
  grid-row: 4;
}

.unit-32 {
  grid-column: 12 / 13;
  grid-row: 3;
}


.unit-65 {
  grid-column: 13 / 14;
  grid-row: 3;
}

.unit-71 {
  grid-column: 14 / 15;
  grid-row: 3;
}

.unit-72 {
  grid-column: 15 / 16;
  grid-row: 3;
}

.unit-74 {
  grid-column: 16 / 17;
  grid-row: 3;
}

.unit-47 {
  grid-column: 17 / 18;
  grid-row: 3;
}

.unit-13 {
  grid-column: 18 / 19;
  grid-row: 3;
}

.unit-75 {
  grid-column: 14 / 15;
  grid-row: 4;
}

.unit-78 {
  grid-column: 15 / 16;
  grid-row: 4;
}

.unit-87 {
  grid-column: 16 / 17;
  grid-row: 4;
}

.unit-60 {
  grid-column: 17 / 18;
  grid-row: 4;
}

.unit-44 {
  grid-column: 18 / 19;
  grid-row: 4;
}


@keyframes scale {
  0%   { transform: scale(1,1);}
  10%  { transform: scale(1.1,.9); box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 3px 1px;}
  30%  { transform: scale(1.9,2.1);  box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px 1px;}
  50%  { transform: scale(2,2)}
  57%  { transform: scale(2,2);box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px 1px;}
  64%  { transform: scale(2,2)}
  100% { transform: scale(2,2);box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 7px 1px;}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.