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.

Installation

You 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>
  );
}

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.
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."
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 }
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

Installation

The Font Families

Formats Shipped

Zillowe Foundation

On this page