Host Grotesk
Type with Purpose
Good typography guides attention, improves understanding, and makes communication effortless.
The Anatomy of a Typeface
By FontSide · June 2026
Every typeface is a system of decisions — about stroke contrast, x-height, spacing, and rhythm. The best ones feel invisible: you stop seeing the letters and start hearing the voice behind them. That transparency is the hardest thing to design.
A high x-height opens up the counters and makes small text breathe. Tight tracking pulls a headline together; loose tracking gives a caption room to exhale. None of these choices are accidents — they are arguments about how reading should feel.
Uppercase
Lowercase
Numerals
Symbols
Package Manager
The recommended way to use fonts in modern web projects.
1. Install Package
pnpm add @fontsource-variable/host-grotesk2. Import in App
import '@fontsource-variable/host-grotesk/wght.css';3. CSS Usage
body {
font-family: "Host Grotesk Variable", sans-serif;
}Google Fonts CDN
Use Google's CDN to embed the fonts directly via HTML.
HTML <head>
<!-- Please select at least one weight and style -->Fontsource CDN
Skip the build step by adding this directly to your global CSS file.
Global CSS
/* host-grotesk-latin-wght-normal */
@font-face {
font-family: "Host Grotesk Variable";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(https://cdn.jsdelivr.net/fontsource/fonts/host-grotesk:vf@latest/latin-wght-normal.woff2)
format("woff2-variations");
}Background & Story
Host Grotesk is a uniwidth sans serif variable font tailored by Element Type for modern user interfaces. It features uniform letter widths and spacing across all weights and corresponding italics, ensuring seamless adaptability without compromising layout consistency.
To contribute, see github.com/Element-Type/HostGrotesk
A uniwidth typeface
As a uniwidth typeface, Host Grotesk allows for smooth transitions between font weights without disrupting overall design and layouts. For instance, a button's size remains constant even when the font weight increases during a hover state. Similarly, making a part of a sentence bolder will not push the letters to the next line.
Calibrated for both display and text applications, Host Grotesk has low contrast stroke modulation and closed terminals that complement the straightforward construction of its letterforms, making it an excellent choice for digital media. The proportions are balanced between a generous geometric sans and a compact grotesque, suitable for both display sizes and small body copy.
The Host Grotesk family is built on Jonny Pinhorn's beloved Poppins (Indian Type Foundry, 2020). While most letters are reworked and modified for the new look and duplexed proportions, Poppins' soft and approachable essence remains visible. A reliable and cohesive type family for user interfaces, branding, and communication materials, combining the contemporary workhorse category with the elevated functionality of uni-width proportions.
Tags & Moods
Subsets
Install
pnpm add @fontsource-variable/host-groteskDesigned by
Element Type, Doğukan Karapınar, İbrahim Kaçtıoğlu
Links
License
OFL-1.1