Loading ...

Responses by AllCaps; Jiří Maha, developer; Arnošt Neurad, developer; and Jakub Roček, developer.

Background: “The website operates as a hub for our practice with the purpose to present and distribute our type families,” says AllCaps. “Each typeface is presented as an individual project, not only showcasing the shapes of the letterforms but also the historic background, unique artworks and pieces from the actual design process.

“Apart from the interactive layout, we customized the shopping process with the licensing system from scratch and aligned it with our philosophy,” the type foundry continues. “Following the example of other creative platforms, we provide licenses directly to end-users and clients because our customers are not only graphic designers but anyone who needs a typeface.”

Design core: “The site’s core element is the layout of interactive type testers,” AllCaps explains. “Our inspiration for this was anchored in historical research of printed-type specimens from different eras. We are fascinated by this phenomenon as well as observing various attitudes that changed hand-in-hand with technology. This encouraged us to approach our entire website as an interactive specimen.

“The specimen layout slightly varies for each typeface individually and showcases it in various optical settings and sizes,” the foundry continues. “We didn’t want to show typefaces in a sterile setting but rather show their identity and encourage people to interact with them before downloading a trial.”

Challenges: “Design-wise, it was challenging to come up with a visual language that would put all our typefaces under one roof,” AllCaps says. “Our first sketches of the site looked completely different from the final design. During the design process, we came up with a resolution to focus on the website’s content and reserve more room for our typefaces rather than other visual elements. This resulted in a radical simplification of the site’s visual language and systematic layout.”

Favorite details: “Technologically, we’re really proud of the custom OTF font parser that extracts all font data—such as style names, metrics and lists of features—and automates the build of the glyph overview and testers,” AllCaps says.

Time constraints: “The site has been developed with a small team of independent developers for more than two years,” says AllCaps. “We were not limited by a definite launch date, so in the beginning, we reserved a large portion of time to separately prototype individual components like type testers, glyph overviews, the shopping cart and the responsive layout. Once our components had been assembled together, visual and functional fine-tuning based on UX testing was probably the most time-consuming part of the process.

Technology: “The architecture of the software follows a very strict decoupling of the front end for the store and a back-end API with an administrative GUI,” say Jiří Maha, Arnošt Neurad and Jakub Roček. “The back end is based on the Symfony framework with several open-source libraries, such as API Platform, Doctrine and AdminLte for the administrative GUI, as well as several external online services for processing emails and image optimization. The rest of the services are provided by custom-made solutions: for example, the OTF font parser that extracts information from uploaded files to the GUI.

“The storefront is written on Next.js in plain JavaScript with styling done in SASS and processed by Vercel’s styled-jsx,” Maha, Neurad and Roček continue. “The styling also makes heavier use of newer CSS features, such as CSS custom properties, font-feature-settings and grids. We put a high focus on a solution for a precise vertical rhythm. All items are kept well-responsive from mobile to 4K by using relative size units wherever possible. We would not have been able to implement the font testers without the help of the Capsize library.

“The state management is built on Redux with the Rematch library, which enables us to easily batch synchronizations with the API and offers a nice separation of concerns in managing the internal state of the storefront,” the trio says.

allcapstype.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In