Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!-- System Ui -->
<h1 class="text-2xl" style="font-family: var(--font-system-ui)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Transational -->
<h1 class="text-2xl" style="font-family: var(--font-transitional)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Old Style -->
<h1 class="text-2xl" style="font-family: var(--font-old-style)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Humanist -->
<h1 class="text-2xl" style="font-family: var(--font-humanist)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Geometric Humanist -->
<h1 class="text-2xl" style="font-family: var(--font-geometric-humanist)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Classical Humanist -->
<h1 class="text-2xl" style="font-family: var(--font-classical-humanist)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Neo Grotesque -->
<h1 class="text-2xl" style="font-family: var(--font-neo-grotesque)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Monospace Slab Serif -->
<h1 class="text-2xl" style="font-family: var(--font-monospace-slab-serif)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Monospace Code -->
<h1 class="text-2xl" style="font-family: var(--font-monospace-code)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Industrial -->
<h1 class="text-2xl" style="font-family: var(--font-industrial)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Rounded Sans -->
<h1 class="text-2xl" style="font-family: var(--font-rounded-sans)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Slab Serif -->
<h1 class="text-2xl" style="font-family: var(--font-slab-serif)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Antique -->
<h1 class="text-2xl" style="font-family: var(--font-antique)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Didone -->
<h1 class="text-2xl" style="font-family: var(--font-didone)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<!-- Handwritten -->
<h1 class="text-2xl" style="font-family: var(--font-handwritten)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<%# System Ui %>
<h1 class="text-2xl" style="font-family: var(--font-system-ui)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Transational %>
<h1 class="text-2xl" style="font-family: var(--font-transitional)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Old Style %>
<h1 class="text-2xl" style="font-family: var(--font-old-style)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Humanist %>
<h1 class="text-2xl" style="font-family: var(--font-humanist)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Geometric Humanist %>
<h1 class="text-2xl" style="font-family: var(--font-geometric-humanist)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Classical Humanist %>
<h1 class="text-2xl" style="font-family: var(--font-classical-humanist)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Neo Grotesque %>
<h1 class="text-2xl" style="font-family: var(--font-neo-grotesque)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Monospace Slab Serif %>
<h1 class="text-2xl" style="font-family: var(--font-monospace-slab-serif)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Monospace Code %>
<h1 class="text-2xl" style="font-family: var(--font-monospace-code)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Industrial %>
<h1 class="text-2xl" style="font-family: var(--font-industrial)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Rounded Sans %>
<h1 class="text-2xl" style="font-family: var(--font-rounded-sans)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Slab Serif %>
<h1 class="text-2xl" style="font-family: var(--font-slab-serif)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Antique %>
<h1 class="text-2xl" style="font-family: var(--font-antique)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Didone %>
<h1 class="text-2xl" style="font-family: var(--font-didone)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
<%# Handwritten %>
<h1 class="text-2xl" style="font-family: var(--font-handwritten)">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
</h1>
CSS is not required or multiple files are needed, check the notes.
Java Script is not required or multiple files are needed, check the notes.

These fonts are available as CSS variables at typography.css.