Typography is probably the most important thing to get right on the internet. Text is everywhere, I challenge you to find a page on the internet where it doesn’t play a major roll in the content.
Making the reading experience of text as easy and enjoyable as possible is a big part of our jobs as website designers and developers. Unfortunately, typography is often neglected on a project. With libraries such as Bootstrap and Foundation, it’s easy to completely forget about it.
The design team at iWeb were lucky enough to attend Ampersand Conference a couple weeks ago – a conference dedicated to web typography. We’re currently building our own front end base (which we’ll be releasing soon!) and we wanted to make the typography the best it could be.
One of the biggest advantages of visiting a conference is being around hundreds of people who share the same passions as you. The one day conference had a wide variety of talks covering all aspects of typography. This meant that those attending ranged from front end developers, type designers, web designers, UX designers and everyone in-between. This huge variety of people from different background makes you really appreciate how much effort goes into websites.
One of the highlight talks was from Marcin Wichary who works for Medium, a popular blogging platform. He spoke about the trials and tribulations of making typography as legible as possible – not just in the browser but also on mobile apps. My favourite quote of the day came from Marcin who said “You gotta do what you gotta do”. Something that rang true in my career as a web designer and front end developer. Make the output of your code the best it can be, not the code itself – sometimes you just have to add hacks to make things work the best they possibly can.
One of the most interesting parts of Marcins talk was how Medium began to use system fonts on their websites and apps. With Apple’s San Franscisco fonts, Android’s Roboto font, we now have access to a range of system fonts that have been specifically designed for legibility on screens. Moving away from the concept of using single font families for a website, we can instead use the most optimised for each platform.
Jen Simmons changed the conversation a little, focusing on modern layouts. She specifically focused on the use of flexbox. This is a relatively new way of laying out websites which allows for significantly more flexibility than with previous methods such as using floats. At iWeb, we’ve already implemented a number of layouts using flexbox on our websites; but seeing someone else use the same technology in a different way always leaves you with food for thought.
An interesting part of Jen’s talk was using viewport sized typography. This allows the fonts to scale as you increase the size of your window. It’s something we’ve tried before (including on this website) but we feel it isn’t quite ready for production environments.
The final talk of the morning was from Nick Sherman. He was a true geek after my own heart. He spoke about how responsive web design has introduced new challenges for typography. A lot of his talk was theorised, but interesting nonetheless. He spoke about a new font format which uses four different font weights to generate virtually unlimited weights without the overhead. It was fascinating and exciting to see fonts move from their traditional roots in print to a focus more on web and screen usage.
Later in the day, Bruno Maag, a type designer, spoke about creating a bespoke font for Amazon’s kindle devices. It was mind boggling the amount of testing and perfecting that went into building a font that is legible on e-ink and LCD screens – even considering the orientation of the LCD screen and how the legibility changes with horizontal and vertical viewing. I’d try to explain but I am not ashamed to say a lot of it went over my head. Suffice to say it was mesmerising to see the care, detail and passion that went into both the font and Bruno’s talk. Not to mention his awesome dress sense.
Lu Yu was new to public speaking but you wouldn’t have known! She spoke about how languages and cultural differences affect how typography is laid out, with a particular focus on the Chinese market. Being one of the largest growing markets online, it’s something many companies are interested in. I think the outcome of this talk was that unless you really understand the Chinese market, stay away. With thousands of characters and completely different cultural meanings to colours (red is a symbol of success and luck and green is a negative colour) and styles it’s hard to get it right.
All the speakers were great on the day and I’ve only mentioned a few of my favourites. Some key takeaways from the event include:
You can listen to all the talks from the event on the Ampersand Conference website at 2015.ampersandconf.com.
A big thanks to everyone who spoke at the event, I took away pages of notes that we’ll be feeding back into the websites we build.
P.S. Just to include the inaugural conference food photos, Very Italian Pizza in Brighton is definitely worth a visit!
Thanks to Marc Thiele for the images!