Atypical Practice, Intentional Typography in Dynamic Systems – Jason Pamental – ATypI 2017

July 26, 2019 posted by

do you need me to press play there we go thank you it is it's really a huge honor to to be here up on stage I had the opportunity to give a workshop last year in Warsaw and witnessed something the following day that really kind of blew my mind a little bit and it's really exciting to be back here this year talking to you a little bit more about that change but but also what I what I mean by this notion of intentional typography so I worked mainly on the web so I started studying graphic design in the early 90s and as eep said my first job on campus was creating the school's first web site and at that point there were not many options for setting typewell on the web so my my interest in typography kind of sat there for a little while and so I guess I was really just waiting until I had more time and maybe it's kind of advanced or maybe it's not so I was waiting until I had some helpers my pal Tristan and and his cousin Tilly whom we just adopted to help me tell the story of typography and variable fonts in particular so I also tend to spend a lot of time thinking and think about what I mean by these these sorts of topics like intentional typography in digital systems and while I'm not a type designer and I wouldn't consider myself a typographer in the traditional sense I think most of the people in the room here would run rings around me with their knowledge of traditional typography I think that I'm a pretty good web typographer in that I know a lot about how to use type well on the web in a number of different circumstances and another more different facet so it's not just choosing the type and setting it but also making sure it works well and shows up quickly for people who are viewing things on electronic devices so so practicing typography on the web is a little bit different and over the years on the web I think most of you will under will agree that there's been great unevenness in the implementation of typography on the web and I'm being really generous but the other day I posted this online because I was thinking about what I would be talking about here today typography much like n was talking about earlier in in a spoken sense is what really helps amplify or can help amplify what we're trying to communicate and every time we accept just okay then we're going to dilute that message just a little bit and we're going to give up a little bit of what we've been learning and practicing and crafting and honing for the last few thousand years but of course what you really have to do first is define what you mean by good typography and Indra was kind enough to point out that my point of view on this is very us centric and perhaps it's not Universal that everyone should have hyphenation and drop caps that's fine so I went back and we thought about it some more and tried to get my head around what is it that I mean by good typography on the web and so beyond just choosing a typeface choosing the pairings for it thinking about how you're setting it what is the measure what's the line height getting those proportions just right trying to think what are the extra details that really add up to an interesting and compelling reading experience so I started looking at other books like this Rockwell can Illustrated copy of Moby Dick or one of these paragraphs from the aptly named inside paragraphs from Sarah's Highsmith or the details in Keith Houston's book about the book with this beautiful section delineation and introductory next following word and initial capitals or Stephen Cole's anatomy of type it's really beautiful use of ligatures and this introductory paragraph to set off the leading idea and in particular the quotation marks from this first issue of type notes so there are a lot of beautiful details that have proven to be challenging things to consider on the web in a more uniform manner that leads us to things like this so this came out on the Atlantic the Atlantic website last December and it really it made me cringe just a little bit because we see it on the web we see it in the lower third graphics on the Today Show in the US on NBC all the time he's straight up and down hash marks when it's been possible to fix that on the web by enabling a single module in your content management system for close to 10 years this is a solved problem the fact that people have straight up and down hash marks on their website is because they haven't particularly tried very hard to solve it and and what I want to do is challenge all of us who are designing for the web and people who are influencing design on the web by creating these beautiful typefaces is to not go gently into that night and don't let centuries of typographic refinement succumb to that blight so I take a few deep breaths try and Center myself again and come back to what is it that I think describes these extras about typography on the web that I want to encapsulate proper hyphenation interesting typographic marks and ligatures proper quotation marks drop caps as the case may be and I came back to trying to create this sample to embody all of these things within a nice typeface selection a nice three story initial capital nice quotation marks and going on through there making sure I have ligatures that are appropriate for that text going on towards the bottom getting hyphenation the way I want some section marks and end mark an initial first line style past that section break all of those things adding up to what to me equated with a nicely typeset page that I would find to be a compelling reading experience but we were talking about systems and the thing about publishing content on the web is it never stops and so you have to create a system that's going to work just as well with the content that you have today is the content that someone else is going to publish tomorrow and so in trying to think that through we have to make sure that with this system that incorporates all of these fine little touches that it works just as well with something else thrown in and and you might notice that the next thing I tried was taking exactly that same style language and applying it by dumping in flowing in excuse me the first chapter of Moby Dick so I haven't made any changes to the styles but it has inherited that typographic system and it works pretty well so then I found it in German now you'll excuse me for not being able to read any of it to you there we go but I wanted to make sure that it would work that even across languages however there are a couple of things that Indre and others had pointed out like hyphenation shouldn't be on so by checking the key of the language which is an easy thing to do on the web there's a little bit of stylesheet that turns off the hyphenation if it's in German and that's not the only thing you can do but there was just small touches that we could build into a sustainable typographic system that would work across all manner of devices so we can fine tune exactly what we want the headings to look like to bring the proportion down so things flow well and work the only awkwardness being the rag on the right and the German version so in order to get here this is what we had to do and that's kind of problematic loading 26 font files it's 600 K over 30 percent of the total weight of that sample page is not going to be acceptable to the people who are building and running and managing a website it's simply going to be too much around a hundred to a hundred twenty K is what a lot of people consider acceptable for the amount of font information to load just for a frame of reference so we really do have to think about how to improve and as you might guess there is a tie-in to the topic of the day varying contexts varying constraints can perhaps be solved with variable fonts so let's see how that might work to extend this notion of a typographic system that's sustainable and durable and really helps embody what we find to be a good example of typography so this is courtesy of CJ done this is font that he's been working on a typeface he's been working on excuse me called lavet and so I took that same page and set it with two variable font files that he was kind enough to provide to me upright and an italic and that's responsible for every character you see on that page two files 74k so that's really starting to change things a little bit and think about what what we can do and how expressive we can be in this sort of situation but I didn't want to pester CJ to customize everything for me so I took am stove our from type type network and tried that one because it has a few important other variations now just to quickly recap variable fonts single font file that can store all the different weights widths slant if you want italics is another grade optical sizing all within a single file this work there's two files showing all of this Amstel VAR we're now introducing a third so we have the upright and the italic for LaVette and then we're adding an Amstel VAR for the body copy still brings us in at only 200k which is still pretty acceptable in the context of a website system but we have literally thousands of permutations and it really helps challenge the notion of exactly what we think typography is and how we practice it and I'm going to get into exactly what I mean by that so coming back to the the challenge that I pointed out in getting the german-language version to have a nicer rag on the right using this sort of standard sized body copy text it was looking a little bit uneven so I thought I'd try using the variable font and change the width just a tiny little bit and evened it out just a tiny bit made it a little bit more even really didn't do anything to the readability of the text that gets further amplified when you look at it on a small screen this is where it really gets interesting so as this comes up what you'll see on the left and the right is the same images we saw before with that slightly awkward rag on the right now we bring that character within just that tiny little bit two things that are happening here they're really significant one we've gone from about 45 characters per line to about 55 so that creates a slightly longer chunk of text to read so it's a little bit more readable in longer form on the web so we're comfortable but it also has had the effect of evening out the rag on the right so it's a slightly more polished look as well so it's not going to fix every problem but it is going to start to create a more readable text on a small screen device which is arguably we're far more people are actually doing that reading all the time but there aren't always in the most optimal of circumstances so in here there's not a lot of ambient light and it so happens that the smartphone that most of you have in your hand has an ambient light sensor in it and it so happens that that's an API that's accessible on the web so we could also change the grade of the text for a lower ambient light setting you could have a slightly more readable text slightly higher contrast which is also a fantastic feature for accessibility so everything on people with older vision like myself that might end up taking their glasses off to read something slightly lower vision as people age that's a higher contrast setting that you could enable for people to just change it on their own without impacting the overall aesthetics of the design so that's opening up some really interesting possibilities of taking what we think of as our practice of typography and pushing it forward to be more responsive to the end-user in a way that we simply can't be in print and this brings me to what I talked about it type con quite a bit more which is I think one of the most exciting areas to me and what we can do with variable fonts now what I'm illustrating here is the way the design and publishing process was in print in particular somebody writes a text somebody edits that information and a designer lays it out what we've had to do on the web over the years is try and figure out a way to create a design system so what we end up seeing is instead designer creates a universal system up front has no idea what the contents going to be and then over time somebody writes some text they published that text and it looks however it looks so you have really no idea what to do about that one of the reasons why you can't really do much about that is again coming back to those constraints in the number of font files that you can load so how much freedom can you really give people in that process because there's also a lot of code involved but variable fonts gives us the notion of actually bringing the designer back at the end of this process and one of the things that I showed in Boston a few weeks ago was a prototype that I created where in a website you are able to actually go in and take a look at the world's best blog post type set in gimlet and output from djr thank you very much and I think that that word one on the side is a little too wimpy I really want to do something about it so I hit edit I go into the content management system and I crank up the weight and just hit publish that's it so I haven't had to go write any code but because we have this variable font and really I just shamelessly ripped off the interface ideas that Lawrence Penny worked on in access praxis it's really kind of the same idea and I really can't thank you enough for giving me that material to work with but this idea of bringing the designer back into the publishing process you may have a design system that can set most content under most circumstances but this gives us the notion of typesetting the content for this specific headline and actually building that into a content management system in a way that's not overly complex it's just enough that a designer who doesn't have any coding experience can still look at this and understand what's going to happen and work within this design space that's been created so in sort of closing this out what I wanted to say again is that when we think about typography and we think about notice the typefaces you're designing or if you're working with a foundry or you're licensing this stuff for use on the web or if you're designing for the web thinking about what is the typography that you want to support equating that to what's manageable on the web and it's far more than than what you think all these things that I show to you are those are real sample web pages created for this talk none of that stuff is a fake all of that I've used in production on websites large and small and a lot of it's been around for a large number of years so as we're trying to think through how what we can do I want to remember that we can't just keep accepting good enough we can't just keep accepting straight hash marks because it's too hard or not getting ligatures right whether it's on or off whatever kind of figures you want appropriate for that specific language encoding where it's being displayed we have to fight on for that it's worth it because if we don't then there's this continuous erosion that we see throughout our society where just to get it out there that was hard enough so just put it out there instead we want to really consider the beauty of a lovely printed book and think about bringing that into the digital experience and then figure out how we can push it further with some of these ideas about reacting to the users time and place and make sure that we don't let it just go softly into the night that's really we need to fight on we can't really let that go we need to rage rage against the dying of the type thank you very much you

No Comments

Leave a Comment

Your email address will not be published. Required fields are marked *