3type Web Experience
A complete design overhaul of 3type (三言)’s official website – 3type.cn. The new experience is carefully tailored for every screen size from desktop to mobile. The redesign helps 3type reach more audience worldwide while strengthening the brand’s unique identity as a Shanghai-based atypical type foundry based and helps customers find their perfect typefaces and events.
This is a solo project as I worked as both web designer and web developer. The front-end implementation embraces recent CSS standards as CSS grid and flexbox helps make the layout more delicate and fluid.
3type is a typical & atypical type foundry based in Shanghai and a team with in-depth professional and multidisciplinary research experiences. What sets 3type apart from other service providers in China is their expertise in multilingual and multiscriptual typography and type matching. Besides typeface design and selling, 3type also facilitates type tutorials, workshops and tours, with their flagship brand – TypeSchool, promoting the type-related research and education in China.
Goals to Achieve
- Rearrange the sections of the site
- Responsive design to cover all major screensizes
- Design overhaul to march 3type’s marketing image
- Uncompromised experience across various browsers
- Fluid font exploring and purchasing workflow
The navigation bar is now sticky on top with sections rearranged so it‘s always accessible. On mobile devices, the menu can be toggled with hamburger button with fluid reveal animation. A touch of background blur (CSS backdrop-filter) is added to the menu giving it a modern look.
Built for All
The rebuilt site supports all major modern browsers on desktop & mobile. CSS Grid is implemented to create a more fluid layout for modern browsers, for older devices, we made the experience uncompromised with CSS Flexbox as a fallback method.
In a multilingual world
Optimum Type Setting Practice
The composition of Chinese and western mixed text requires a more complicated font-family setting in CSS. Putting Latin typefaces in front of Chinese typefaces and arrange the number and orders of Chinese typefaces can help achieve the optimum result.
Optimized for Touch
On devices with touch input, touch will simulate the mouse hover event. The image scales up and text opacity drops.
By type designers
Full Font Specification
The font detail page displays the full specification of the typeface, including designer, design time, version number, font styles, available formats, available scripts and OpenType features. We also made some nice glyphs to help you identify the available scripts in a glimpse. You won’t find anything missed.
Simple & Streamlined
Customers can customize their font order with a clear and easy-to-read form. We provide live-time culculated total in both CNY and USD to better serve our customers around the globe. You can choose among PayPal, Alipay and WeChat Pay. As the order is placed, a comfirmation email will be sent. With just a few clicks and you’re done.
Type reading on the Web
3typezine is a digital magazine launched in 2019 covering everything about type culture. 3typezine is unique for its not focusing merely on the industry, but also trying to relate type to every aspect of our life: fashion, photography, gaming, films, literature, religions, etc.
Though most Chinese readers read 3typezine on WeChat, we keep investing 3typezine on the web because we believe in the power of internet and a future without walls and restrictions.
3tyepzine on the web has a much better experience than its counterpart on WeChat, it adapts for all screensizes and creates an unique reading experience with its beautiful pictures and type setting. The web version also provides links to references.