But Head: Crafting a Custom Font

TLDR: But Head is a custom header font for GitButler that bridges developer-focused monospace aesthetics with magazine-style editorial typography. It combines geometric precision with proportional elegance to create a distinctive visual identity.

Download: 📦 font files ∙ 💾 source files ∙ 🎨 live demo

Visual Identity in Developer Tools

Defining a visual identity for a developer tool requires balancing utility with distinction. We aimed for a typographic style that could reference the history of computing—specifically the technical manuals and magazines of the 80s and 90s—without feeling dated. The goal was to signal technical precision while maintaining high readability.

We initially settled on PP Editorial New. It provided the condensed serif aesthetic we were looking for. For body copy, we tested various monospace fonts and for marketing text we chose Spline Sans Mono. But for the in-app experience, we selected Inter due to its versatility and excellent screen readability.

However, this pairing revealed a disconnect. While PP Editorial New offered sophistication, and Inter provided utility, the combination lacked a direct link to the developer experience. The "technical soul" usually conveyed by monospace aesthetics was missing from the primary branding elements.

The Ubiquity of the 'Editorial' Aesthetic

After a decade dominated by neutral, geometric sans-serifs, the industry collectively swung toward expressive, high-contrast serifs. This was a welcome change, bringing the warmth and authority of print media back to digital products.

However, a trend's success is often its downfall. PP Editorial New and similar typefaces became ubiquitous in tech marketing materials. Major companies adopted this style for its perceived sophistication, leading to market saturation.

You can observe this saturation in real-time archives:

• Fonts In Use: Editorial New
• Typewolf: Editorial New Usage

The prevalence of this style in general tech marketing diluted the distinctiveness of our brand.

This ubiquity, combined with the lack of specific "developer" character in the font, prompted us to develop a custom solution. We needed a typeface that was:

1. Technically Aligned: Visually referencing code editors and terminal environments.
2. Structural: Possessing the condensed qualities of editorial design but with geometric precision.
3. Distinct: A unique visual signature for GitButler.

Typographic Selection

We analyzed two existing typefaces that represented the opposing qualities we wanted to merge: Xanh Mono and Instrument Serif.

Xanh Mono served as the technical foundation. Its appeal lay in its geometric boldness and engineered feel. However, strictly monospace fonts can be problematic for display headers; characters like 'i' and 'l' leave excessive whitespace, while 'm' and 'w' can feel compressed.

Instrument Serif offered the proportional balance we needed. Its humanist qualities provided a counterweight to the angularity of Xanh.

The design goal was to synthesize these attributes: the mechanical geometry of Xanh Mono with the proportional rhythm of Instrument Serif.

Proportional Adaptation and Glyphic Analysis

Combining these fonts required a complete reconstruction. We extracted the structural DNA of Xanh Mono—its sharp serifs and geometric strokes—and grafted it onto the proportional skeleton of Instrument Serif.

We adopted a selective glyph strategy:

• Structural Geometry: We retained Xanh's angular structures (e.g., the apex of 'A', the crossbar of 'F') but discarded its monospace constraints.
• Proportional Widths: We applied Instrument Serif's spacing logic to Xanh's forms, allowing letters to breathe naturally.
• Organic Curves: The italic forms incorporate Xanh’s distinctive organic bowls (seen in the 'a'), contrasting with the rigid stems.

Optical Adjustments and Stroke Weight

Display fonts often suffer from readability issues at smaller sizes due to high stroke contrast (the difference between thick and thin lines). Our initial tests revealed that the horizontal hairlines from Xanh were too delicate for diverse screen rendering contexts.

To resolve this, we uniformly increased the weight of the horizontal strokes. This reduced the extreme contrast, improved the optical density of the headers, and ensured they held visual weight when paired with the Inter body text.

Italic Variation

An effective italic cut should not merely be a slanted version of the Roman upright. We treated the italic as a distinct "voice" within the family. It introduces kinetic energy through changed letterforms—specifically the cursive nature of the lowercase—while maintaining the angular terminals of the uprights. This variation provides necessary rhythm in editorial layouts.

Ligatures and Collision Resolution

We implemented standard f-ligatures (fi, fl, fh, fb, ffi, ffl) to resolve terminal collisions—a common necessity in serif fonts where the hood of the 'f' invades the space of successive ascenders. Additionally, we included discretionary ligatures for rare pairs like 'qj' to solve kerning gaps and add visual interest.

We created But Head, a custom header font for GitButler that merges the geometric precision of Xanh Mono with the proportional elegance of Instrument Serif. It bridges developer-focused monospace aesthetics with magazine-style editorial typography, giving us a distinctive visual identity beyond the oversaturated "Editorial" trend.

Download: font files • source files • live demo