 Hey, everyone Well, this is a much fuller room than I was expecting at five o'clock. I applaud you Thank you for coming and making sure it was more than just like Brian Oh, and I can jump it goes You all deserve this applause and Thank you, I hope you're all having an amazingly awesome first day of Drupal con or Second or third depending on which other events you've been to my name is Jason Pommantel And I'm going to talk to you about fonts More specifically about using fonts appropriately and performately in the age of responsive design and lots of options that designers keep wanting for like me So who am I? I am the co-founder of H&W design a small design firm in Providence, Rhode Island that does web strategy and design consulting and when we build stuff we build it in Drupal and We've been doing that for quite some time Also the co-founder of Drupal PVD the local meet-up in Providence that's been going on for a few years now because there's actually a pretty fair sized Drupal community there, which is really pretty awesome I'm also the co-host of Talking Drupal. It's a weekly video hangout show that I do along with my friend John Picozzi over there and Two other fine folks Steve Cross and Nick Laughlin We do that every week and that's an outgrowth of all of the other things that we do about Drupal and what we've learned and The important thing about all of these I'm also the co-parent of my pal Tristan and if anybody follows me on Instagram. They know that all I ever do Is walk my dog around the reservoir and go to Drupal conferences I'm just bearing that out But the co is really important in all of these things Because another word that starts with that same syllable is community and all of these things are tied to that and and it's the community of Drupal that has really been a special thing for me and actually is the the start of My interest in web fonts and performance. I've always loved type but I didn't really start thinking about the implications of implementing that type Until a few years ago So how did I get here to this stage at this Drupal con at this point in my life? Well, it started in Drupal con Chicago As all these good stories often do it was in a bar at about 2 a.m Somehow Morton was involved Shocker and I'll tell you it also started at 6 in the evening at rock bottom literally a place called rock bottom the restaurant and Many hours later. I was in this bar with a couple of really great guys Matt Tucker and Al Stefan amongst a few others and and one of their chief complaints about web fonts was how much it impacted the performance of Their websites and the experience of getting that content on screen And so after a number of beers and a lot of discussions about the typography on various people's t-shirts I got them to understand that type actually really matters as part of design and experience and That led me down a path of doing a lot more investigation a lot more writing and a lot more speaking and thankfully for me a deal With O'Reilly to write more about it, so I'll tell you more about that later But what I wanted to talk to you about today is what I mean by responsive typography because it is Kind of a dangerous thing to sort of co-opt that term responsive and talk about something That's not really just about responsive design so I'm going to talk a little bit about responsive design and this is where we get into the lies and deceptions and And good responsive design starts us covering things about an honest reconciliation and getting back to What responsive design helps us uncover about the design process and the reality of people experiencing our design and So what and then I'm going to talk about how? Responsive typography is part of that and also part of something else in terms of how we set up our sites The reasons why typography is so important and and how that impacts small and large screens alike so we're gonna have some a few tips about how to make your typography responsive and We're gonna also talk about how to prototype these things because much like Real shipping software trumps any doc document about that software Real stuff wins real type wins not a picture of type not a photoshop document because that's not how type renders Real type in a browser, so it's really important that you make that part of your design process, so Let's move on we're gonna talk about this quote That came across my Twitter feed now. How many people in the room are designers by background? Okay, that's awesome What's really awesome is not not more than a little over half the people in the room raise their hand Which really makes me happy because this talk is as much for developers and site owners and brand owners as it is for designers it's very important so Stephen Blake bro is a very talented fellow and he was complaining about the fact that we call it web typography Why can't we just say typography? Well, we can't It's part of that and it's a whole lot more So it's all of what you know about type and for those of you who have a traditional design background You have a tremendous advantage these days because you have a much deeper understanding of what type can do to further your design and convey emotion and message Then people that found their way into web design and don't have the benefit of that Background in really a deep understanding of typography So it does all the things that you know about type but it also has to do a whole lot more because there's this additional consideration of of The performance of getting it on screen. How many typefaces can you load? What happens during that loading process? How many devices is it going to render well on or not? I mean, there's a lot of extra things that we have to think about this is this is the Grace Kelly analogy She had everything that Fred Astaire did backwards and in heels. Well, what typography is like that? Now the other thing that complicates our life is that we can't do this in a fixed canvas So a lot of the things that we learned about typography were really based on a fixed canvas a piece of paper or Ink on paper more specifically and the way that those things Worked the way that typefaces were developed the way that we set type the relationships between Large blocks of copy and small all of those things were based around fixed knowns of paper size And all of that has gone out the window in the age of responsive design And one of the other things that we have to think about is beyond The website we think about headless Drupal and Drupal cons rolling down the street We have to think about where does our content go? Well, Amazon has been selling more ebooks than print for three years Our reading experience is taking place on screens more and more and there's typography there The ebook format itself is based around HTML 5 CSS 3 and JavaScript So everything that we know about design and typography that we put into a website could also be going into a great ebook design There's how many really trashy looking ebooks have we seen There are a lot of other problems that come into play so We have to start a much more honest assessment of What we know what we can know what we can do and what we can't It's not the stuff that we don't know. It's the stuff that we ignore that is really going to kill us So how does this fit with responsive design? Let's talk about some of the things about our world in web design That we've been telling ourselves and our clients for so many years Well, how about 960 pixels? That's a lie. That was never a good normal That just happened to be something that we could conveniently hang our hat around and say enough people have a screen this size So we'll plan for that we'll design for it and that's where we'll stand That's our line in the sand Well, it gets worse Because then we came up with this pixel perfect Probably the single worst phrase ever perpetrated upon the world by the industry that we are in it's our own fault We came up with this and said of course we can make a web page that looks like that So we've been slaves to that for almost 20 years It doesn't have to be it probably never will be exactly the same And it certainly can't be the same on your iPhone as it is on a 27 inch desktop Why are we going to even try we want to actually deliver the content in an appropriate? Design and an appropriate experience for the context in which that design is being experienced So pixel perfect has also got to go We also have this little conundrum that I got from from a talk that Jeff Eaton gave and I thought this was really Pretty fantastic because when I mentioned that about ebooks mean think about a content management system. What's a page? It's not it's not a page. It's what fits on the screen at any given time, but it's a chunk of content Now that chunk of content might be what it could fit on a sticky note Or it might be something that's a 50 foot scroll. We have no idea because we're also working in a content management system We hope Drupal But we don't so we don't know what that content is going to be tomorrow So how are we supposed to design that perfect page when we don't know what that page contains? We don't know how big the piece of paper is and we don't know what kind of ink is being used to put it on the screen in the first place Is it going to be on an old XP machine because dirty little secret Microsoft doesn't want you to know XP is still about 40% of their installed base globally and that is the worst type rendering engine you could possibly imagine So all of the great type that we have looks just Horrible in that environment and then we have the other booming market of Feature phones all running opera mini that won't run at font-face at all probably ever So we've got these this sort of schism growing that we can't even define what a page is Let alone the screen that it's going to be on so we have to start casting these things out So let's start throwing some things out the window. Let's throw out screen size because we can't know Let's throw out device capabilities because we can't really know that either We also can't know what they're doing at the time What is their depth of focus on experiencing our design and what was the purpose of their visit in the first place? So to put that into into context it could be a phone But that phone may be in use at the line in the line at the bank Or it could be sitting on the couch or it could be sitting on the train Or on a plane so you don't know what is the depth of focus that I have in interacting with your content You can't know that so making any assumptions about what you should put in that mobile website Or how much content you should include is a very dangerous game for you to play with your client's content Or your own if it's your own website But that's a game that we can't afford to play and our content and our clients certainly aren't gonna buy it so When we take away all these things that we can't know what's left on the screen You see this BBC news site. There's not much left there when you take away the type It's only once you add it back that you start to understand what this site is all about So the type is a really pretty important aspect of this So we get it type is important Responsive design places an even bigger Weight on type it has an even bigger burden to carry because as the screen size gets smaller All you see is type It's one of the only design elements that you have left on the screen So how are you carrying that brand voice forward? How are you conveying the tone and the emotion that you're trying to bring? Through this site to the experience for that user When type is the only thing on the screen you can't rely on any of the other graphics or the other embellishments that you've put on the screen In order to convey that voice and that tone it's got to be done through the type And and frankly, I don't think that BBC is really doing that job very well here But I think the New Yorker is doing a fantastic job When you look at that on on iOS It has Erwin and it has Nutra the same typefaces that you see in print the same typeface that has been essentially Unchanged for decades identifying the brand voice of that magazine They've done a fantastic job of bringing it down here on this screen where it's small enough You can't see a logo but you look at that and if you're familiar with that magazine You are instantly familiar with the experience that you're having on this I think that's pretty fantastic that you can do that with just a few characters on the screen So in responsive design type plays a very very big role so We get we get it right so responsive typography we're going to talk about four main elements That are part of what makes type responsive type Actually, let me restate responsive typography because the type itself is not responsive There are people that are talking about things to do with that, but that's not really the focus here. So performance Biggest complaint that I had in that in that conversation in that bar a few years back was about performance So the problem is the default is add everything Well, that's a huge load to put on your user And it's a lot of stuff to download and that's going to have an incredibly negative impact on their experience so we need to choose fonts with care load only the weights and variants that we're actually using and We need to do it in such a way that it does not block the content getting to the screen And that's a very important point that I'll come back to because I think the browser vendors are really letting us down here progressive enhancement Our typography needs to embrace this at its very core because if your design isn't on the screen Then that is not a successful design That's the first criteria Performance so we need to have a solid baseline experience that doesn't block the drawing of the page and will work no matter what happens Then we need to address things like fout or flash of unstyle text or flash of unseen text in the case of the way Webkit and a lot of the other browser vendors have gone now introducing a delay of drawing anything on the screen Proportion is the third element as screen sizes shrink and less and less is on the screen to distract you The proportion between headings and body copy become absolutely critical But they can also be far more subtle And I'm going to show you some examples of what happens when you don't actually do anything with that during the course of Implementing your design and it can have some really negative Results both from an aesthetic standpoint, but also from a usability one So it's it's really very important to take some care with that And then there's polish Because really when that one type is the only thing carrying that brand voice on that small screen You need to sweat the details You need to pay attention to every little thing because there's very little else on that screen at any given time So that's our four P's that we're going to talk about today So let's talk about performance Well any designer is going to understand that great type isn't throwing everything on the page Great type is about making smart choices and making consistent ones that help guide people through The use of this website and this design You need to load only what you need So trade gothic next There's the typeface, and I'm generalizing a little bit, but Generally speaking trade gothic is a family what we're talking about specifically on the page is a font a Specific weight and variant which translates to a specific computer file that is loaded with that font information that means it's a download and Because of the vagaries of the web It's actually potentially for downloads because we actually need four different formats in order to serve web fonts to the broadest spectrum of users So when you think about body copy You've got regular italic bold and bold italic times four It's potentially 16 files that might need to be downloaded if you don't structure your code correctly So there's a lot of things to consider there in using a web font But I'll tell you I do use web fonts for body copy on every single site because that is the single biggest differentiator visually When you come to a website full of text Take it out of aerial put it into something that looks just that a little bit nicer a little bit more refined And you have a completely different experience. It's worth it as long as you do it with care But every one of these things has a performance cost So you have to have a budget and you have to spend that budget wisely This is what would happen typically with typekit when it first launched if you added a font to your project It would actually by default enable every single weight invariant now They don't do that anymore But I've enabled them all here so you can see what the difference is and inside that highlighted circle It's about four hundred forty K. That's being downloaded potentially on every single page when somebody's looking at your website But that's not likely what you'd be using So I set this project up as a as a sort of fictional example with this lab Sarah for headers We probably only need one weight of that and we only need four weights of the sans-sirif typeface So when I do it correctly, it's now down to about a hundred twenty K That's far more reasonable and with advances in the way they do their Font hosting most of that is cached so it's not being loaded on every page So there's tremendous performance benefits that have come from being smarter about what you enable And the font service is actually getting better at how they package that and serve it so That takes care of part of the problem We reduce the initial load, but there's still that moment of nothing on the screen And I contend that this is our own fault because we've been largely ignoring an easy solution That's been around for almost five years less than a year after Typekit launched they worked in conjunction with Google and created something called the Google web font loader That service has been available for us to use to load web fonts since 2010 And it provides an almost seamless way to get the content on screen without any delay Let's you tune up Your CSS so that there's less transition between that fallback web safe font and the web font that you want it to look Like so this is what happens on load either you get a fallback font Or you've seen nothing with some random underlines And then you see the content that you really want and we all see this all the time and we've become so used to it We start to turn it out tune it out But there's a lot of research that says if you don't get something on screen for your mobile users within five seconds You will lose 75 percent of your visitors and all the browser vendors have now introduced up to a three second delay Before they draw anything on the screen If the web font hasn't loaded yet That's a pretty dangerous game of roulette You've just wasted 60 percent of the time before you lose 70 percent of your audience By not putting this simple little trick in place. So use the web font loader and if you Google that There's lots of examples. I actually have some articles that have been published in various places On the fonts comm blog It's a very easy trick using the web font loader It's going to inject these classes into the head at the HTML tag of your page And it will give you the hook to get around this problem. So if you use this This one string will embed trade gothic and then the fallback is Helvetica and aerial That's going to leave a blank screen during the loading process, but if we add in this line after Wf inactive the web fonts have not loaded yet Use Helvetica and it will draw that right away as soon as that class is present. It's nearly instantaneous It loads the fallback fun. Now what you've introduced is a concrete absolute certainty that they are going to see on style text fine The key there is that it doesn't have to be unstyled That's the simple answer Because if you have that line wf inactive body Now you can use font size line height and letter spacing To even out the way the fallback font looks in comparison to how the live web font looks so you can avoid all that jumpiness and reflow It's actually quite a simple little trick And that really has been around for nearly five years. There's no excuse I may talk to people about this all the time and some of the most known people you could possibly imagine in the world of responsive design This was news to them less than six months ago That's very unfortunate because it's an easy trick, but thankfully they know now. So maybe we'll get past that Next thing is progressive enhancement because this actually goes hand in hand how you choose To structure your css Goes directly to how it will work when the web fonts don't load So this is this is a little example here. This is with the web fonts loaded Now using the same little technique. I'm going to show you what happens. We have no web fonts with no correction So this is the web font in the fallback fonts with absolutely no correction applied This is adding that correction in our css So i've adjusted the fallback css just a little bit to avoid some of the same line breaks and jumpiness And now the web font loads. It's a barely perceptible change Now with every pair of typefaces, that's going to be a little bit different. So there's always going to be something But the idea here is not to eliminate the change, but minimize the perception of change That's the key in a better experience by minimizing the perception of change avoiding reflow and menus wrapping down into the second row and that sort of thing People don't notice it quite so much. We hardly notice when a jpeg loads and it's rough at first and then it fills in We expect that as normal behavior It gets something on the screen quickly to preserve the space and then it gradually sharpens That's exactly what we're doing with the typography and as long as we keep things from jumping around We've really saved them from that whole jumpiness and bad experience So talking about proportion This is the next p Now proportion was something that really struck me about a year year and a half ago when i started getting into doing a lot more responsive design And starting to look at things on a lot of different devices and teaching it a little bit and it started to realize that All of my experience as a as a print designer led me to look at type relationships in one particular way But as the screen size has changed, I really had to reevaluate so We needed to start looking at it differently and the problem with what a lot of the responsive design solutions that are out There is they're concerned more about fitting more stuff on the screen Than they are about fitting things at an appropriate size to preserve the meaning and intent of our design That's very a very important concept there. We're talking about meaning and hierarchy That's why we use an h1 and an h2 We have semantic meaning in our code. We have to preserve it visually But we have to preserve it visually in a manner that's appropriate for the device upon which it's being viewed so when we think about Robert Brinhurst And and the elements of typographic style and and how big should our headings be to our body copy All of those things are based around a larger canvas and lots of other distractions But when it gets small, it has to look different So we have to think about those kinds of scales and the kinds of traditions that have been around in conveying Meaning and information because that's what we're all used to seeing But we have to think about it in a slightly different way. So we have this This shot here and you're seeing next to it That same scale applied on a phone and you can see it looks Kind of terrible. So that's using the exact same size Probably 3m Compared to the 1m of the body copy for both the site name and the h1 I would contend That this does a much better job of conveying that in a way that gets more content on the screen It's incredibly readable and it's still very very clear What the most important pieces of information on the screen are So that subtlety and proportion is this kind of sliding scale of heading sizes to body copy But one thing I do want to stop and mention is what you'll see in all of these is I'm not changing The relative size of the body copy. I'm leaving it at 100 percent or 1m And I'm not going to change that on any of these screen sizes because the device makers and operating system vendors have Put a huge amount of time and effort into figuring out what is a readable size of type on that device And by leaving that alone We allow them to apply their smarts and we just base everything else proportionally on that And we allow the device to work the way it should work best rather than trying to impose our own thoughts On what one relative unit of type should be And I found that to be a far more successful way of working That introduces fewer issues of compatibility and and sort of Flow in the design. I wish I could see the screen better Okay, so This is that scale in table form And and don't worry about trying to take a picture of this because the slides are already up on my site So you can download it and it's a lot easier to read when you look at it in a PDF If you happen to subscribe to dot net magazine, um, it was uh in an article No, I take it back typecast blog So if you look at uh, if nobody's ever used typecast before It's a fantastic service. I'm going to show you something from it later, but they have a great blog And um, even though it's a great blog. They still posted something for me on there And that's all about this and that's the link to it down there So that's all about the proportion of line height and and type size as as the screen size changes Um, so here's some examples on a few different size screens of having that applied And the sample code actually has some buttons in it So you can turn these things on and off and see exactly how things stack up So it's that same scale going across onto a tablet and onto a phone and everything looks Proportional to the screen size that you're on without really compromising the readability of the experience in the first place Excuse me Now one thing, um, I also want to add here is I've been talking about m's as that one unit of type And and that's the most common way of thinking about type and responsive design because it's relative to itself and if you have all of the Padding above and below in that same relative measure then everything scales proportionally as this as the type size changes What I also want to mention is that if you use m's in your media queries rather than pixels You will be future-proofing yourself against Devices that actually start to report their true resolutions So we have these very high desktop resolutions that are coming especially in some of these samsung touchscreen laptops Well instead of reporting what We sort of nominally say is a desktop resolution of 1280 by 1024 it happens to have a physical resolution twice that And all the websites were rendering teeny tiny in the middle of the screen because they were all based on pixels But any site that used m's in their media queries it rendered exactly as you would think it should Because everything is based on what that device maker says is one unit of readable type on that screen So it's very important to think about Both the devices on which it's appearing as well as how you're designing And I know you'll notice that i'm kind of drifting back and forth between design stuff and techy stuff Well, it's because I don't think you can really separate it I'm a firm believer in things like real designers code But I also think real coders need to understand design. I mean it's not something that can be done in isolation So here's a few other things about measure and scale that I wanted to bring up Um Maximum widths on on paragraph tags. It's one thing to let your design scale And have a smaller number of breakpoints It's a terrible experience to start to let line length get so long that it becomes hard for people to read So what I've found is and I think it's not really such a bad solution is by setting a maximum width On that paragraph you can actually get something that's roughly equivalent to what bringer strength mens for an optimal line length between 60 and 75 characters or so And then let the design flow you'll have a little bit more margin to the right of the text Or you could center that in the content area and that would work just fine too But it can preserve the integrity and ten of your design and the readability of the text Without having requiring that you compromise the rest of the design around it So a little trick like this at different at different breakpoints can can be really helpful Um, I wanted to point out that there are other css three Measurement units that are coming into play There's a few that I want to mention ch and cx are It's a ch is basically a character count So in the font that's loaded it you could set a maximum character count for that line It's very unevenly supported right now. So I wouldn't recommend it Cx is something that's supposed to be based on the x height Of the first font that's loaded That's also kind of dangerous because if you're using cx to define a width In your content, but it's actually loaded the fallback font not the live one You are setting measurements on the wrong unit and there's actually nothing you can do about that So they're unevenly supported. They're interesting know about them follow them well, that's cool and And be aware that there are things like optimized legibility or font size adjust There are a number of different flags and attributes that you can modify in css three Very few of them actually do anything in all the different browsers. So Some of them can actually Be a little harmful to the rendering of the text. So experiment with those things with care I'm focusing on the things that are most applicable in in most scenarios Again M's or relative m's That's another unit that people have been using frequently. That's another one that suffers from compatibility and older versions of ie If you don't have to worry about ie8, then you could use relative m's to your heart's content It's a way to use a relative unit that always references back to whatever you set in the html Element or at the very root of your document rather than something that looks at the immediate parent My simple solution to get the broadest compatibility is don't set font sizes on blocks Set them on font elements and then you never have to do these gymnastics So you get in trouble with m's by setting font sizes on a div And then putting several different elements in that div and trying to figure out what the font sizes really are Specifically gets you in a little bit of trouble But if you don't apply it to the box, but instead apply the font size changes to the text elements themselves You never actually have that problem And lastly here with measure and scale don't ever try and do a design with lauram ipsum because lauram is a poser That is not real text. It doesn't flow like real text. It doesn't fill a content area in a random and Unknowable way that gives you this natural feeling of language So instead go to a site like filerata and copy a few paragraphs of mobi dick That's what I did for all of my sample stuff. But like if you can't get real content From your client at least get real content from a book or something That you can put in your design that will actually give you a more natural feel with varying word lengths and gaps and Paragraph lengths that will give you a more natural feel um polish I'm gonna come to polish and I'm gonna come to questions Polish is something that I think I probably had the hardest time thinking about this as part of responsive design or responsive typography Until I started looking at a lot more stuff on really small screens And working with a lot of publishers And those two things really kind of came brought it home to me that that responsive typography is about more than screen size It's about experience in reading and taking in content That in any way that you come in contact with it so Here we're looking at salami and headers and fear of sands in the body copy And they're really nice typefaces But there's more that you can do with them And by leveraging open type features that allow us to bring more of our typographical knowledge into play better kerning Ligatures real fractions things that we can get in here without having to automatically go and search and replace Characters and encode them with with unicode characters and that stuff By getting a web font that actually has open type features enabled with a line or two of css it can go from this to this So we've got better letter spacing. We've got beautiful ligatures connecting the letters and just a Generally more polished look so that looks like an editorial headline That looks like something that can be a magazine or a book And we can do that with common readily supported css That you can see in every shipping browser. I can even see it look like this on my firefox phone You can't even buy those in this country But it's got a great browser on it so There's a lot of detail and polish that can get into your design And when you're looking at it on a tiny little screen, that's the only thing that is carrying the weight of your design So those tiny little details get really magnified when you look at them like that Now there's some other things that we can do so here's some other demonstrations of some of the open type features so we've got this font it's called fairbank and this was a Site that we did for monotype early last year to demonstrate these open type features And we had the chance to play around with a bunch of these typefaces and look at these features And how they look when they're on and they're off and and so by toggling this feature on Look at those beautiful swashes and and sort of contextual characters that came in It's not a huge difference for a lot of people, but the overall feel Is very very different so that went from kind of interesting to lord of the rings credits That's kind of the that's how I always saw the difference with that one now. Here's another one fractions So food sites those are pretty common a lot of people have to deal with fractions and recipes And we've always had to do things that look pretty ugly a one space one slash two It's one and a half But it really doesn't look that way and unless you start doing a lot of character replacement And a lot of searching and replacing you're never going to get natural fractions unless you have an open type font Where magically it will turn it into this Or this there we go So that's what the css applied Somebody still went into the content management system and typed one space one forward slash two But because it's an open type enabled font That's what gets rendered and that's a much nicer result So that's a lot of nice little polish and fit and finish that we can apply now. Here's another one so Layout again layout of content We can do some really interesting things we can get a nice initial cap We can have a paragraph that splits into two when you get on a larger screen And when it gets down onto a smaller one It collapses into a single column of text the block quote isn't quite so Pushed in and separate from the rest of the content and that initial cap is scaled down So it doesn't really kill the overall Proportion of things on the screen all of those things were done with basic plain old vanilla css And the nice thing is the fallback from this should it not should a browser not support the columns Is it's just going to be in a single column? So these are really safe things to add that don't really have a any particular downside But just by being a little bit more considered We can really bring a lot more of our design knowledge and our capabilities into the world without introducing a lot of headaches in the workflow process And that's where the starting points are really important And I think a lot of people in the room probably do that you have a starting theme that you always work with And you put your stuff in it you put your toolbox there So I did things like create an open type feature sass mix in So that's up on github and you can get that and add that into your project and turn on open type features really easily And then I've got a base theme that I created because I Used that a lot and I decided it would be nicer to put that on d.o So I took my shortcuts and put it there and then you can sort of benefit from all of the typographic stuff that I that I put into that That theme is called beep addition if you're interested But there are lots of other good ones out there But I think that it's you know coming back to community And looking at that community in the larger sense in this room and in the smaller sense of your own company And your own group of friends and your own meetup group How can you take what you learn and even just apply that to yourself in a more systematic way? These things don't all have to be done From start to finish on every single project if you build them into your starting point, then you're just tweaking the values as you go So this is the last one this one does require a module, but the awesome thing is there's a module for that And and there's a module for Drupal that's better than what's available for any other content management system So that's pretty awesome. So typography is one of my favorites. I know there's at least one other person in the room that uses it pretty regularly And that enables you to do a bunch of interesting things Two of the most important ones are replacing hash marks with real quotes. That's pretty nice It's good to be able to have that happen automatically So you don't have to worry about what people are typing in the in the content management system edit window And orphans Don't leave your orphans behind an orphan is a single word on the on the next line of a paragraph Just sitting there all on its own and when you have a layout that scales You will always get orphans because the width of that paragraph is always changing And all those little tricks that we apply in print Are not going to happen here, but we turn on the typography module and it does this nifty little thing It puts a non-breaking space between the last two words. So as I bring this in just a little bit You can see there's room for that second to last word on the line before But it's not going to go there because there's a non-breaking space I have a nice little a level of polish that's been added to the design That I know will always be there and the client does not have to think about it And I got to tell you in a room full of people from large publishers last week in new york This of all the things that I talked about that got the biggest response And I can't even take credit for that. I just turned a module on So responsive typography I really believe that when you look at all of these things together, this is not just a subset of responsive design This is actually something more. This is about design aesthetic. It's about typographical knowledge And it's about performance and coding all of those things together It's about adapting We need to make sure that we're adapting to everything. This is the web. Let's respect the web That's the phrase that I want you to take away respect your users Respect the web get your content on screen Don't let your ego get in the way Tune the fallback fonts. Give them the fastest experience which becomes the best experience It's about designing for what's next So here's a neat little thing. We just we're in an olympic year Cast your mind back to the previous winter olympics and you know what was in none of our bags at that time An ipad And if you go back to the winter olympics before that, you know, it also wasn't in your pocket An iphone So in two spans of olympic years for the winter olympics There's been a complete sea change In what we think about is normal in our computing and content consumption experience You have no idea what's going to come next, but one of the things that I guarantee you will be Are things with resolution and if you don't start thinking about type and relative units and how these things work together Then you are going to be in a very deep hole When the next version of the iphone comes out Or the high res retina displays come out on more and more of the desktops and they start reporting true resolution We are all in a deep hole if we are not considering these things. So let's look forward Let's make type a central part of what we're doing Make sure that we're thinking about performance and progression and proportion and polish And make sure that we're doing that in drupal So How do we do that in drupal? Well, I differ with some people I think about this I think type is completely and intimately tied to the design of your website I don't think that this is something that should be added on in a module That's perhaps not the the easiest thing to get people to accept, but I think it's important. I think it belongs in the theme 100% I think there are some site building systems Where you're trying to build a platform that people are using and maybe it's appropriate there to have a theme that can Select from different typefaces, but that's the exception not the norm Most of the time we're working on one site one design. It's not something that's meant to change It's certainly not something you want to put in the hands of your users Don't waste time putting it in a module put it in your theme Add the layered approach so that you can deal with javascript and no javascript making sure things load Asynchronously those are things that are difficult to do in a module The font your face module certainly has a lot of my affection I spent a bunch of time working on the ui for that and barris and Scott reigning did some really amazing work on that So I really don't want to take anything away from them, but what it doesn't do yet Is make use of the web font loader and make use of fallbacks in a way that ensures that the web fonts load Even if javascript isn't there Because you can so this is kind of an example So this is just cut from that sample page that I was showing you and what's on the screen right there Is all the javascript to asynchronously load web fonts from google web fonts So that it's not going to be a blocker in the page loading process itself And then in a no script tag it has the css So in case you're in an environment where there's no javascript at all The web fonts will still load you may lose some of the loading benefits and the smoothness there But it's still going to get them on the screen and preserve the integrity of your design So I think that In designing the type designing the theme these things are all together I think they belong in either the template files or however you're going to structure it But I think it's really important that we acknowledge that Those things can't be separated and you need to do it in this layered way if you're going to provide the best possible experience Now I said I was going to come back to typecast and prototyping and I just want to show you quickly What that looks like so some of these screenshots were actually made in the typecast app itself Which is a web based way to look at web fonts from a wide variety of different vendors And actually build a little type prototype Typographic prototype that even has responsive breakpoint views. So they've done some pretty interesting things there It's really worth a play If you want to take a look at that and you can also export all of the css So that you whatever you play within there you can actually take away and work with in your own in your own site so It also is shareable and that's really important too So as you're developing your designs you can actually send type prototypes to your client And then test them out on different devices and see how they look So i'm going to close this with a quote that is a great paraphrasing of that real designers code thing But most of it was a really great guy that I met in london about a month ago and And he had this line in his presentation And I think you could never imagine a painter Not mixing their own paints not being so intimately familiar with the materials with which they're working We need to be the same way as designers We need to understand what are the implications of what we're trying to do And how best to deliver that Experience to the user and that means we need to understand a little bit of these nuts and bolts that i've been showing you You don't have to do it every day But I really think that you you need to get a better understanding of exactly how it works And what it's doing in order to provide the best overall experience And towards that end I'll come back to this and this is the last slide my shameless self promotion It is out in an early release right now I've been working on this for a couple years and it has tons of examples in it tons of The sample code that i've been talking about here Most of what you can find if you just look me up on github anyway, but By the book it's not that expensive um So at this point i'm going to go here And say thank you And we've got some time for questions Um slides are already up you can grab them um if you are so inclined we would certainly appreciate it if you would rate the session So questions Thank you You know the drill now the mic in the middle everybody line up Go ahead mic in the middle It's going to take a little change in thinking to start thinking about Maybe a queries in m's instead of pixels. Can you tell us what? Cut points you normally use one or multiple and and what those sizes would be It's actually a lot simpler than you think And and it's math. You only probably have to do once It's if your type is set to sort of that hundred percent One m is basically 16 pixels. So just do the math that way And instead of doing a break point at Let's say you're choosing 400 pixels divide that by 16 and and there's your number. So I I usually start with like 25 m's um 40 something About 58 or 60 and then maybe one slightly bigger than that But you only have to do that math once it's really it's not actually that big a deal But it does have huge rendering implications. So it's it's really worth it. Thank you sure We recently had a client who needed drop caps and so I did a lot of reading about the different methods Like the first pseudo class and um using spans. Do you have a preferred Method or any thoughts about that? Um I think it's not sustainable To rely upon classes and I think it works well enough in a large enough percentage of browsers that using the first of type First child it's actually a chain of two pseudo classes That will get you the first letter of the first paragraph So that way you can sort of scope it to that div or or you know that container for the content itself And then you basically look like p colon first of type colon first child or this might be the other way around But that will give you the effect that you're looking for in a pretty reliable non destructive way And the fallback is simply that it stays the same size So unless they're really concerned about every single possible older browser, that's probably the safest way to go Okay, thanks and a quick another quick question. What was the css class or property that you used for the two columns? The text that flows into two columns That was actually just css columns. I mean it's really like nothing nothing fancy about it. Um, just look it up on css tricks That's where I crypt the code from Um, I haven't done it enough to be able to tell you off the top of my head, but it was pretty easy to find Okay, cool. Thanks sure Um, thanks for your talk. That was very compelling. Oh, thank you So, uh, i'm a developer. I used to be a designer and and one, uh area has been very challenging for me in Web typography is that the the design world really hasn't kept pace with the development world In regards to open licensing I and and to be honest, I don't really seem interested in having that conversation is very interested in proprietary like copyright all rights reserved, which for me working in a gpl world makes it Basically impossible to ever package a distribution with the fonts included all I can really do is Like call out to google web fonts, but you know, who knows If they'll have internet access when they're loading it up. So what do you what do you do about that? Well Making fonts is hard so I That's something that I used to harp on a lot. Um Don't use font squirrel. You're almost always going to be breaking the law in doing that I guarantee it if you're getting anything that's other than an open source typeface, but There are more and more good open source typefaces out there open sands clear sands Source sands now Fira sands has come out and that one you can get from the The mozilla website. Um, those are all ones that have some form of open source licensing Um, so there are more options Um, most of the services are now getting more and more affordable as well They're starting to realize that licensing terms do have to change The services themselves are pretty cheap and I really recommend them because they update the fonts for you But um, it does remain a challenge. It does limit the palette that you have to work with. I I agree um, I don't have much A better explanation though, unfortunately other than it's a huge amount of time that they spend to make the fonts work well So it's not likely that they're going to end up giving a ton of them away Thank you. Sure As an old school typographer, am I booming a lot enough as an old school typographer? I love this session. This was awesome. You're singing to me You are my target audience and unfortunately have a very boring Pragmatic question. So the my communication manager that I work with she does not care for All right rephrase she wants laura mipsum because it's obvious. It's not real content I'm sure you've had that push back before Sure. Um, but if you put a couple paragraphs of mobi dick in there, they're not going to think that's real content either I I love filerati. I've used it when I got I got in trouble for it. Um Um, what I would say is um Push back and say then deliver real content Because laura mipsum has a rigid repeating Set of breaks that are never going to flow the same as real copy does And and so that's the push back because if you don't want us to use it Then deliver the content that should have been here in the first place And and we'll work with that It's a tough argument. I I get that but I forgot to choose my boss, so Tough love right and so it's the it's uh dummy text versus greek text and the problem is um It's What ends up having it's the same thing as as picking a photo and putting into the design You always pick the wrong one and that becomes what the conversation is about. I do understand that but I think It's important about the integrity of the design So it's just finding some passage that's acceptable and push back and and find that Go ahead We have a multinational Multilingual localized site and so dealing with sureric and japanese and korean and all that Do you have any recommendations or tips that you've dealt with running into that? Um, yeah, actually, um I I try not to pimp any one given service, but fonts.com does do dynamic subsetting Um, especially in their non-western stuff. They're starting to do it in more kinds of character sets, but if you Want to use a service They've probably got the best solution for using web fonts in multiple language Environments, and we'll give you the best performance by adding that subsetting I guess that's it. Thanks everyone Let's all go get a beer