24 lines
985 B
HTML
24 lines
985 B
HTML
|
<!doctype html>
|
||
|
|
<!-- @dsCard group="Type" name="Type · Display" subtitle="PlexSans 300/400 · -.035em tracking" viewport="700x200" -->
|
||
|
|
<html><head>
|
||
|
|
<meta charset="utf-8"><title>Display Type</title>
|
||
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
||
|
|
<style>
|
||
|
|
body { padding: 32px; background: var(--paper); }
|
||
|
|
.row { display: flex; align-items: baseline; gap: 24px; margin-bottom: 18px; }
|
||
|
|
.row .label { width: 80px; flex: none; }
|
||
|
|
.row .spec { color: var(--fg-3); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em; margin-left: auto; flex: none; }
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<div class="row">
|
||
|
|
<span class="label">Display 1</span>
|
||
|
|
<span class="display-1">try($idea)</span>
|
||
|
|
<span class="spec">system-sans 300 · 96 / .95 · -.035em</span>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<span class="label">Display 2</span>
|
||
|
|
<span class="display-2">why? why not!</span>
|
||
|
|
<span class="spec">system-sans 400 · 64 / 1.0 · -.02em</span>
|
||
|
|
</div>
|
||
|
|
</body></html>
|