char/iocgn-mono

iosevka variant inspired by Simple Köln-Bonn

git clone https://git.t4t.associates/char/iocgn-mono

Charlotte Somadd some symbols and arrows and stuff925b071

main
branchesmainall refs →
3.9 KiB83 linesraw
1<!doctype html>
2<html lang="en">
3<meta charset="utf-8">
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<title>iocgn Mono — continuous weight</title>
6<style>
7@font-face {
8  font-family: iocgn;
9  src: url("../WOFF2/iocgnMono-Variable.woff2") format("woff2");
10  font-weight: 200 800;
11}
12@font-face {
13  font-family: iocgn;
14  src: url("../WOFF2/iocgnMono-Variable.woff2") format("woff2");
15  font-weight: 200 800;
16  font-style: italic;
17}
18:root { color-scheme: light dark; --weight: 550; }
19body { max-width: 1100px; margin: 3rem auto; padding: 0 2rem; font: 16px system-ui; }
20h1 { font-size: 1.5rem; font-weight: 500; }
21.controls { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 2rem 0; }
22input { width: min(550px, 65vw); }
23output { min-width: 4rem; font-variant-numeric: tabular-nums; }
24pre, .letters { font-family: iocgn, monospace; font-weight: var(--weight); font-synthesis: none; }
25.letters { font-size: 48px; line-height: 1.5; overflow-wrap: anywhere; }
26pre { font-size: 24px; line-height: 1.6; overflow-x: auto; }
27.small { font-size: 18px; }
28.terminal { font-size: 18px; line-height: 1.25; letter-spacing: 0; }
29</style>
30<h1>iocgn Mono / continuous weight 200–800</h1>
31<p>ASCII design proof. Fixed 500-unit cells; no kerning or ligatures.</p>
32<div class="controls">
33  <label for="weight">Weight</label>
34  <input id="weight" type="range" min="200" max="800" step="0.25" value="550">
35  <output for="weight" id="value">550</output>
36  <label><input id="oblique" type="checkbox" style="width: auto"> 10° Oblique</label>
37</div>
38<div class="letters" contenteditable="true" spellcheck="false">Hno mWw r g 0O1Il| '"`<br>comment format com rma minimum</div>
39<pre contenteditable="true" spellcheck="false">fn format_rows(items: &amp;[(&amp;str, u32)]) -&gt; Vec&lt;String&gt; {
40    items.iter().enumerate().map(|(i, (name, count))| {
41        let label = format!("{i:02}: {name}");
42        if *count &gt; 0 &amp;&amp; !name.is_empty() {
43            format!("{label:&lt;16} = {count:&gt;4}")
44        } else {
45            String::from("... waiting ...")
46        }
47    }).collect()
48}
49
50const row = `${name}: ${count}`; // + - = * &lt; &gt; ()[]{}
51let text = "0O1Il| 8B6G9g aopqnr mWw []{}() =&gt; != &amp;&amp;";</pre>
52<pre class="small" contenteditable="true" spellcheck="false">com rma  comment format minimum  mmmm WWWW wwww
53'quoted'  "double"  `grave`  @#%&amp;  ()[]{}|  + - = * &lt; &gt;</pre>
54<h2>Terminal symbols</h2>
55<pre class="terminal" contenteditable="true" spellcheck="false">┌──────────────────────────┐
56│  ✓ complete  ✗ failed    │
57│  ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙     │
58├──────────────────────────┤
59│  ░▒▓█ ▏▎▍▌▋▊▉            │
60│  ⠋ ⠙ ⠹ ⠸ ⠼ ⠴ ⠦ ⠧ ⠇ ⠏     │
61└──────────────────────────┘
62╭──────────────────────────╮
63│  ‐ ‒ – — ― − … ‘ ’ “ ”   │
64│  ✓ ✔ ✕ ✖ ✗ ✘ ☐ ☑ ☒ ★ ☆   │
65│  ■ □ ▪ ▫ ▲ △ ▶ ▷ ▼ ▽     │
66│  ◀ ◁ ◆ ◇ ○ ◉ ◎ ● ◐ ◑     │
67│  ↩ ↪ ↰ ↱ ↲ ↳ ↴ ↵ ↺ ↻     │
68│  ⇐ ⇑ ⇒ ⇓ ⇔ ⇤ ⇥ ➜ ❮ ❯ �   │
69╰──────────────────────────╯</pre>
70<script>
71const slider = document.querySelector('#weight');
72document.querySelector('#oblique').addEventListener('change', event => {
73  for (const sample of document.querySelectorAll('pre, .letters')) {
74    sample.style.fontStyle = event.target.checked ? 'italic' : 'normal';
75  }
76});
77const value = document.querySelector('#value');
78slider.addEventListener('input', () => {
79  value.value = slider.value;
80  document.documentElement.style.setProperty('--weight', slider.value);
81});
82</script>
83</html>