Responsive typefaces are like sliding doors in architecture – Ampersand conference


written by Max Masure on November 4, 2013

When you realize you devoted a full day on your weekend to listen to passionates of typography – makers or users of fonts… then you know you will meet awesome people.

And this is what happened. Ampersand this year, first time in the US, made me talk to very interesting people (like the guys ont the cover pic above: lunch break camping style on-the-cooler with Rodrigo Sanchez, Elaine Matthias & Victor De Anda).

Keynote: Type as Brand, Brand as Type  Michael Johnson

Keynote: Type as Brand, Brand as Type
Michael Johnson

Michael Johnson showed us examples of brands as typeface and I really liked Acumen where the logo is changing according to the strong manifesto piece it includes.

Acumen - Brand as typeface - Michael Johnson

Acumen – Brand as typeface – Michael Johnson

I kept the quote of Christian Schwartz saying “Identity doesn’t come only from the typeface: it comes also by the structure of the layout”. He was talking about the Guardian so of course layout defines a newspaper as much as the logo and font. But I think it can definitely be applied to any good brand identity.

Webfonts are Just Fonts by Christian Schwartz

Webfonts are Just Fonts by Christian Schwartz

I also discovered through Mark Boulton a very useful tool, Typecast where you can create your HTML text style guide (H1, h2, p…) directly on the browser. He recommends to start designing the font style by defining the style of the paragraph, which will be the readable font, and then go up on titles to the ultimate H1. Best way to get a balanced font style guide.

Typecast - Tool to define font style directly on the browser

Typecast – Tool to define font style directly on the browser

Jenn Lukas gave a excentric talk where she mixed GIFs meme and advices to make the duo designer-developer better. She recommends to show on a page all the CSS options available so developers know what to use pic.twitter.com/n2MA79UJII

css-style-guide

Designers should create a CSS style guide available for developers

She also recommended some tools like symbolset.com Iconfonts sets, and pictos.cc Iconfonts CSS ressources.

The developer's ampersandwich by Jenn Lukas

The developer’s ampersandwich by Jenn Lukas

Trent Walton went through a variety of CSS options to bring this personality on your designs online. I discovered the CSS3 H1:before and H1:after and techniques to layer types. Get all his good stuff here: bit.ly/17ycGiR

 

Get Your Hands Dirty by Trent Walton

Get Your Hands Dirty by Trent Walton

Question your content early

What I really liked about Mark Boulton’s talk was the importance he put on “You can’t make good decisions about type unless you understand the content”. Arbitrary deciding on a font for an identity without digging for the content (the story to tell) is a mistake. You need to know the content (type of content, quantity) and also the potential readers.

Typography in Responsive Design  Mark Boulton

Typography in Responsive Design
Mark Boulton

He gave the example of the CERN (the big particle accelerators in Geneva) where he found out that they had actually two types of readers: public, who want to see beautiful picture and less text and the scientists, who want very few pictures and a lot of text. They manage to design the multitude of websites by picking a different font – even if similar – for each user typology. And of course the layout was a bit different for the public sections with big and beautiful pictures.

Readability per Square Centimeter Luc(as) de Groot

Readability per Square Centimeter Luc(as) de Groot

Lucas de Groot served an hilarious talk mixing nerdy badass typography content and british humor comments about slides of his real life. I laughed so hard and learned so much. Love!

If diagonal like Bodoni, contrast is lighter between the letters (alert: nerd typefont!)

If diagonal like Bodoni, contrast is lighter between the letters (alert: nerd typefont!)

Personality is good. Eat some.

Very good advice from Lucas de Groot to treat well copy: improve readability using hanging figures, small caps for abbreviations, italic instead quotes.

improve readibility using hanging figures, small caps for abrev., italic vs quotes

improve readibility using hanging figures, small caps for abrev., italic vs quotes

That really brings character (haha) and a soul to your text. The same way Jonathan Hoefler pointed that by putting maps from paper to digital we lost some sense and context by making them so clean online compare to print maps.

Paper maps with personality vs online maps clean and empty

Paper maps with personality vs online maps clean and empty

We had different fonts for different elements on the paper versions. I think he has a point here: we need to bring back human, emotions and personality.  Christian Schwartz incites to create more designs that rely on the use of particular typeface choice. It brings personality. “Let the typeface do most of the job!“

Responsive web design, responsive typeface, responsive architecture, responsive everything

Nick Sherman shared with us a discovery that proves there is still innovation to do: It is still not possible to show a $1 bill (or anything for the matter) at the exact real life size on all devices, which is a concern for fonts as the majority of the talks were going on the size fonts relative to the user’s distance from the screen.

Nick Sherman trying to solve the $1 bill being shown at the real life size on screens

Nick Sherman trying to solve the $1 bill being shown at the real life size on screens

Go on Size Calculator: cool tool to calcutate font size according to distance of viewer

He then talked about fluid weight of a font itself. Going deeper & deeper to the core of typography. Meaning a font exists in a different weight already but, in a way, we could serve one weight out of the infinite variations of weight, according to the specific need, specific user os specific environment. I enjoy this new way of thinking: we are finally talking about responsive typeface.

The Future of Responsive Typography by Nick Sherman

The Future of Responsive Typography by Nick Sherman

The experimental tool designed by Marko Dugonjić  has been shown four times during the day by different speakers to show where the responsive typeface can move forward: the font size changing according to the distance of the viewer. Of course it is an experiment but it really brings a new direction we kind of missed on the web: the user still needs to adapt himself to the support, device, screen size. Mark Boulton started his talk making the comparison with architecture: in real life, sliding doors are the perfect example of responsive architecture. I really liked this detail because that makes a lot of sense. And I can imagine how architects were feeling when someone told them:

– “Oh, and you know what, we could imagine doors that open automatically when someone approaches.”

– “Yeah, Roger. Go home, you’re drunk”.

So maybe we are at the same stage of innovation where we are going to change something radically but we don’t know it yet.

N.B.: I’d like to applause again on the perfect badge-schedule experience the guys at Ampersand made: we were able to read it without taking it off!

The perfect Ampersand Conf badge-schedule experience. We can read it without taking it off!

The perfect Ampersand Conf badge-schedule experience. We can read it without taking it off!


Comments are closed here.