Shape brain Slice 1Created with Sketch. Slice 1Created with Sketch. Slice 1Created with Sketch. menu 1433522600_bubble + 1433522600_bubble copy Thumbs up icon 15

Ampersand 2015

Written on: Nov. 16, 2015


First off I want to thank Clearleft and all of the sponsors for creating such a wonderful event! I thoroughly enjoyed myself learning from some of the industry leading typographer’s. 

I had a great time, but what did I learn?
Each of the speakers present demonstrated a real love for type, each brought their own case studies and demonstrations of effective uses of type on the web or in print. Here are just some samples of the useful and interesting things I picked up on from the speakers present :

 

Indra Kupferschmid
- “Down with web typography”

Indra first illustrated that her talk titled “Down with web typography”, was to be clarified as “long live typography on the web”. She went on to explain that seeing as the web can support pretty much all of the typographical functionality that print does, it’s up to us as designers to fully utilise the typographical features the web has to offer. Here are just a few of the useful points Indra brought up pertaining to typography on the web:

- Ensure font smoothing is set to ‘subpixel-antialiased’, for the browsers that support it this really makes a difference in the legibility of type. In particular if headings are set to a large font size, jagged edges are more noticeable without font smoothing. Here’s a rendering to display the difference in font smoothing: 



As you can see the ‘subpixel-antialiasing’ really cuts the mustard for increasing legibility of type online. The render in ‘supbixel-antialiasing’ makes the lines present a touch thicker and the corners of each letter a lot smoother, which ultimately increases the contrast from the type’s background. 

Never use faux bold or faux italics, meaning don’t simply apply a single font to a page and expect the browser to be able to render the italics and bold styles of the font correctly.

As you can clearly see there’s a dramatic difference in the display of the text present if a shortcut is made by using the original typeface and applying ‘font-weight:bold;’ to it. In other words or lines rather here’s an example in CSS: 

//right way
h1 {
font-family: 'Titilliun-bold', Arial, sans-serif;
}
//wrong way
h1 {
font-family: 'Titilliun', Arial, sans-serif;
font-weight: bold;
}

Don’t justify your text, unless you have a niche JS script to hyphenate your words properly. In particular if you are using justify on small columns, there can be extremely odd outcomes such as excessive space between words. 

Justified text is just gross. Seeing as most layouts nowadays are responsive, there’s so much opportunity for justified text to look abhorrent.

Choosing the write type for the medium is important. When designing for adverts or landing pages, type should be ‘loud’ and entice the viewer to read what the design has to say, they are typically unmotivated readers that you need to persuade. If you are designing for the main body copy of a book, the type should be calm, uniform and should promote uninterrupted. Anyone who reads a book is a motivated reader, they are willing to read the content created, so keeping their immersive state is critical. When designing for body copy ensure that the type chosen is calm, legible and doesn’t have too many stylist changes in formatting to prevent the reader breaking focus.

 

Marcin Wichary
- “To hell for type”
 

Marcin works for Medium, for those who don’t know Medium is a “community of readers and writers offering unique perspectives on ideas large and small.” Marcin told a few riveting stories on specific instances of type bugs found within medium and how he bent over backwards to resolve them. Such as ‘the curious case of the disappearing Polish S', but  the main story I want to focus on, which I realise now is online is  ‘System Shock’ - a story of a 25 year old font coming back with a vengeance. 

System shock is an article Marcin wrote about default device/OS font rendering. As Marcin explained their “design team decided to perform an experiment in rendering the text on the site in system fonts”. Each mobile device/OS has a different default system font, Apple has ‘San Francisco’, Android has ‘Roboto’ and Windows has ‘Segoe UI’. For anyone familiar with CSS rendering this shouldn’t be too tricky, you just have to specify each of the fonts in the selector then the device will pick up it’s relevant system font, like so : 

font-family: "San Francisco", "Roboto", "Segoe UI”;

If you are not familiar to CSS, then the above line will probably make no sense. To nutshell the concept, your browser will render the font in ‘San Francisio’ if it can find the font, then ‘Roboto’ if it can find it and so on. Basically creating this line specifying each font will create fall backs so that there’s a good chance for your device to render one of the fonts. The only trouble is this line will only probably work for the most up to date devices, which is really not ideal as you have no idea what kind of device your end user is viewing the site in. To be extra safe, you can start specifying more generic fonts, so the line becomes : 

font-family: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;

Seeing as ‘-apple-system’ includes a vendor name, Marcin decided to simply include ‘system’ to the line, no harm in adding an extra fall back right?

Wrong, after making the redesign live, Marcin began to receive reports that most of the fonts on the site had an almost ‘blocky’ and ‘retro’ feel to them. This is extremely strange, as there are fallbacks for all of the system fonts available. Being a mac user Marcin could not see any of these anomalies occurring, when defining ‘system’ in the list of fonts Windows users would have the text rendered in the windows default font from 1995 : 

Personally I love system font, in my opinion it’s a truly classic digital font that really brings back nostalgia of pixelated games and CRT monitors. I would class this bug as a happy accident, there was no harm done, simply a retro feel for Windows users. The bug was easily fixed, but could have been prevented through thorough test driven development, but then again this might be a little excessive for font changes.

  

Jen Simmons
- ‘Modern layouts: getting out of our ruts’

Jen Simmons an executive producer of ‘the web ahead’ began illuminating the current problems and awful trends of web design.  

Straight out off the bat Jen nut shelled the current trend of website layout, stating “we are in a rut and the rut looks like this:”

Jen went on to show various examples of main stream websites and even graphic design sites, which were using this layout. By overlaying a heat map on each of the sites, it was clear that side bars are completely ignored by the modern user. In today’s modern expectation of web design, the majority of content that gets stuck into side bars are usually advertisements or low value content for the user. Which makes us realise that there’s a large deal of real estate on each page taken up by essentially visual noise.

Another trend Jen demonstrated was the “We are unique, here’s three reasons why” template common across most company websites designed in the past couple years.


Each feature a hierarchical system of banded sections displaying different topics, this is okay, but “the internet is ‘multi-dimensional animated computerised responsive blank canvas” so we should fully utilise this in our designs.

Jen demoed a really simple and highly effective CSS3 for responsive cover layout design, which looked something on the lines of this : 

 

<div class="wrapper">
    <h1>Lorem Ipsum</h1>
</div>
 
.wrapper {
    height: 100vh;
    display: flex;
    border: 20px solid #999;
    box-sizing: border-box;
}
h1 { margin : auto; color: #444; text-align: center; }

Without any javascript the above code displays an element which is set to the full height of the browser window, then centres a h1 within it at all times. The practical application for this will be mainly for cover page or promotional content, but the uses could be endless. Jen went through a comparison of vogue.com and their magazine, highlighting the fact that when the print was served the page was oriented around the content, there was little text. “Layout should serve the content. That’s been forgotten on the web. Times have changed, the web is not print, but the web should be like print.”

 

img {
   float: left;
   width: 200px;
   height: auto;
   shape-outside: circle(44%);
}

This can also be used as a polygon : polygon(200px 61px, 100% 100%, 134px 100%), you can specify more points, but the basis for each of these is:

polygon( originX originY, point1X point1Y, point2X point2Y);



Jen also works at Mozilla, she introduced a really interesting part of CSS3, which will be coming out early 2016, which is a custom grid layout.

gridbyexample.com

 

Bruno Maag
- On typefaces for screens
 

Bruno was part of the team working on the Kindle Paperwhite, he described in detail the challenges of designing for E-Ink and the ghosting effect on fonts in the Paperwhite. The complex algorithms used to assist font hinting and the series of user tests that were carried out to reach the ideal font for the Paperwhite were rigorous.

Read more on font hinting 


The end result was a font that could be read on average “6% faster than the previous font”. To extrapolate that 6%, if we think of that also being an increase of 6% more words/minute read then that will equate to more books read in a year and thus more E-books sold.  

That’s all folks 

I’ve realised I’ve waffled long enough about fonts. There are quite a few bits and pieces that I did not cover in this post, but I hope to be expanding them into my work whenever possible and hopefully display them here some day. 

 


Written by