Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Typography: Hand in Hand With the Electronics26:10 with Gunnar Vilhjálmsson
Adapting typefaces to new technology has been a big part of Monotype's legacy. Along the way they have enabled the spread of many of the 20th Century's favourite type designs, including the Gill Sans, Univers and Avenir typefaces, and the always-popular Helvetica design. Monotype's Gunnar Vilhjálmsson will give an insight into how typefaces have been meticulously and consistently adapted for new technology and mediums, covering everything from the design of mechanical typefaces to eText fonts; as well as the ways of ensuring a design works at any size and on any screen.
[MUSIC]. 0:00 Thank you. 0:10 [NOISE] Yeah thanks for the introduction. 0:10 Its was probably longer than my my actual presentation's going to be. 0:15 I'm not going to talk about the any acquisitions of of monotype today. 0:20 [COUGH] I'm not going to go through the, the history of of type 0:26 making at the company and how it relates to what we're doing today. 0:30 [COUGH] So, the monotype name has a long history. 0:33 The company was founded in at the turn of 0:43 the 20th century, and it's primarily selling mechanical type machines. 0:46 And I want to stop here, and tell you it's 0:52 all right to, to take a nap now, because I'm 0:54 only talking about the past, not the future, and I 0:56 know your all pretty pretty tired after, after the runs. 0:58 These machines were a, were a turning point in setting type 1:04 for printing and [COUGH] in terms of our speed and efficiency. 1:07 It was a revolution for the, for the printing industry. 1:11 And in this beautiful photograph here, you can see 1:16 inside the monotype works in UK, in the 20s, and 1:20 you can see how big and vast the, the operation 1:23 was, with all these nice men there sampling the machines. 1:26 But at this time typefaces were, were not the main 1:31 focus of the company, but mainly to sell machine, and 1:34 typists would just share it with them as kind of 1:38 a part, part of a packet there to the customers. 1:41 However, [COUGH] from early on, monotype has, commissioned prominent designers, 1:47 and artist work on the type designs for the machines. 1:52 And, one collaboration that, turned out to be very fruitful, was with Etty Gill. 1:55 And up here is a draft by him from 1933 of, of one of 2:01 the designs he made with monotype, the the ultra bold version of, of Gill Sans. 2:05 These type faces of course didn't emerge in 2:13 full form into the world straight from the designers. 2:16 The designers commissioned by monotype. 2:21 They worked closely with the, the type drawing office which 2:23 was a very prominent department in the, in the monotype 2:27 works, and they work together on top things to work 2:32 with technology and refining details of a type face as well. 2:35 And in the end making technical drawings like this lady is doing here. 2:41 She's working on another type face [INAUDIBLE]. 2:44 And if you, you probably see it. 2:47 She's working ona, on an upper case R. 2:51 And here's one example of his close 2:57 collaboration the sketches and modifications, like this here, 2:59 they were sent back and forth between the 3:04 designers and the monotype, the drawing of this. 3:06 And it needed many stages before you would get, or hit the right string. 3:09 And and of course, it was a success and 3:15 failure, so all the way like like in everything. 3:17 And you can see the remark by Eric Hill here, he, 3:20 he just didn't like these words, cases that came back to him. 3:23 And I'm sure you're all familiar with, with Gill Sans, the type face. 3:27 It's kind of a standard in the UK. 3:31 It's kind of the identity of, of Britain, along with the, the Johnstone type face. 3:33 And [COUGH] you can see that the, the G and the R, the A, are very different 3:37 from, from what the final re-shots were, because now 3:42 we have very eccentric topplestory G and topplestory A. 3:46 It's very defining for the Gill Sans design. 3:50 And this is the so called technical drawing. 3:55 This is the final state of the, of the design of the characters. 3:57 And this drawing was then used as a, as a 4:01 starting point in the, the production of, of the matrices. 4:02 And, [COUGH], there were many people behind the production of, of, 4:06 of these type faces who looked after the, the quality of the design and after the 4:11 technical drawing was completed and 82 staff 4:16 production phase took over, involving tracing, cutting 4:20 of wax patterns of letters with the 4:24 pantographs electrolytic bath and and finally striking 4:26 to punch this into a, into a bronze plaque to make matrices. 4:31 And the precision of these machine tools was a, quite amazing. 4:36 It was supposed to ensure accuracy within 4:41 0.0002 inches, which is quite impressive, I think. 4:43 And these are the matrices and this is how 4:48 it was shipped to the customer with the, the machine. 4:52 They were, they were stored in this matrix case. 4:58 And what we see here is later version of the, 5:02 of the cases where the operators could stuff 272 matrices. 5:05 And in there you can have roman, bold, italic, small caps, 5:10 basic arthi ligatures and the two sets of, of numerals as well. 5:14 And to to make this at app there was a unit system. 5:23 That all the sets were designed into, and ranging 5:29 from five units for the, for the narrowest characters like 5:32 I and L, and up to 18 units for the 5:36 widest characters like W and the M [UNKNOWN] for example. 5:39 But most of the characters had eight to ten 5:43 units and, and the figures around nine, nine units. 5:45 And designers had to, had to have these constraints in 5:49 mind when they were designing for the, for the monotype machines. 5:51 And this is how the actual type looks like and you can see how the 5:57 uniform, how uniform the widths are and one of the nicest features of, of 6:03 the monotype was that it allows curling like you can see on the F in the word eff, 6:09 eff, effec, effectly which probably is just supposed to be perfectly. 6:16 The both the ascender and the 6:22 descender are are overlapping the neighboring characters. 6:24 And Times New Roman is, is another typeface that everyone should know. 6:31 And these are the various versions of, of the monotype metal design. 6:36 And this is an interesting image that shows 6:38 how the design was adapted for different point sizes. 6:42 And this was done to get the, the optimum output in any, in any given context. 6:46 And you can see how the design is, is, modified 6:53 with a huge difference in stroke contrast and proportions between sizes. 6:56 And I will actually come to this solution again later in the presentation. 7:00 [BLANK_AUDIO] 7:05 The Linotype is another mechanical typesetting machine. 7:06 It worked a little bit different. 7:11 It did not spit out individual pieces of, of letter forms like the monotype. 7:13 But whole lines of type at once. 7:18 And this here is a, a whole piece of metal. 7:20 And one difference in the typographic output of, of the Linotype 7:25 and monotype was that Linotype could not handle kerning of letters. 7:28 For example the arthi ligature, [COUGH] on the top right, where 7:33 the terminal of the second f should normally flow over the e. 7:36 And then also in the F and the word of, down at the left. 7:41 You can see how the f is tilted a little back 7:48 to prevent it opening spacing in the, in the following, following letters. 7:51 So the designers had to uh,had to find 7:58 solutions for this for this for this spacing problem. 8:02 And you can see it, it kind of affects the overall design. 8:09 And thi, this means that you would have different design of 8:14 Times New Roman for these two marked scenes like this image shows. 8:17 And actually the Times New Roman design for, 8:22 for Linotype was only called Times, or Linotype Times. 8:24 So the spacing of of type in the 8:28 monotype was, was always more refined than the Linotype, 8:30 and monotype was most often used for printing things 8:34 that were meant to live longer, more delicate items. 8:37 And the Linotype was, was the prime choice for, for newspaper printing. 8:41 The next turning point in, in typography and printing was photograph setting. 8:47 And one of the fantastic things about phototype was that you 8:53 could use the same sign to set type in different sizes. 8:56 Now that's a big revolution compared to what we 9:03 saw earlier, where you have to, had to design something 9:05 for each, each size, and have a, have a 9:09 different chunk of matter for, for each, each point size. 9:11 And like this specimen states here this preview of, of a monotype mono photo, 9:15 Gill Sans in both 24 and ten points, it was made with the same matrices. 9:21 And it also says that you can output any 9:27 size from eight to 24 points with the same matrices. 9:29 And for seven and six points size they, 9:36 they do, advise you to use another set though. 9:39 So it's a pretty wide range, you could certainly sat with the same design. 9:43 And to make this this wide range of, of point sizes work. 9:49 Photo type versions of typefaces had to be adjusted to this new process. 9:53 And light, of course, played a big part in that. 9:57 And meaning that that, that all the fine strokes 10:00 and details were in danger to be burned out. 10:03 It's just like we see with the small type on 10:07 screens today, the back light can burn out the details. 10:09 So, in this image you can see how they, they solved this problem by 10:14 [COUGH] giving the final, the finer details 10:18 more weight just to avoid this happening. 10:21 And this solution will also be we can see 10:25 applied later to typefaces tailored to two screens especially. 10:29 This is pretty bizarre. 10:36 This is actually my favorite tricks of, of all these optical adjustments of type. 10:36 And this is an a with [INAUDIBLE] from, from Neue Helvetica, and apparently when 10:44 these shapes were being copied between films, 10:50 the sharper corners would tend to blur out. 10:54 So can you see the details of the back as well, or? 11:00 These if you look at the terminal, and the accent 11:04 as well, you can see these spurs added to the corners. 11:09 And these spurs apparently were the only thing 11:14 that that blurred out, making the corners stay sharp. 11:17 And I think that's pretty pretty bizarre, and, and fantastic 11:22 in a sense as well to come up with it. 11:26 The phototype was, revolutionary in, in, other ways as well. 11:34 The phy, the physical nature of the the 11:37 metal types I think and the specialist method in 11:39 production of, of, the type of this method was 11:42 both expensive, and exclusive, to make new type designs. 11:44 But it was easier to produce new desi, designs for, for the phototype. 11:48 And the results of this was that more designers 11:52 could contribute to type design and they allowed themselves to 11:55 explore new territories making more funky and and decorative 11:59 display stuff like here in this photo lettering specimen book. 12:03 It also meant that designers could introduce new ideas like 12:10 like this beauty here by Herb Lubalin and Tom Carnase. 12:15 And, here you have kind of new ideas of, of of the sans serif spacing and kerning. 12:19 Along with a character set with [COUGH] that 12:25 contains numbers of contextual ligatures and contextual alternate characters. 12:28 And it's just absolutely beautiful. 12:33 [BLANK_AUDIO]. 12:34 So a different kind of adaptation to things and now, adapting 12:39 more to to new ideas or new methods of, of doing things. 12:45 One of the the interesting concepts in typography that emerged 12:51 in the 20th century is, is the type phase family. 12:55 And we all know it's quite handy to have multiple weights of and styles of 13:01 the same, same designs, and it's, it's 13:05 a perfect typographic system for hierarchy and emphasis. 13:08 And Gill Sans was one of the first typefaces to incorporate this idea. 13:13 And it was not planned from the start to make a typeface family. 13:18 But new waves and styles were gradually added, just to 13:24 fill full, fulfill customer needs and and and orders as well. 13:27 Monotype grotesque is another example of this concept, 13:34 and like with with Gill Sans, the waves 13:37 were added gradually to the family, and not 13:39 planned in the initial stage of the design. 13:42 And you can see in the images it's 13:44 how inconsistent the, the design could be between 13:46 waits at the time this idea was or 13:49 this idea of the typist family was, was formulating. 13:51 And if you just look at the the variations 13:55 of the application G for example it's very evident. 13:58 [BLANK_AUDIO]. 14:00 And today, this concept is, is more refined, like we 14:08 can see here in Rod McDonald's revival of the Monotype Grotesque. 14:11 We also have today access to better font design technology where 14:17 we can see our results insta, instantly, and that's very important. 14:20 So, the modern typeface family has a unifor, 14:25 form design through the range of the weights. 14:28 And as type designers, we can make this these so-called pole 14:31 weights where we use interpolation to make the weights in between. 14:36 And this is the industry standard today and what 14:42 users of type expect and, and prefer as well. 14:45 [BLANK_AUDIO] 14:47 So, to type on screens. 14:54 Just because you can use of a fo, a certain font 14:57 on screen, it doesn't necessarily mean that it's a suitable choice. 15:00 And not all fonts look as good as good on screens and, and, as, as, other fonts. 15:06 And especially eccentric designs features in, in fonts, they can kinda, 15:12 in a sense, become their own enemy when they're sized down. 15:17 And they don't they're not very predictable when it comes this screen and 15:19 environment concerning hinting and and at adjusting to the pixel pixel grid. 15:25 And I, I, I'm not going to trying to 15:34 explain all the the screen and environment we're designing into. 15:36 But an important point for designing for screen is 15:40 you should always designing for a spectrum of results. 15:44 Because, there are, there are various types of screens different sized pixels. 15:47 Different technologies. 15:54 Varying various rendering methods. 15:55 Responsive layouts et cetera, et cetera. 15:57 Like, like you're all familiar with here, I suppose. 16:00 And as a designer you have to make choices that are 16:03 kind of capable of, of absorbing all these, these different situations. 16:06 This here is a once one solution from Linotype of designing for screens. 16:14 Linotype was commissioned to design typefaces suitable for e-readers. 16:19 And the e-tic, e-text font collection is a result of that. 16:22 [BLANK_AUDIO]. 16:26 These e-text fonts have they have larger [INAUDIBLE], they have 16:29 lots of counters and apertures, apertures and they have a reduced 16:34 stroke contrast as well, so the thinner lance won't burn out like we saw 16:39 [COUGH] earlier with the, with the prototype setting solutions. 16:44 And this will happen in both in the EX screens, and the backlit screens 16:49 well, well you have for example [UNKNOWN] 16:56 you will just lose completely they have [UNKNOWN]. 17:00 This type is also have wider letter spacing for easier reading at small sizes. 17:04 And, like I said before this is the same techniques used 17:11 for the design of smaller sizes for monotype hot metal machine. 17:14 And the Didot e Text for example is just like the, thesix6 point 17:18 optical size design for the hot metal machine the monotype hot metal machine. 17:22 [BLANK_AUDIO]. 17:26 So, we found out these e Text fonts they 17:32 work perfectly for running texts, longer texts on, on screens. 17:35 So we have slowly started to adapt our classics 17:40 and redesign them, reinvent them, for, for this environment. 17:44 And we recommend using these e Text faces for text under 14 points. 17:49 Yeah, I made this screenshot. 17:59 it's, it's very bad. 18:01 I'm sorry about that but, it kind 18:02 of shows, shows the different, difference between 18:04 the acura Neue Helvetica and the Neue 18:07 Helvetica and the Neue Helvetica Helvetica e Text. 18:09 And you can see the, the differences. 18:14 It's pretty dramatic. 18:15 Yeah this fantastic tool here is, is actually one of our products. 18:23 And I'm sure you're all familiar with this tool. 18:29 I hope so. 18:31 And this is the perfect tool to to make 18:34 typography make sense on the web, and it's kind 18:36 of like the modern type, typesetting machines much like 18:40 the mecha, mechanical typesetting machines I was showing you before. 18:43 And this is kind of new version of it in a, in a modern context. 18:48 At it's, it's very handy for designers in many ways. 18:53 For example Mac, OS, iOS and Windows they all render fonts differently 18:56 and PDFs, and Creative Suite Suite Photoshop and all that, 19:01 all that stuff, they do not render fonts the same way the browsers do. 19:07 So we can't replicated the final rep, output there, 19:12 but through typecast you immediately see the, the final results. 19:16 And meaning that there are no kind of wild guesses when it comes to type anymore. 19:21 Also, another important thing is that not all web 19:28 browsers present open type features in the same way. 19:31 And [COUGH] some even just ignore most of it. 19:36 But you can use open type features through typecast with our fonts.com services. 19:39 They allow extensive opened features that that 19:46 are not normally available on the web. 19:50 So these are just a few good reasons to use typecast 19:56 and I, I strongly, strongly recommend that you try it for yourself. 19:59 So back to the past into our history. 20:05 I showed you a technical drawing of Gilson in the beginning. 20:09 And in our archives, in Suffolk, we have 20:12 technical drawings of, of all type faces made 20:15 at Monotype UK till about 1980, and they're 20:18 all stored in, in metal boxes like these. 20:21 And these are not just tested drawings. 20:25 But inspiration for what we continue to do actually today. 20:29 And we are constant, consistently working with not 20:33 only adopting the classics like I've shown you, but 20:36 also reviving old designs that we like and we 20:39 believe are reliable, relevant elements in today's [UNKNOWN] landscape. 20:42 And believe me there are, there are lots of treasures in there, actually. 20:48 This is one of the re, revivals we recently released. 20:56 It's Metro Nova by Toshi Omagari. 21:01 And the first version of, of metro was designed by William Addison Dwiggins in in 21:05 the early 20th century he was a, 21:10 a, a fantastic book designer and advertising designer. 21:12 And he criticized the Linotype's lack of acceptable sans serif type faces. 21:16 So he was commissioned by Linotype to come up 21:22 with a new solution and Metro was, was the result. 21:26 And this very nice, nicely designed is worm eccentric but 21:29 when it was, being released Futura, a type which, that 21:34 we're all familiar with, was invading the market so some, 21:38 some clips of Metro were redesigned to compete with Futura. 21:42 And and this, this Futura like version 21:47 became kind of what Linotype used afterward. 21:50 So only the nice eccentric characters were kind of 21:53 left behind and never got kind of full exposure. 21:58 And Doug Wilson, who was the director of a, of a film 22:04 about the Linotype machines, he wanted a version of the origi, original 22:08 design of Metro and Digital, and he encouraged Toshi Omagari to draw the 22:13 entire alpha, alphabet, and that eventually led to to Metro Nova. 22:19 Which is actually a really huge type face 22:25 family with extensive over type features and you have 22:28 the option of, of using both the Futura 22:31 like shapes or the old eccentric nice nice clips. 22:34 [BLANK_AUDIO]. 22:38 Another revival is, is Monotype Modern display and that 22:43 was designed by our UK type director Dan Redcan. 22:46 It's based on the first typeface actually 22:51 commissioned by Monotype called Modern Number One. 22:54 And at the time, when it, when modern number one 22:58 first appears, designs like, like the modern were extremely popular but 23:00 they, they got out of fashion, and were mostly discontinued, 23:05 discontinued and so they will never adapted to our newer technologies. 23:09 And model number one was the type that was used to set 23:15 the Times news paper before Times New Roman took over the roll there. 23:18 And the results of this, revival here are, are beautiful like 23:24 you can see in the, this example from the Centrefold magazine. 23:28 And it feels very modern as well in the kind of, all aspects of, of the word. 23:32 [BLANK_AUDIO]. 23:36 We do not only make revivals, we also make completely new designs, of course. 23:40 And this one here was just released yesterday. 23:46 It's Burlingame. 23:49 It was started actually originally as an idea for a video 23:51 game font but was then developed to work on automotive screens. 23:55 And automotive screens they require maximum 24:00 clarity for safety reasons of course. 24:04 And so, Burlingame has all the, the nice features you need for, for this 24:07 low res screens and the, like you can see on the design, it's 24:14 very open, it's square and crisp, clean details, pick aperture. 24:20 And you can see the, the generous notches as well. 24:27 These notches, they come in very handy regarding legibility on, on screens. 24:30 And it's available now from our 24:37 online stores, fonts.com and also through typecast. 24:39 [BLANK_AUDIO]. 24:42 So, [COUGH] so the point I've been trying 24:47 to make here, decorated with a, with blatant 24:50 monotype advertising, of course, is that the objective 24:53 of, of type design is not only to to 24:57 draw letters but also to optimize them for 25:00 for output in any given context and, and, and 25:03 at any given time, in a sense, aiming for, for, for a pleasant result for the user, 25:06 both pragmatically and aesthetically as well. 25:12 And because I've been talking so much about the past, 25:19 I want to wrap this up with with the future. 25:21 And talk about the future of type design. 25:25 And according to these lovely uh,future forecasters here this 25:29 fundamental idea of storing our languages in and information, 25:34 history, in, in shapes and symbols is still going 25:39 strong in the 30, 31st century just like today. 25:42 And that means that for at least the next 1,000 years, Monotype will be designing 25:46 and adapting shapes and symbols to new 25:52 technologies and concepts in whatever form they come. 25:56 And that's it. 26:01 Thank you. 26:03 [NOISE] 26:04
You need to sign up for Treehouse in order to download course files.Sign up