Adaa Sans Serif 1.0.0HEADv1.0.0main

8 files changed, 350 insertions, 0 deletions

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..6a1ba95
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+source/
+.DS_Store
diff --git a/OFL.txt b/OFL.txt
new file mode 100644
index 0000000..37b47ce
--- /dev/null
+++ b/OFL.txt
@@ -0,0 +1,96 @@
+Copyright 2021 The Hanken Grotesk Project Authors (https://github.com/marcologous/hanken-grotesk)
+Copyright 2024 The Geist Project Authors (https://github.com/vercel/geist-font)
+Copyright 2026 adaa, with Reserved Font Name "Adaa Sans Serif".
+
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6240d45
--- /dev/null
+++ b/README.md
@@ -0,0 +1,36 @@
+# Adaa Sans Serif
+
+A variable sans serif typeface with a weight axis from 100 (Thin) to 900 (Black), in upright and italic.
+
+## Files
+
+| File | Use |
+|---|---|
+| `fonts/AdaaSansSerif[wght].ttf` | Desktop, upright |
+| `fonts/AdaaSansSerif-Italic[wght].ttf` | Desktop, italic |
+| `fonts/webfonts/AdaaSansSerif[wght].woff2` | Web, upright |
+| `fonts/webfonts/AdaaSansSerif-Italic[wght].woff2` | Web, italic |
+
+Open `preview.html` in a browser to try the typeface.
+
+## Web usage
+
+```css
+@font-face {
+  font-family: "Adaa Sans Serif";
+  src: url("AdaaSansSerif[wght].woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Adaa Sans Serif";
+  src: url("AdaaSansSerif-Italic[wght].woff2") format("woff2");
+  font-weight: 100 900;
+  font-style: italic;
+}
+```
+
+## License
+
+Adaa Sans Serif is licensed under the [SIL Open Font License 1.1](OFL.txt), with Reserved Font Name "Adaa Sans Serif".
diff --git a/fonts/AdaaSansSerif-Italic[wght].ttf b/fonts/AdaaSansSerif-Italic[wght].ttf
new file mode 100644
index 0000000..3eba45b
--- /dev/null
+++ b/fonts/AdaaSansSerif-Italic[wght].ttf
diff --git a/fonts/AdaaSansSerif[wght].ttf b/fonts/AdaaSansSerif[wght].ttf
new file mode 100644
index 0000000..a1b8917
--- /dev/null
+++ b/fonts/AdaaSansSerif[wght].ttf
diff --git a/fonts/webfonts/AdaaSansSerif-Italic[wght].woff2 b/fonts/webfonts/AdaaSansSerif-Italic[wght].woff2
new file mode 100644
index 0000000..7f4f8c4
--- /dev/null
+++ b/fonts/webfonts/AdaaSansSerif-Italic[wght].woff2
diff --git a/fonts/webfonts/AdaaSansSerif[wght].woff2 b/fonts/webfonts/AdaaSansSerif[wght].woff2
new file mode 100644
index 0000000..b399044
--- /dev/null
+++ b/fonts/webfonts/AdaaSansSerif[wght].woff2
diff --git a/preview.html b/preview.html
new file mode 100644
index 0000000..d7edb4a
--- /dev/null
+++ b/preview.html
@@ -0,0 +1,216 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Adaa Sans Serif</title>
+<style>
+  @font-face {
+    font-family: "Adaa Sans Serif";
+    src: url("fonts/webfonts/AdaaSansSerif[wght].woff2") format("woff2-variations"),
+         url("fonts/AdaaSansSerif[wght].ttf") format("truetype-variations");
+    font-weight: 100 900;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: "Adaa Sans Serif";
+    src: url("fonts/webfonts/AdaaSansSerif-Italic[wght].woff2") format("woff2-variations"),
+         url("fonts/AdaaSansSerif-Italic[wght].ttf") format("truetype-variations");
+    font-weight: 100 900;
+    font-style: italic;
+  }
+
+  :root {
+    --bg: #f6f5f1;
+    --fg: #111110;
+    --muted: #77756e;
+    --line: #dcdad3;
+    --accent: #3b5bdb;
+    --wght: 400;
+    --size: 96px;
+    --style: normal;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+      --bg: #121211; --fg: #efede6; --muted: #8d8b84; --line: #2b2a27; --accent: #8ea4ff;
+    }
+  }
+  :root[data-theme="dark"] {
+    --bg: #121211; --fg: #efede6; --muted: #8d8b84; --line: #2b2a27; --accent: #8ea4ff;
+  }
+
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    background: var(--bg);
+    color: var(--fg);
+    font-family: "Adaa Sans Serif", system-ui, sans-serif;
+    font-weight: 400;
+  }
+  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px 96px; }
+
+  header {
+    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
+    padding: 28px 0 20px; border-bottom: 1px solid var(--line);
+  }
+  header h1 { margin: 0; font-size: 20px; font-weight: 600; }
+  header span { color: var(--muted); font-size: 14px; }
+
+  .controls {
+    position: sticky; top: 0; z-index: 2;
+    display: grid; grid-template-columns: 2fr 1fr auto auto; gap: 24px; align-items: center;
+    padding: 16px 0; background: var(--bg); border-bottom: 1px solid var(--line);
+  }
+  .control { display: grid; gap: 6px; min-width: 0; }
+  .control label { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
+  .control output { color: var(--fg); font-variant-numeric: tabular-nums; }
+  input[type="range"] { width: 100%; accent-color: var(--accent); }
+  .toggle {
+    font: inherit; font-size: 14px; color: var(--fg); background: none; cursor: pointer;
+    border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; white-space: nowrap;
+  }
+  .toggle[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
+
+  .live {
+    font-weight: var(--wght); font-style: var(--style); font-size: var(--size);
+    line-height: 1.05; letter-spacing: -0.02em; outline: none;
+    padding: 48px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere;
+  }
+  .live:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); }
+
+  h2 { font-size: 13px; font-weight: 500; color: var(--muted); margin: 40px 0 16px; letter-spacing: 0.02em; }
+
+  .waterfall .row {
+    display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: baseline;
+    padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer;
+  }
+  .waterfall .row:hover .sample { color: var(--accent); }
+  .waterfall .meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
+  .waterfall .sample {
+    font-size: 40px; font-style: var(--style); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+
+  .para { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
+  .para p { margin: 0; font-weight: var(--wght); font-style: var(--style); line-height: 1.5; }
+  .para .s { font-size: 15px; } .para .m { font-size: 19px; } .para .l { font-size: 26px; line-height: 1.3; }
+
+  .glyphs {
+    display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
+    border-top: 1px solid var(--line); border-left: 1px solid var(--line);
+  }
+  .glyphs div {
+    aspect-ratio: 1; display: grid; place-items: center;
+    border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
+    font-size: 32px; font-weight: var(--wght); font-style: var(--style);
+  }
+
+  @media (max-width: 720px) {
+    .controls { grid-template-columns: 1fr 1fr; gap: 16px; }
+    .control.weight { grid-column: 1 / -1; }
+    .waterfall .row { grid-template-columns: 1fr; gap: 2px; }
+    .waterfall .sample { font-size: 28px; }
+  }
+</style>
+</head>
+<body>
+<div class="wrap">
+  <header>
+    <h1>Adaa Sans Serif</h1>
+    <span>Variable · wght 100–900 · Roman &amp; Italic</span>
+  </header>
+
+  <div class="controls">
+    <div class="control weight">
+      <label for="wght">Weight <output id="wghtOut">400 Regular</output></label>
+      <input id="wght" type="range" min="100" max="900" step="1" value="400">
+    </div>
+    <div class="control">
+      <label for="size">Size <output id="sizeOut">96px</output></label>
+      <input id="size" type="range" min="16" max="240" step="1" value="96">
+    </div>
+    <button class="toggle" id="italic" aria-pressed="false">Italic</button>
+    <button class="toggle" id="animate" aria-pressed="false">Animate</button>
+  </div>
+
+  <div class="live" contenteditable="true" spellcheck="false">Sphinx of black quartz, judge my vow.</div>
+
+  <h2>Waterfall · click a row to set the weight</h2>
+  <div class="waterfall" id="waterfall"></div>
+
+  <h2>Text</h2>
+  <div class="para">
+    <p class="s">Typography is the craft of endowing human language with a durable visual form. A variable font holds every weight in one file, so the text can move smoothly from a hairline to a heavy black without a single extra request.</p>
+    <p class="m">The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. Æ Ø Å æ ø å — 0123456789 (€ $ £ %) &amp; @ ?!</p>
+    <p class="l">Hamburgefonstiv 1234567890 Blåbærsyltetøy</p>
+  </div>
+
+  <h2>Glyphs</h2>
+  <div class="glyphs" id="glyphs"></div>
+</div>
+
+<script>
+  const root = document.documentElement;
+  const wght = document.getElementById("wght");
+  const size = document.getElementById("size");
+  const italic = document.getElementById("italic");
+  const animate = document.getElementById("animate");
+  const names = [[100, "Thin"], [200, "ExtraLight"], [300, "Light"], [400, "Regular"], [500, "Medium"],
+                 [600, "SemiBold"], [700, "Bold"], [800, "ExtraBold"], [900, "Black"]];
+
+  function setWeight(v) {
+    v = Math.round(v);
+    wght.value = v;
+    root.style.setProperty("--wght", v);
+    const named = names.find(([w]) => w === v);
+    document.getElementById("wghtOut").textContent = named ? `${v} ${named[1]}` : v;
+  }
+  wght.addEventListener("input", () => { stopAnimation(); setWeight(+wght.value); });
+
+  size.addEventListener("input", () => {
+    root.style.setProperty("--size", size.value + "px");
+    document.getElementById("sizeOut").textContent = size.value + "px";
+  });
+
+  italic.addEventListener("click", () => {
+    const on = italic.getAttribute("aria-pressed") !== "true";
+    italic.setAttribute("aria-pressed", on);
+    root.style.setProperty("--style", on ? "italic" : "normal");
+  });
+
+  let raf = null;
+  function stopAnimation() {
+    if (raf) cancelAnimationFrame(raf);
+    raf = null;
+    animate.setAttribute("aria-pressed", "false");
+  }
+  animate.addEventListener("click", () => {
+    if (raf) return stopAnimation();
+    animate.setAttribute("aria-pressed", "true");
+    const start = performance.now();
+    const loop = t => {
+      const phase = (1 - Math.cos((t - start) / 1400)) / 2;
+      setWeight(100 + phase * 800);
+      raf = requestAnimationFrame(loop);
+    };
+    raf = requestAnimationFrame(loop);
+  });
+
+  const wf = document.getElementById("waterfall");
+  for (const [w, n] of names) {
+    const row = document.createElement("div");
+    row.className = "row";
+    row.innerHTML = `<span class="meta">${w} ${n}</span><span class="sample" style="font-weight:${w}">Adaa Sans Serif — Grumpy wizards make toxic brew</span>`;
+    row.addEventListener("click", () => { stopAnimation(); setWeight(w); });
+    wf.appendChild(row);
+  }
+
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzÆØÅæøåÄÖÜäöüß0123456789&@#%$€£¥?!¿¡.,:;'\"()[]{}/\\*+−×÷=≠±<>≤≥→←↑↓•©®™§¶";
+  const g = document.getElementById("glyphs");
+  for (const c of chars) {
+    const d = document.createElement("div");
+    d.textContent = c;
+    g.appendChild(d);
+  }
+</script>
+</body>
+</html>