The release of the Exat variable font marks a significant milestone in contemporary digital typography, blending historical modernist influences with cutting-edge web technologies. Developed by the type foundry Hot Type and brought to life through a digital experience designed by Studio Size, the Exat microsite represents a shift in how typefaces are marketed and experienced online. Rather than serving as a static specimen, the site functions as a living laboratory where the font’s 1,715 glyphs respond dynamically to user behavior, effectively transforming the browser into an interactive playground for graphic designers and developers alike.
The Architectural Foundation of Exat and EXAT 51
The Exat typeface finds its conceptual roots in the Croatian modernist collective known as EXAT 51 (Experimental Atelier), which was active in Zagreb during the early 1950s. The group, which included architects and artists such as Vjenceslav Richter and Ivan Picelj, sought to break down the barriers between fine art and functional design. They advocated for an abstract, geometric aesthetic that could be applied to architecture, interior design, and visual communications.
Hot Type’s Exat captures this spirit of experimental geometry. By naming the font after the collective, the foundry signals a commitment to the "synthesis of the arts" that EXAT 51 championed. The typeface itself is a variable font system, a technology that allows a single font file to house an infinite range of styles along defined axes. In the case of Exat, these axes cover weight and width, spanning three primary subfamilies: Condensed, Normal, and Wide. Across these subfamilies, the system offers 21 pre-defined styles, though the variable nature of the file allows for any interpolation in between.
With 1,715 glyphs, the font provides comprehensive support for both Latin and Cyrillic scripts. This expansive character set makes it a versatile tool for international branding, particularly in regions where Eastern European and Slavic languages are prevalent. The technical complexity of such a large glyph set requires a promotional platform that can demonstrate its utility without overwhelming the viewer—a challenge that Studio Size addressed through a philosophy of "typography as behavior."
Interactive Mechanics: Scroll as State, Not Sequence
The Exat microsite, developed in collaboration with RISE2 Studio, departs from traditional web design patterns. Most promotional sites use scrolling as a means of progression—moving from point A to point B. However, the Exat site treats the scroll position as a "state." This means that the user’s position on the page directly dictates the visual properties of the typography.
This approach is most evident in the way the site manages visual fatigue. Studio Size structured the experience to alternate between high-intensity expressive sections and calmer, reading-focused segments. Each section of the site is dedicated to a specific axis of the type system. For example, as a user scrolls through the "Width" section, the typeface may expand from Condensed to Wide in a fluid motion that is tied to the scroll velocity and position. Because the site is state-driven, reversing the scroll direction perfectly restores the previous typographic forms, allowing for a tactile sense of control over the variable axes.
The Opening Glyph Grid and Concentric Rings of Influence
Upon entering the microsite, users are met with the "glyph grid," which serves as the most direct demonstration of the font’s responsiveness. This section features a dense field of lowercase characters that react to the user’s cursor movement. The interaction is governed by seven concentric rings of influence that radiate from the cursor’s coordinates.
The behavior is designed to be intuitive, requiring no instructional text. As the cursor moves, characters within the outermost ring are rendered in a dark blue hue at their minimum weight. As the cursor approaches a character, the "influence" increases, shifting the glyph through its weight range until it reaches the innermost ring. At this point, the character is fired in a vibrant red at its maximum weight (Black). This real-time rendering showcases the seamless transition between weights that variable font technology affords, while the color shifts provide a clear visual hierarchy that mirrors the geometric principles of the EXAT 51 movement.
Technical Specifications and Data
The sheer volume of the Exat project is reflected in its technical data. The typeface’s 1,715 glyphs include a wide array of alternates, ligatures, and specialized symbols. The decision to include a robust Cyrillic set is a nod to the regional history of the EXAT 51 collective and ensures the font’s relevance in a globalized design market.
The subfamilies are categorized as follows:
- Exat Condensed: Seven weights ranging from Thin to Black, optimized for vertical economy and high-impact headlines.
- Exat Normal: Seven weights providing a balanced proportion for body text and general display use.
- Exat Wide: Seven weights designed for expansive layouts, offering a bold, architectural presence on the page.
The microsite itself was built on the WordPress platform, utilizing a sophisticated stack of animation and performance libraries. To achieve the smooth, high-performance interactions required for variable font manipulation, the development team utilized GSAP (GreenSock Animation Platform) and its ScrollTrigger plugin. These tools allow for precise synchronization between the user’s scroll position and the CSS variables that control the font’s axes. Additionally, the Lenis smooth-scroll library was implemented to ensure a consistent, fluid experience across different browsers and hardware configurations, preventing the "jitter" often associated with scroll-heavy interactive sites.
Design Space and Temporal Depth
A dedicated "Design Space" section within the microsite allows for controlled comparisons of the font’s various styles. By hovering over specific style names, users can trigger real-time morphing of specimen text. This allows designers to see exactly how a word or phrase transforms as it moves from a Condensed Thin style to a Wide Black style.
To add what the designers call "temporal depth," the site incorporates large numerals that move in sine-wave patterns. These movements are not random; they are tied to the speed of the user’s scroll. This adds a layer of kinetic energy to the page without distracting from the primary focus: the typeface. Three-dimensional reveals are used sparingly throughout the experience. These 3D elements reference the architectural and sculptural work of the EXAT 51 members, providing a thematic link to the font’s origins while maintaining the page’s performance and readability.
Industry Implications and the Future of Type Specimen Design
The Exat microsite arrives at a time when the typography industry is increasingly moving toward "digital-first" specimens. For decades, type foundries relied on printed specimen books to showcase their work. In the digital age, these were replaced by PDFs and static web previews. However, the rise of variable fonts—standardized in 2016 through a collaboration between Adobe, Google, Apple, and Microsoft—has necessitated a new form of showcase.
Variable fonts are inherently interactive; their value lies in their flexibility. Static images cannot adequately convey the "in-between" states of a variable axis. By creating a site where the user is an active participant in the font’s transformation, Studio Size and Hot Type are setting a new standard for the industry. This level of engagement is not merely aesthetic; it serves a practical purpose for art directors and designers who need to see how a font will behave in a responsive web environment before committing to a license.
Furthermore, the integration of historical context into the digital experience provides a narrative depth that is often missing from modern font releases. By grounding Exat in the history of Croatian modernism, Hot Type elevates the typeface from a simple tool to a cultural artifact. This approach resonates with a design community that is increasingly interested in the provenance and "story" behind the assets they use.
Collaborative Effort and Professional Reception
The project is the result of a multi-disciplinary collaboration. Studio Size handled the creative direction and UI/UX design, while RISE2 Studio provided the technical expertise required to implement the complex animations and scroll-driven logic. The synergy between the design and development teams was essential in ensuring that the site remained performant despite the heavy load of rendering 1,715 glyphs in real-time.
Initial reactions from the design community have highlighted the site’s ability to communicate complex technical features through "invisible" interface cues. Industry analysts note that the Exat microsite effectively demonstrates the "ROI" of variable fonts—showing how a single file can replace dozens of individual font weights, thereby reducing server requests and improving site performance without sacrificing creative freedom.
Conclusion and Accessibility
The Exat variable font and its accompanying microsite stand as a testament to the evolution of digital design in 2026. By merging the geometric rigors of 1950s modernism with the fluid possibilities of 21st-century web technology, Hot Type and Studio Size have created a specimen that is as informative as it is expressive.
For those interested in exploring the system, the font is available at the dedicated URL exat.hottype.co. The site serves not only as a sales platform but as an educational resource for those looking to understand the mechanics of variable typography. As web standards continue to evolve, projects like Exat provide a blueprint for how technical complexity can be distilled into an intuitive, user-centric experience. The full case study, detailing the development process and the specific GSAP implementations, is available on Codrops, offering further insight for developers looking to push the boundaries of typographic web design.
