Typography

New Black sets every word written for people: headlines, body text, buttons and navigation. Geist Mono has two jobs: it sets what a machine writes or reads back, such as hashes, paths, dates, versions and code, and it sets the small labels and notes that organise a page. No other typeface is downloaded.

How they load.

1. 01

   From this site, through Astro

   Both families are files in this repository, registered with the font API of Astro through its local provider. Nothing is fetched from a font service, and the content security policy accepts fonts from this site only.

   const nb = (w) => ({ weight: w, style: 'normal', src: [`./src/assets/fonts/NewBlack-${w}.woff2`] });
   const gm = (w) => ({ weight: w, style: 'normal', src: [`./src/assets/fonts/GeistMono-${w}.woff2`] });
   
   fonts: [
     {
       provider: fontProviders.local(),
       name: 'New Black',
       cssVariable: '--font-newblack',
       options: { variants: [nb(400), nb(500), nb(600), nb(700)] },
     },
     {
       provider: fontProviders.local(),
       name: 'Geist Mono',
       cssVariable: '--font-geistmono',
       // Varsayilan yedek sans-serif: uretilen degisken Arial ve sans-serif
       // ile bitiyor, tokenin ui-monospace / monospace yedekleri hic
       // erisilmiyordu. Dosya gelmezse metin yine esit genislikli dizilir.
       fallbacks: ['ui-monospace', 'monospace'],
       // optional: ilk boyamaya yetismeyen dosya sonradan yerine konmaz, bu
       // yuzden Geist Mono duzeni hic kaydiramaz. Olcuye gore uretilen yedek
       // yuz Courier New'u local() ile ister; macOS ve Windows'ta var, Linux
       // ve Android'de yok. Orada ilk ekrani genel monospace yuz dizer, swap
       // ile Geist Mono gelince ana sayfa girisi kayardi: CI'daki mobil
       // Lighthouse denetimi bu kaymayi 0.23 olctu. Iki agirlik da head'de
       // onden yuklenir; dosya normalde ilk boyamaya yetisir.
       display: 'optional',
       options: { variants: [gm(400), gm(500)] },
     },
   ],

2. 02

   One variable per family

   Astro exposes each family as a CSS variable and the design tokens wrap it, so components read the token, never the family name. Each variable Astro writes already ends in fallback faces sized to match and a generic family: sans-serif for New Black and, as its registration asks, ui-monospace and monospace for Geist Mono. If Geist Mono is not ready when the page is first drawn, or fails to load, machine text is still set in a face of fixed width. The names the tokens list after the variable are never reached.

   --font-sans: var(--font-newblack), system-ui, sans-serif;
   --font-mono: var(--font-geistmono), ui-monospace, SFMono-Regular, monospace;

   The whole token file is published as tokens.css.

3. 03

   Preloaded by decision

   New Black 400 and 700 are preloaded: they set the body and the headline of the first screen. The 500 and 600 weights are on that screen too, in links and buttons, but holding them back by 1500 milliseconds changed layout shift by only 0.002, so they load when first used. Geist Mono 400 and 500 are preloaded too, so they are normally ready when the page is first drawn; the next step says why that matters.

   <Font cssVariable="--font-newblack" preload={[{ weight: 400 }, { weight: 700 }]} />
   <Font cssVariable="--font-geistmono" preload={[{ weight: 400 }, { weight: 500 }]} />

4. 04

   Readable before the files arrive

   For every weight of both families Astro generates a fallback face from a local system font, scaled to the metrics of the real face, so text appears at once. New Black's @font-face rules declare font-display: swap: the real file replaces the fallback when it arrives, and the measurement in the previous step shows how little that moves. The fallback of Geist Mono asks for Courier New, which Linux and Android do not have. There the generic monospace face set the first screen, and with font-display: swap the arrival of Geist Mono caused a layout shift of 0.23 in the mobile Lighthouse audit of the home page. The rules of Geist Mono therefore declare font-display: optional: a file that is not ready when the page is first drawn is never swapped in, and that page keeps the fallback.

New Black 400 and 700 also exist as TTF files. They are read only while the site is built, to draw the share image of each page, and browsers never download them. The share cards are covered on the Logo and name page.

• Fonts come from this site and nowhere else.

  WhyApart from the bot check on the contact form, the site loads nothing from other hosts, and a font served from elsewhere would add a request to every page. The test reads every built page and stylesheet: none links a font host, no @font-face points elsewhere and every content security policy accepts fonts from this site only.

  TestEnforced by a test on every change.

• Every shipped font file is a real WOFF2 of a sensible size.

  WhyA truncated file, or one that was never cut down, fails quietly in the browser. The test checks the signature and the size of all 6 files.

  TestEnforced by a test on every change.

• Only New Black 400 and 700 and Geist Mono 400 and 500 are preloaded.

  WhyThe New Black files cover the body and the headline. Its other weights swap in behind fallbacks sized to match, so preloading them would cost an early request and save almost no movement. Geist Mono declares font-display: optional, so a late file is not used at all on that page; preloading both of its weights makes them ready in time on a normal connection.

  TestEnforced by a test on every change.

• Components name the token, never the family.

  WhyComponent styles read the two font tokens, so changing a face is one edit. The family names appear only where the fonts are registered and in the code that draws the share images. The test reads every font-family declaration, and every font shorthand, in the style blocks of the site.

  TestEnforced by a test on every change.

New Black ships in weights 400, 500, 600 and 700 and Geist Mono in 400 and 500. Each weight has a job on the site. The lines below are sentences from this site, set in the weight the site uses for them.

Emphasis

Neither family ships an italic. The site does not style strong text in long-form copy: the browser sets it one step bolder, which New Black draws at 700. Some imported research articles still contain italic, and with no italic file the browser slants New Black itself. That slant is accepted for now; no rule asks for it or against it.

Type sizes are not tokens. Each component declares its own size, line height and tracking in its scoped style block. These are the main roles in use, copied from those blocks; a unit test fails the moment a value here stops matching its file. Smaller labels, from badges to the text inside diagrams, sit below this scale and are not listed.

Fluid headlines

Headlines grow with the window through clamp(): a smallest size, a share of the viewport width and a largest size. The table gives the window width at which each one starts to grow and the width at which it stops.

On phones the home hero sets smaller sizes of its own. Where max-width: 600px matches, its headline is 36px, below the floor of its clamp(), and its lead 16px, so that the text fits the pinned first screen; where max-height: 700px matches as well, they are 32px and 15px.

Size follows the outline.

Each page has one h1, at the top of its hero or layout. Sections open with an h2 and divide with h3. Visual size steps down with the level, and no level is skipped to get a smaller look.

• Every value in this scale matches its source file.

  WhyThere is no type token to point at, so the scale points at the components. If a component changes, the test fails until this page changes with it.

  TestEnforced by a test on every change.

• Heading levels never skip inside the main content.

  WhyA skipped level breaks the outline that screen reader users move through. The build fails on any page where, say, an h2 is followed by an h4.

  TestEnforced by a test on every change.

• Headlines that make a statement are sentences, in sentence case.

  WhySuch a headline states something and ends with a full stop. Research articles and legal texts keep their own titles; item titles and labels carry no full stop.

  ReviewKept by review, not by a test.

New Black is set tight, and tighter as it grows. Geist Mono is never tightened; when it is set in capitals it is opened up. On web pages, capitals and open tracking belong to Geist Mono alone.

• In the scale, tracking tightens as size grows.

  WhyLarge letters at their default spacing look loose, so the larger the size, the more spacing is taken back. The test reads every New Black role above and fails if a larger one is tracked looser than a smaller one.

  TestEnforced by a test on every change.

• On web pages, capitals and open tracking appear only in Geist Mono.

  WhyLabels in capitals need open spacing to stay legible at 11px, and labels are set in Geist Mono. New Black stays in sentence case, at zero or negative tracking. The share images drawn at build time are the exception: they load only New Black, and their kicker is set in it, in capitals, tracked 0.08em.

  TestEnforced by a test on every change.

• Capitals come from CSS, not from the text.

  WhyDictionaries hold labels in sentence case and text-transform raises them, so the browser applies the casing rules of the declared language.

  ReviewKept by review, not by a test.

Geist Mono marks text that a machine wrote or will read back: a hash, a path, a date, a version, a line of code. Every character in it is the same width, so values line up in columns and a long string reads as one unit. It also sets the small labels and notes that organise a page.

Figures

New Black draws proportional figures: each digit is as wide as its shape needs, so digits in a column do not line up. Geist Mono gives every digit the same width. Where values must line up column by column, as in the number columns of the tables on this page and in the legal index, the site sets them in Geist Mono.

• Inline machine strings may break anywhere; code blocks scroll.

  WhyA hash or a path has no spaces to wrap at, so inline code in long-form text sets overflow-wrap: anywhere. A code block keeps its lines whole and scrolls inside its own box.

  TestEnforced by a test on every change.

• Mono carries values and labels, not emphasis.

  WhyGeist Mono sets machine text and the small labels and notes that organise a page. A sentence meant to carry weight is set in New Black; setting it in mono to look technical adds noise without adding a fact.

  ReviewKept by review, not by a test.

Line length is set in ch, the width of the digit zero in the current font. Headlines are held short so they break into even lines; long-form text stops at 68ch.

In New Black the zero is wide: 0.64 em at weight 400 and 0.644 em at 700, against 0.6 em in Geist Mono and 0.546 em for an average lowercase letter. A New Black ch is therefore wider than a typical letter: a 68ch column of 16.5px text is about 718 pixels wide and holds about 80 average lowercase letters.

Balanced headlines

Headline rules set text-wrap: balance, so the browser evens out their lines instead of leaving a single word on the last one. Reading text keeps normal wrapping: balancing is meant for a few lines, not a paragraph.

• Long-form text stops at 68ch.

  WhyOn long lines the eye loses the start of the next one. A New Black ch is wider than its letters, so a 68ch line of 16.5px text holds about 80 average lowercase letters. Research articles and legal documents share the same column.

  TestEnforced by a test on every change.

• Headlines balance their lines; card titles are the one exception.

  WhyAn even shape reads as one statement; a lone last word reads as an accident. The test lists every headline role in the scale and fails if one neither balances nor is named as an exception.

  TestEnforced by a test on every change.

• When text must fit an exact box, size the box in pixels.

  WhyA New Black ch is a wide zero. A description box on the home page, once sized in ch, ran past the frame it sat in; it is now sized in pixels.

  ReviewKept by review, not by a test.

The site is written by hand in English and Turkish, at the same addresses under /tr. Type has to hold in both: every page declares its language, and the English phrases the Turkish home page keeps are marked as English, so that the browser applies the right casing and a screen reader the right voice.

Where the language is declared.

• Every page declares its language on the html element.

  WhyEnglish pages are lang="en" at the root of the site; Turkish pages are lang="tr" at /tr and below it. The test reads every built page.

  TestEnforced by a test on every change.

• On Turkish pages, the tagline and framework names that stay English carry lang="en".

  WhyThe tagline on the home page, the framework names in its trust strip and the framework names that keep their English form in the lists on the trust and solution pages stay in English. Marking them keeps their capitals and their pronunciation English. Framework names with a Turkish form are written in Turkish and carry no mark.

  TestEnforced by a test on every change.

• Research articles stay in English, and the Turkish research list says so.

  WhyOn a Turkish route the page frame is Turkish and the article body sits in an article element with lang="en". The category, the date, the contents title and the links below the article stay in Turkish and carry lang="tr", so the category is capitalised by Turkish rules. Each entry in the Turkish list carries a badge that names the language.

  TestEnforced by a test on every change.

• A Turkish document on an English route says it is Turkish.

  WhyUntil a legal text has an English version, the English route shows the Turkish body with lang="tr" and a note above it. The document details, the notes and the link back to the index stay in English and carry lang="en".

  TestEnforced by a test on every change.

Letters the fonts cover

The New Black files are cut down to a subset that includes every Turkish letter. A few symbols are left out; this page names them instead of drawing them, and where the site uses one, such as the arrow between two figures, the browser draws it from a system font. The table is read from the shipped files when the page is built.

The em dash is not used on the site in any case: a test rejects it in the site dictionaries and a build gate on every built page.

• The New Black subset covers every Turkish letter.

  WhyTurkish text must never fall back to another face in the middle of a word. The test reads the character map of each shipped weight.

  TestEnforced by a test on every change.

Figures and dates

Figures in copy are written by hand in each dictionary, in the convention of that language. Research dates are formatted when the site is built, with the en-GB and tr-TR locales: day first in both, with slashes in English and dots in Turkish. Legal document versions and the Last changed line of these pages are written year first, as ISO 8601.

The interface speaks in the calm register. Of the site's two typefaces it shares one, Geist Mono, for machine text. This is what its code shows.

The typeface and the four roles are read from the source code of the product into a snapshot, published as product-tokens.json. The page title, the weights in use, the tabular figures and the contract test are checked by hand in the product code.