<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.