Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
The Future of Web Typography19:40 with Jake Giltsoff
A look into how we as designers and developers of the web have such an important role in shaping the future of communication through typography.
[MUSIC] 0:00 So today I'm gonna be talking a bit about typography and the future. 0:04 Or rather, some possible futures. 0:09 No one knows the future. 0:14 And I'm not gonna stand here on this big stage and 0:15 tell you that I know all the answers. 0:17 In fact, I'm gonna stear pretty clear of the answers and instead, 0:20 I'm gonna pose some questions. 0:23 I'm gonna plant some seeds into your wonderful minds and 0:27 hopefully start some conversations. 0:31 What do you think of when you think of the future? 0:36 The future is this big imposing thing that we have 0:42 connotations of grandeur and distance and flying cars, spaceships. 0:49 It's especially fancy if you write it with an S in brackets at the end, 0:56 that really adds an air of mystery to your talk. 0:59 Sci-fi movie fans amongst you may envision scenes like 1:06 these when you think of the future. 1:09 Dystopian realities where we're flying around space doing 1:12 cool action packed activities, 1:15 unfortunately leads to a rather dismal future for typography however. 1:17 Maybe now is the time to buy an extended license for euro style or 1:22 other similar fonts. 1:26 Light text and dark backgrounds must be about to kick off any day now, but 1:30 we can pretty much forget about serif type faces from ever having existed. 1:35 But this isn't going to be a talk about those futures. 1:41 If you want to find out some more about them, you should check out these blogs. 1:43 Typeset in the Future, by Dave Addey, from Apple, is just the best kind of nerdery. 1:49 He's working his way through all the classics and 1:55 dissecting their type choices. 1:57 And there's another called I Like Interfaces, 1:58 which is pretty self explanatory. 2:01 You can easily lose a couple of hours in these. 2:04 I wanna talk to you today about something much more exciting. 2:08 I wanna talk about our future and how we, as web designers and developers, 2:14 have the power to shape communication over the coming years, through typography. 2:19 I don't just mean what fonts we're going to be using, or why we're suddenly going 2:26 to realize that using super light type isn't such a great idea. 2:29 After all, style is temporary and trends will come and go. 2:35 What I want to get down to is the message. 2:39 How what we do on a daily basis is important. 2:42 How many times have you been asked what you want to be doing in five years time, 2:50 or where you want to be? 2:55 These are those bull [BLEEP] questions that we get asked in school. 2:58 Five is just such an arbitrary number in this context. 3:02 Well, you might have guessed it. 3:05 I've got a question. 3:07 I want you all to close your eyes for brief minute with me. 3:11 Don't worry I'm not going to do anything mean. 3:15 That'll be an logistical nightmare. 3:18 Just take a deep breath, I want you to think. 3:20 Imagine yourself in five years time. 3:24 Where do you wanna be? 3:29 What do you wanna be doing? 3:32 Now, I'm not so much interested in these things exactly but 3:36 what I am interested in is what you think you'll be reading, and more importantly, 3:38 how and where you think you'll be reading it. 3:43 Do you picture yourself checking, checking Twitter on an internet-enabled fridge? 3:47 Maybe you're reading a novel on the Kindle, what even was Paperwhite, or 3:52 are you checking an email on your Apple Watch 5? 3:57 Imaginary future Jake is gonna be super rich, so he's got the gold edition. 4:01 >> [LAUGH] >> What do you see? 4:05 Okay, you can open your eyes now, but just mull it over a little longer. 4:10 This exercise may seem a little trivial. 4:19 But it's always good to be thinking about 4:21 the challenges that we soon might have to face, so we can be one step ahead. 4:23 The problem is, it's kinda hard to think about the future. 4:26 I can barely think past tomorrow, let alone five years from now. 4:32 And thinking about technology is even more difficult, 4:38 because how can we know how how it's gonna have evolved? 4:42 I was listening to the radio whilst driving home quite recently. 4:47 And I flicked onto radio four as one does, and 4:50 I caught a part of a show that was looking back over the TV series Tomorrow's World. 4:56 And this quote really stuck with me. 5:00 We find it hard to think about what the future of something will be, 5:05 because we always see it in our own context. 5:07 I love Dame Wendy Hall's choice of words here. 5:11 Context. 5:16 Context is key to the work we do on the web and especially typography. 5:19 Our design solutions are dependant on the context of the reader. 5:25 And what the text is trying to achieve. 5:29 Take typography in responsive design for example. 5:35 It's not so much about setting text that can be read on any screen size, 5:40 but more about setting text that can be read in any context. 5:43 So I'm designing and building systems that can respond to that context and 5:48 provide the best most appropriate reading experiences. 5:51 But what if the future context is a world where there's only one language? 5:56 What if that language is emoji? 5:59 They're pretty universal, maybe it's the way to go. 6:01 I'm not gonna get into the logistics of how we actually speak to 6:07 each other, but still. 6:09 In fact, this was actually tried, there was a startup messaging service called 6:11 Emojli that some of you may have even used, which would only send emojis. 6:14 But unfortunately they shut down at the end of last month, so 6:19 maybe there's still hope for letters. 6:22 What then of future contexts? 6:28 We are limited to screens for our interfaces. 6:31 How do we go about setting type in virtual space? 6:35 This might look like I've dived back into another sci fi clip but. 6:40 This is a demo from a Hackaton a couple of months ago. 6:44 That's made with the oculus development kit, and approaches that bleep sensor. 6:47 How freakin' cool is this? 6:53 >> [LAUGH] >> We're going to face so 6:54 many new challenges on the web over the coming years. 6:57 And we're facing them even now. 6:59 Have any of you been doing any work for the Apple watch yet? 7:06 I know it doesn't have a browser as such, 7:10 but I still feel like it's within the realms of the web. 7:12 How do we go about sending text on a screen only this big? 7:16 And would anybody even want to read anything mildly context on their wrist? 7:20 The great thing about typography is many of the challenges that we face today have 7:26 been thought about before in one way or another. 7:31 Take this map from the 1920s. 7:36 These individual scrolls contain directions and 7:39 guidance to be viewed on your wrist and much the same size as the Apple Watch. 7:43 I think these are really beautiful and it's kind of funny that the type is quite 7:50 similar to how the new San Francisco font turned out for the watch. 7:55 They came up with a similar solution for their context. 8:01 Did you know that the first italic type was designed and made for 8:07 printing pocket-sized books? 8:12 It was more condensed than the typical Roman type and 8:15 it held it's clarity better so it could be printed at smaller sizes. 8:19 Now this might not sound like anything too impressive to us. 8:24 But it was revolutionary for the printing industry at the start of the 16th century. 8:28 Before then, books were large, heavy, and expensive. 8:34 But these pocket format books were transportable and affordable, so 8:40 they helped to spread knowledge much further. 8:44 They're also a similar size to the iPhone. 8:49 Now, I'm not saying that we should set all text on mobile devices in itallics. 8:55 But, it's interesting to see how the same task was faced in a different context. 8:59 Now, these are just two examples from a wealth of rich history in typography. 9:11 Centuries of work has gone into figuring out solutions to problems that we face 9:17 today and we're gonna face in the future. 9:20 The web is the biggest challenge that typography has had to face in a long 9:26 period of time. 9:30 But that doesn't mean that we have to start from scratch. 9:32 Until the web, text had always been fixed. 9:37 Until not that long ago, type was literally made from metal in fixed sizes, 9:43 and arranged in forms to print on specific sizes of paper. 9:48 The web is a very different environment, thanks to this. 9:55 This is a whole new challenge for typography. 10:00 Now I'm not saying that we should think about the web exactly as paper, 10:04 because it doesn't work like that. 10:07 But we can take everything that we've learned before and 10:10 use it for our own good. 10:12 >> [LAUGH] >> I had too much fun making this. 10:14 We derive our metaphors for the web from print, like pages, 10:17 because print is the medium that preceded the web. 10:22 But yet we have this disconnect from past typographic best practices, 10:27 simply because many of the typographic intricacies 10:33 couldn't be achieved with the technology or the screens. 10:37 But what's our excuse now? 10:42 I feel like typography has become the elephant in the room of web design. 10:48 We have this divide where designers, they love it, 10:54 but maybe they feel like they don't understand it all. 10:58 And developers pretty much just hate it because it's made their life 11:01 difficult for so long. 11:04 I've had countless conversations with people revolving around 11:06 feeling insecure about typography. 11:09 Like they're missing something. 11:11 It's got this stigma attached to it that you have to know exactly what you're doing 11:14 for it to be right. 11:19 But that's a load of rubbish. 11:21 Can easily forget the important of the things we work on. 11:27 Things we do day to day can feel a little insignificant. 11:31 By improving the typography in the things we can do, we can help to do so much more. 11:42 We can increase engagement for our product or our clients. 11:48 It's about setting text that's easy and nice to read, and 11:53 guiding people to the information that they need. 11:57 If text isn't nice to read, then nobody is going to want to read it. 12:00 We can add more personality to our content. 12:04 The way that you set your text and 12:09 the typeface that you use all add to the tone of voice. 12:11 And we can add some authenticity and professionalism to the work we do. 12:16 There's so much information out there on the web that we need some way to show that 12:23 ours is worth reading. 12:25 Otherwise, it will simply be skipped over. 12:27 These are just some things that we can measure in what we do. 12:32 But, in the bigger picture of typography, 12:40 we generally have to power to make some progress in communication. 12:43 Maybe it won't be quite as revolutionary as pocket books or pocket computers, but 12:53 we have the power to make some difference. 12:57 Tim Brown, my colleague at Type Kit says that the web is the best place for text. 13:03 Text, is the most effective, 13:10 powerful communication technology that we've ever had. 13:13 And the web that's to be indexed, shared, searched, 13:15 translated, quoted, branched, the list goes on. 13:20 The web is the best place for text. 13:27 We get to do things that our ancestors never would've dreamed of when they were 13:30 thinking, what do I wanna do in x years time? 13:35 The web is changing the way people communicate. 13:45 And we get to help guide that change through typography. 13:48 And we're the perfect people to be doing it here at Hybrid. 13:54 We understand a balance between design and code because that's where typography lies. 13:56 Typography is a hybrid, it's as much the design as it is the implementation. 14:04 We're all typographers. 14:13 Some of us just might not know it yet. 14:16 The most important thing to remember is that there are no rules, 14:19 only good decisions, as Jon Tan puts it in his great books on web typography. 14:23 Learn to make better informed typographic decisions and not be put off by it. 14:28 As long as you can justify these decisions and the text is nice to read, 14:35 then you can't do anything wrong. 14:38 So, we've imagined some potential futures, we've touched on the past and 14:44 how we can look back at the history of typography and 14:51 learn from it, and we've looked at the importance of it. 14:55 Where can we go from here? 15:01 There's a wealth of information out there on type and typography. 15:04 But it can be hard to know where to start. 15:11 I've just shared some snippets with you today, but the rest is down to you. 15:16 I've collected a list of resources and 15:22 references that I'll share with you at the end. 15:27 And, these are some recommendations of where to start, and 15:31 how you can digger deeper into web typography and learn some more about this. 15:34 Another great place to start is working on side projects. 15:39 These are a great way to approach top ideas so we can see what works and 15:44 what doesn't. 15:47 These are perfect material to take browser vendors and say hey, 15:50 this is the thing that we want to be able to do. 15:54 For too long, 15:57 browsers have been the biggest bottleneck in the progression of web typography. 15:58 We need to tell them that this stuff's important. 16:05 We have the technology to implement all sorts of powerful typesetting 16:09 capabilities, yet key features are still missing from browsers. 16:12 We don't yet have the level of control on the web that we do in print. 16:21 And until we do, we can't fully explore what the medium has in store for type. 16:27 I'm gonna share a few of my favorite side projects with you. 16:34 Marco responsive type setting that's based on how far away you are from the screen to 16:36 provide an optimal reading experience is a couple of years old now, but it's still so 16:43 great at illustrating the idea, even with my really grumpy face in this video. 16:48 This isn't such a nice experience to actually used, 16:54 but I love the thought of using it on page load to detect where the reader is, 16:57 to give them a reading experience that's tailored to their context. 17:01 Spritz is a method of showing one word at a time in the same place and 17:07 allowing the reader to alter the speed based on their preference. 17:11 I think that this could be the way to go across more screens and wearable devices. 17:16 Ignore that. 17:22 Can you imagine using this on the watch? 17:24 Could this be a native web experience? 17:26 Can we read like this for a long period of time without our eyes exploding? 17:29 Who knows? 17:33 Recently there's been a lot of talk about making type itself responsive. 17:36 Letters are all made up of vector points, so 17:41 what if we could extrapolate between our break points to scale and 17:43 change the actual letters rather than the type setting? 17:46 We have a great opportunity ahead of us. 17:57 We need to educate ourselves, our peers, and 18:00 our clients on the importance of typography. 18:03 And we can shape the future of communication. 18:06 We're the ones who are working on this. 18:13 The future of typography is us. 18:15 Thank you. 18:19 [APPLAUSE] 18:23
You need to sign up for Treehouse in order to download course files.Sign up