-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathtypespecimen.html
113 lines (113 loc) · 9.55 KB
/
typespecimen.html
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
---
layout: default
title: Type Specimen
description: Typography in use for mikemai.net.
color-scheme-switch: true
---
<header class="c-{{ site.ns }}-plane c-{{ site.ns }}-plane--xlarge-width c-{{ site.ns }}-plane--full-height c-{{ site.ns }}-plane--h-inset-small c-{{ site.ns }}-plane--v-inset-xlarge">
<div class="c-{{ site.ns }}-plane-deck c-{{ site.ns }}-plane-deck--upper">
<div class="c-{{ site.ns }}-plane-deck__content">
<div class="c-{{ site.ns }}-plane-deck__content__item c-{{ site.ns }}-plane-deck__content__item--end">
<label for="color-scheme" class="cs-{{ site.ns }}-switch">
<span class="cs-{{ site.ns }}-switch__text">
Switch color scheme
</span>
</label>
</div>
</div>
</div>
<div class="c-{{ site.ns }}-plane-cabin">
<div class="u-{{ site.ns }}-text-align-center">
<h1 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--display" style="word-spacing: 0.0625ch;" aria-label="mikemai.net type specimen">
<div aria-hidden="true">
<span class="c-{{ site.ns }}-text c-{{ site.ns }}-text--trendy c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--xsmall">mikemai.net</span>
<span class="u-{{ site.ns }}-white-space-nowrap"><span style="letter-spacing: 0.012em;">t</span>ype</span>
<span class="u-{{ site.ns }}-white-space-nowrap">speci<span class="u-{{ site.ns }}-white-space-nowrap"><span style="display: inline-flex; overflow: hidden; inline-size: 0.752ch; margin-inline-end: -0.104ch;">m</span>en</span></span>
</div>
</h1>
<h2 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--large" aria-label="Typographic styles of Mike Mai's personal site"><div aria-hidden="true">Typographic styles of <em>Mike Mai’s</em> personal site</div></h2>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--large">
<a class="c-{{ site.ns }}-button" href="#main-content">Explore the typefaces</a>
</p>
</div>
</div>
</header>
<main class="c-{{ site.ns }}-plane c-{{ site.ns }}-plane--xlarge-width c-{{ site.ns }}-plane--full-height c-{{ site.ns }}-plane--h-inset-small c-{{ site.ns }}-plane--v-inset-xlarge" id="main-content">
<article class="c-{{ site.ns }}-plane-cabin">
<div class="c-{{ site.ns }}-accordion is-comfortable">
<details class="c-{{ site.ns }}-accordion__item" open>
<summary class="c-{{ site.ns }}-accordion__trigger">
Bungee Inline <span class="c-{{ site.ns }}-accordion__trigger__icon" aria-hidden="true"></span>
</summary>
<div class="c-{{ site.ns }}-accordion__content">
<div class="c-{{ site.ns }}-list c-{{ site.ns }}-list--bare lay-horizontal">
<div class="c-{{ site.ns }}-list__item">
<h3 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--xsmall" aria-label="Bungee Inline Character Set">Character Set</h3>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--display" style="word-break: break-all; hyphens: none; -webkit-hyphens: none;">
ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+-*/=!@#$%&?
</p>
</div>
<div class="c-{{ site.ns }}-list__item">
<h3 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--xsmall" aria-label="About Bungee Inline">About</h3>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">Bungee Inline is designed by <em>David Jonathan Ross</em>. Quoted from his website: <q>Making Bungee has been a great way for me to play with emerging font technologies. I sell most of my fonts commercially, but I believe Bungee is well-suited to a libre license because of its focus on emerging features like chromatic layers and vertical writing.</q></p>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">I chose this typeface for headings because its boldness and playfulness reflect my personality.</p>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block"><a class="c-{{ site.ns }}-link" href="https://fonts.google.com/specimen/Bungee+Inline"><span class="u-{{ site.ns }}-visuallyhidden">Bungee Inline is</span>Available on Google Fonts</a> »</p>
</div>
</div>
</div>
</details>
<details class="c-{{ site.ns }}-accordion__item" open>
<summary class="c-{{ site.ns }}-accordion__trigger">
Spectral <span class="c-{{ site.ns }}-accordion__trigger__icon" aria-hidden="true"></span>
</summary>
<div class="c-{{ site.ns }}-accordion__content">
<div class="c-{{ site.ns }}-list c-{{ site.ns }}-list--bare lay-horizontal">
<div class="c-{{ site.ns }}-list__item">
<h3 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--xsmall" aria-label="Spectral Character Set">Character Set</h3>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--display" style="line-height: var(--mnml-line-height-xxtight); word-break: break-all; hyphens: none; -webkit-hyphens: none;">
<strong>abcdefghijklmnopqrstuvwxyz0123456789+-*/=!@#$%&?</strong>
</p>
</div>
<div class="c-{{ site.ns }}-list__item">
<h3 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--xsmall" aria-label="About Spectral">About</h3>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">Spectral is designed by Production Type—a Paris-based digital type design agency. Quoted from Google: <q>Spectral is a new and versatile serif face available in seven weights of roman and italic, with small caps. Spectral offers an efficient, beautiful design that’s intended primarily for text-rich, screen-first environments and long-form reading.</q></p>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">I chose this typeface for body text because of its legibility and stark contrast to my heading typeface. It shines in long form content where my writing may get a bit more serious.</p>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block"><a class="c-{{ site.ns }}-link" href="https://fonts.google.com/specimen/Spectral"><span class="u-{{ site.ns }}-visuallyhidden">Spectral is</span>Available on Google Fonts</a> »</p>
</div>
</div>
</div>
</details>
<details class="c-{{ site.ns }}-accordion__item" open>
<summary class="c-{{ site.ns }}-accordion__trigger">
Alegreya Sans SC <span class="c-{{ site.ns }}-accordion__trigger__icon" aria-hidden="true"></span>
</summary>
<div class="c-{{ site.ns }}-accordion__content">
<div class="c-{{ site.ns }}-list c-{{ site.ns }}-list--bare lay-horizontal">
<div class="c-{{ site.ns }}-list__item">
<h3 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--xsmall" aria-label="Alegreya Sans SC Character Set">Character Set</h3>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--lede" style="font-size: clamp(var(--mnml-type-size-xxxlarge-min),6vw,var(--mnml-type-size-xxxlarge-max)); line-height: var(--mnml-line-height-xxtight); word-break: break-all; hyphens: none; -webkit-hyphens: none;">
abcdefghijklmnopqrstuvwxyz0123456789+-*/=!@#$%&?
</p>
</div>
<div class="c-{{ site.ns }}-list__item">
<h3 class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--heading c-{{ site.ns }}-text--xsmall" aria-label="About Alegreya Sans SC">About</h3>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">Alegreya Sans SC is designed by <em>Juan Pablo del Peral</em> for Huerta Tipográfica. Quoted from Google: <q>Alegreya Sans SC is a Small Caps companion family to Alegreya Sans, a humanist sans serif family with a calligraphic feeling that conveys a dynamic and varied rhythm. This gives a pleasant feeling to readers of long texts.</q></p>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block">I chose this typeface for lede text, pullquotes, and buttons. It strikes a balance between my headings and body text due to its boldness and legibility.</p>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block"><a class="c-{{ site.ns }}-link" href="https://fonts.google.com/specimen/Alegreya+Sans+SC"><span class="u-{{ site.ns }}-visuallyhidden">Alegreya Sans SC is</span>Available on Google Fonts</a> »</p>
</div>
</div>
</div>
</details>
</div>
</article>
</main>
<footer class="c-{{ site.ns }}-plane c-{{ site.ns }}-plane--xlarge-width c-{{ site.ns }}-plane--full-height c-{{ site.ns }}-plane--h-inset-small c-{{ site.ns }}-plane--v-inset-xlarge">
<div class="c-{{ site.ns }}-plane-cabin">
<div class="u-{{ site.ns }}-text-align-center">
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--large">See the typefaces in action on my personal site.</p>
<p class="c-{{ site.ns }}-text c-{{ site.ns }}-text--block c-{{ site.ns }}-text--large">
<a class="c-{{ site.ns }}-button" href="{{ site.url }}">mikemai.net</a>
</p>
</div>
</div>
</footer>