Zillowe Docs

Zeno is a curated collection of variable fonts optimized for modern web interfaces, technical documentation, and development environments. It combines the best characteristics of established open-source fonts into a unified design language, now featuring True Italics across all families.

Features

True Italics: Every family includes matching, high-quality italic variants (not just skewed romans).
Variable Axes: Full control over weight [wght] (100-900) and optical sizing [opsz] where supported.
Optimized UI: Compact spacing variants for information-dense dashboards.
Ligature Control: Choose between Zeno Mono Code (with ligatures) and Zeno Mono Terminal (no ligatures).

Installation

To install Zeno fonts system-wide using Zoi:

zoi install @zillowe/zeno

Or can use Zeno in your projects via NPM or directly through a CDN.

npm install @zillowe/zeno

In a Next.js application, you can use the built-in optimizer:

import { zenoSansText, zenoMonoCode } from "@zillowe/zeno/next";

export default function Layout({ children }) {
  return (
    <html lang="en" className={`${zenoSansText.variable} ${zenoMonoCode.variable}`}>
      <body className="font-sans">
        {children}
      </body>
    </html>
  );
}

npm install @zillowe/zeno

In an Astro project, simply import the CSS in your layout:

---
import "@zillowe/zeno/style.css";
---

<html>
  <head>
    <style is:global>
      body {
        font-family: "Zeno Sans Text", sans-serif;
      }
      code {
        font-family: "Zeno Mono Code", monospace;
      }
    </style>
  </head>
  <body>
    <slot />
  </body>
</html>

For advanced integration, you can use helper exports:

import { cssVariables, fontFamilies } from "@zillowe/zeno/astro";

Add the jsDelivr link to your HTML <head>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@zillowe/zeno/dist/style.css">

Then apply it in your CSS:

body {
  font-family: "Zeno Sans Text", sans-serif;
}
code {
  font-family: "Zeno Mono Code", monospace;
}

The Font Families

Because this documentation site uses Zeno natively, the examples below are rendered using the actual fonts.

Family	Purpose	Preview
Zeno Sans Text	Standard body copy and articles. Legibility is prioritized.	The quick brown fox jumps over the lazy dog. True Italic support.
Zeno Sans UI	Tighter spacing for buttons, inputs, and dense dashboards.	Dashboard / Settings / Profile
Zeno Sans Display	High-impact headings and marketing heroes.	Innovation through Open Source.
Zeno Serif Text	Elegant reading experiences for long-form content.	"Design is not just what it looks like." The companion italic.
Zeno Serif Display	Sophisticated, high-contrast titles.	The Art of Typography
Zeno Serif Caption	Small text, footnotes, and captions.	Fig 1. Typography in motion.
Zeno Mono Text	Technical reading and plain text content.	export interface Document { id: string } // True italics for comments
Zeno Mono Code	Development and syntax highlighting (includes ligatures).	if (a !== b) return;
Zeno Mono Terminal	Command-line interfaces and terminal emulators (no ligatures).	root@zillowe:~# ls -la
Zeno Mono Nerd	Specialized icons and glyphs for IDEs and status bars.	󰀻 󰈮 󰊄 󰙯

Formats Shipped

The package includes multiple formats to support different workflows:

.woff2: The standard for web performance.
.ttf: For local desktop installation (Windows/macOS).
.otf: Preferred by designers for tools like Figma and Adobe Creative Cloud.

Zeno

Features

Installation

The Font Families

Formats Shipped

Zillowe Foundation

On this page