Loading ...

Responses by G-Type.

Background: The site has two principal functions: e-commerce and portfolio. Aimed primarily at designers, branding agencies and the creative community at large, the site offers users an extensive library of retail fonts and purchase licenses for desktop, web, app and ePub use. The site also acts as an online gallery that showcases selected custom font projects by the foundry as well as a varied collection of logos for clients worldwide.

Design core: As you’d expect, the type is front and center! We wanted to achieve a good blend of classic type specimen layouts combined with intelligent tools designed to test drive the fonts, play with the OpenType features, or examine the glyph palette and language coverage of each typeface.

Favorite details: The logo section works really well and is very minimal in comparison with the retail font pages, which are very data heavy. Responsive SVG font specimens are fundamental to each catalog page and are a welcome change to using png or jpeg media files. Special mention for the animated type transitions on the homepage created by our web development partners Mud.

Challenges: The type-tester area proved to be quite arduous. Mud’s original concept included the ability to import photographic backdrops to overlay the type on, but after a lot of deliberation, we decided not to implement it and instead adopted a more minimal approach using just the type.

Navigation: The e-commerce nature of this site meant that we weren’t seeking to introduce anything radical in terms of navigation. It retains a standard menu layout and hamburger mobile structure, and there are also very simple touches, like “related post” links at the bottom of the blog entries. That said, there is some clever crosslinking on certain font pages in the form of a type pairing tool—devised by Mud—that lets users swap text settings on the fly and jump easily between pages.

Technology: The site was built using the Craft CMS with Craft Commerce for sales. To improve performance, we are using an API to deliver pages and load content asynchronously. The site uses JavaScript, SVGs and web fonts to optimize the user experience, animate type and provide an interactive type tester tool.

g-type.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