Tag: branding

Today on the Edge of Innovation, we look at the history of typography and the effect of changing technology on graphic design.

Show Notes

A One-Man Font Shop
The Coolest Font of the Year?
The Feds are Killing Off Clearview
A Font Made Exclusively for Coding

Transcript

Sections

The Subtleties of Metrics and Spacing
Automatic Correction
Comic Sans, Roman, Tekton, Caslon
Powerful Programs for Typography
The Helvetica Documentary
Fonts Send a Message
The Importance of Typography

Introduction

Paul:      This is the Edge of Innovation, Hacking the Future of Business. I’m your host, Paul Parisi.

Jacob:    And I’m Jacob Young.

Paul:      On the Edge of Innovation, we talk about the intersection of between technology and business, what’s going on in technology and what’s possible for business.

The Subtleties of Metrics and Spacing

 

Jacob:  So, talk me through what exactly are the basic components that are important for typography. You mentioned the metrics.

Paul:  Well, yeah. I mean, metrics is just one and it’s how all the characters fit together in a line. There’s also this thing called leading we talked about, which is line spacing. There’s also kerning, which is adjusting the spacing between individual characters. So, if you set in a badly… You can tell the metrics of a font by typing out ‘AT’ in all caps. And what you normally want to do is have the ‘T’ crowd in next to the ‘A’, sort of overhang the space that the… You know, it’s getting into the A’s personal space. And that’s really where kerning comes in. And there’s all sorts of terms for all of these different things and how that might have been done, that harken back to the old way of doing it.

The biggest thing is, you know, picking a font that looks good. Now, that’s a perceptive… it’s a personal preference. But we have a lot of good examples of things out there. So, you know, there’s a book that came out when the Mac came out by Robin Williams, not the comedian, a writer. And it’s called The Mac is not a Typewriter. And this is still one of the best books, and you should read it if you have any interest in creating typographic work that looks good. And it talks about the difference between straight quotes and curled quotes.

So, if you quote something on a typewriter, there was one quote key. And there was a double quote. So, you’d type, “Today it is Monday.” And you want to quote Monday. You would put these hash marks that would be two little ticks up on the left and right of Monday. Well, in typography, the left hand one would be curved, sort of like an opening parentheses. And on the right hand side, like a closing parentheses. And it looks a lot nicer. And those are called smart quotes or typographic quotes.

And the majority of people out there may not even perceive that, but it makes a subtle difference. And the same thing with single quotes and single closing quotes and how we deal with that. So, this little book, you know, sort of summarized my five-year learning experience of reading all of these books on typography and how to deal with it and what to do.

A lot of these things, like Microsoft Word, will automatically use these curled quotes for you and will apply a lot of these rules, these typographic rules, for you. So, for example, one of the things that was always interesting is that people of my age and maybe a little bit younger, when they were taught typing, you would type a sentence, period, and hit the spacebar twice.

Jacob:  I was taught that. And I did it up until maybe in the last two to three years, when my wife railed on me for–

Paul:  Ridiculed you.

Jacob:  Yeah.

Paul:  Appropriately.

Jacob:  Yeah. Mocked me to no end. I must have been… And I learned typing on a computer, which…

Paul:  Interesting.

Jacob:  I don’t know why I would have learned the double space.

Paul:  Well, I think it’s because, again, remember when we talked about the HP laser printer which sort of emulated a typewriter? Typewriters, except for the very late models, were all monospaced in that a ‘w’ and an ‘m’ and an ‘i’ all took up the same width. So, in that pattern, double spaces after the period looked fine. But when you now start to say individual characters have individual metrics, the ‘i’ will be very narrow and the ‘m’ will sit next to it, and then the ‘e’ and the ‘t’ and the ‘a’, etc.

Putting that extra space after the period will cause gaps to appear in your manuscript. That’s why you don’t do it. So, one of the other things that a good typographer will look at — and this is really what happened. I worked with one for several years. They would edit the page, and they’d run it through typeset in what are called galleys. So, it’s a typeset strip of paper. So, let’s say your column width was two inches, and you had a book that was going to be six by nine, but you had two two-inch columns. They would take that two-inch column, cut off the first five inches, or nine inches let’s say, or eight inches, paste it on the pasteboard, and then take the next eight inches and past it next to it. And they would review all of that. Somebody would look at it and say, “Okay, this is good. This is good. This is fine.”

But they would also notice that there were what are called rivers of white. And that’s where spaces happen to line up as you move down the page visually, and you would see these rivers of white, similar to where you might end the line with the word Monday three times in a row, or even twice in a row. You don’t want that to happen. So, the way they’d fix that is they’d actually go back and edit the book. They would actually do that. They might cheat sometimes and put in an extra space here and there or kerning to do something, to make… You know, like if you had a line, and it had just one word at the bottom, that’s called an orphan. You might want to make that so that if we take out one word up above, it’ll cause that to sort of fall back into place.

And so, all of these things, you know, again, Word and all of the typesetting software out there helps you do all that, helps you avoid that. They’re not as good at helping you avoid rivers, but it can happen.

Automatic Correction

Jacob:  And is that the sort of stuff that Robin Williams the typography writer is helping us think through?

Paul:  Yeah, it does. It sort of calls out all of these things, the difference between a hyphen and an n-dash and an m-dash. So, for example, a hyphen is the dash that you use between phone numbers. Then there’s also an n-dash — which it’s named after the letter ‘n’ — is the width of the letter ‘n’ in that font. And an m-dash is the width of a letter ‘m’. Then you have open and closed ones. Open n-dashes means it has a space before and a space after, whereas a closed one means it doesn’t have a space before and a space after. And you get a different feeling based on that setting. It’s either open or tighter or not. But whatever you choose, you want to make sure you’re consistent in your manuscript.

Jacob:  I’ve noticed that with Microsoft Word, it automatically makes some of those adjustments when you’re typing through and it detects, “Oh, this should be an m-dash,” and it automatically lengthens it.

Paul:  Right. And you can turn those off and turn those on, if you want. But then there’s also ligatures. Ligatures are when two characters are set next to each other, they should actually change form. So, a typical ligature is an ‘f’ and an ‘i’. The ‘i’ — the lowercase ‘f’ and ‘i’. So, when you set a ligature, the ‘i’ sneaks back under the ‘f’. You take the dot off, and the curl that comes over is the dot for the ‘i’. And those are… Well typeset books 50 years ago, used ligatures. Word and most of the programs out there, can, if you know how to set it up, use ligatures, when it finds them. There are also some ligatures that will actually change style.

Jacob:  Yeah. The typesetting software I use for my important writing that I do, will automatically do that stuff — LyX and LaTeX — it’s written for engineers, but it does that stuff.

Paul:  Yeah. You’re crazy to use that. But…

Jacob:  Yeah. I mean, I enjoy it.

Paul:  I think it’s LaTeX, actually.

Jacob:  I’ve heard it pronounced “La tech.”

Paul:  Have you? Serious?

Jacob:  Yeah.

Paul:  I’m ignorant then. I don’t know. I… L-a-t-e-x.

Jacob:  Correct.

Paul:  It says ‘latex’ doesn’t it?

Jacob:  You have to be specific when you google search problems.

Paul:  That’s true. Can we get a phonetic response out there, please? Let us know how we say that word.

Jacob:  So, when talking about typography, so we’ve talked about how we’ve gotten to where we have access to all this typography stuff at our computer, and we’ve talked about what exactly is going on in terms of the dynamics between letters and going on in typesetting on a page. Beyond that, the technical details, what is communicated by typography? Is there certain tones and meaning that is brought out for the copy, the written content by a different typesetting?

Comic Sans, Roman, Tekton, Caslon

Paul:  Yeah. Absolutely. I mean, if you set something in Comic Sans, you’re not going to be taken seriously.

Jacob:  Definitely by me. By the way, and just to note on Comic Sans, I do think it’s interesting that while we do beat up on Comic Sans, it was actually written for dyslexia.

Paul:  Yes. Yes. And if you look at it, and you understand dyslexia, you can understand why. But I guess, yeah. It evokes a feeling. You know, it evokes a level of expertise or not. You know, if you wrote something in Tekton, which is basically it looks like an architectural font. It’s very informal. I mean, on a drawing, it looks fine. But if you were to write a book in Tekton, it looks informal, as opposed to if you write it in Galliard, which is very pointy. It’s a Serif face, but the Serifs… Just so you know, what a Serif is, is if you look at Arial or Helvetica, and you look at the capital ‘H’, the top of the ‘H’ is square. If you look at Times Roman, and you look at the capital ‘H’, it has these little Serifs, little things sticking out, almost like burs. And those typically, we use Sans Serif type for headlines and things like that, maybe road signs. And we use Serif type for the body copy. But Galliard has Serifs that come to a very fine point. Garamond is very thin. It’s very light and wispy. Times Roman is sort of a middle ground. Caslon. I’m in a happy place with Caslon right now. I like it, and I’ve been using it a lot. And it has nice rounded figures. It’s a fairly wide-set face.

There’s also this concept of x-height. The x-height is the height of the letter, lower letter, lowercase letter ‘x’. And each font has an x-height. And you could have the x-height be almost as tall as the capital height, or you can have it down 3/8th of the capital height. And so, it gives you a different feeling, you know, line by line, how you read that stuff.

Powerful Programs for Typography

 

And so, it all, it all adds up. I mean, you know, if you go and decorate a home and you don’t paint, and you’ve got sheetrock or plaster just open there, it’s going to give you a different feeling than if you have barn board, or if you’ve painted it and you’ve put in carpeting and things like that. All of those things add up to an experience. And, you know, I fear a little bit. I mean, we put these power tools in the hands of people who don’t even perceive they are power tools. You know, no fault of their own. It’s just, wow, I can do this. So they aren’t using typography to it’s advantage, and it’s not something… I mean, the best way…

You know, the guys who invented Ventura Publisher, which was one of the first powerhouse, high end electronic publishing tools on the PC. It was three guys who basically sat down in one of their kitchens, and they had all the different magazines that they all read and a bunch of books. And they said, “How can we write a piece of software that can do this?” They picked out every typographic thing. “Oh, this has two columns.” “Oh, this has three columns.” “Oh, this has three columns, but the one column is wider than the other two.”

And they wrote software that did that, and they knocked it out of the park. I mean, they just did an incredible piece of software. And they focused on how to do books or magazines, big documents. At the time, PageMaker — it says PageMaker, not document maker, or magazine maker or book maker — it was really focused on doing a page at a time.

And so, Ventura Publisher came in, and it was this idea of being able to lay out a whole book. And so, you could import a big manuscript and have a 100 page book in minutes. And it was just amazing what you could do with it. And then you say, “Oh, well I need drop caps at the beginning of each para– each chapter.” And that drop cap is when you have the first letter of a sentence or of a paragraph, and it is a capital that doesn’t set on the line. It’s like three or four times bigger, and it takes up four or five lines. And so, it’s big. It draws your eye to it, and then you start reading.

So that was great. One of the things that was trickier, and which even Word doesn’t do now — InDesign does — is what’s called hanging punctuation. So, if you think of a column of text, if you start a line with a quote, that’s sort of optically, a little indent. So, why don’t — and a real book publisher, 50 years ago, would have taken and allowed that quote to be outside of the margin. It would hang outside of the margin. So, if you, if you take a ruler and draw a line up the left margin, that quote would be on the left of it. That’s hanging punctuation. And that’s critical to make it look to make it look good. InDesign, Adobe InDesign does that. But Word doesn’t. But you can go in and create a style in Word for that one paragraph that has a little bit of an outdent.

You see, all of these little things, you can legitimately say, “Yeah, it doesn’t matter.” Well, okay, then why do you wash your car? Why do you wear nice clothes? All of those little things add to the perception of it. And so, there are trends in graphic design, just like there’s trends in fashion. And you don’t want, you don’t want to typeset something that looks like it was typeset in the ’70s or ’80s or ’90s. You might. But understand, when you choose fonts like that, you know, if you go out and use Times Roman, boy, somebody just did this on a computer. And didn’t really think about it. And especially the way it sets. Same thing with Palatino.

And honestly, for me…Arial as well. Or Arial. I don’t know how you say it. It’s metrics do not look as nice as pure Helvetica does.

Jacob:  Yeah, I mean, my understand is that Arial started because they couldn’t get the licensing for Helvetica, so they just emulated it.

Paul:  Yeah. So, yeah. You have to understand about font copyright. You can draw from scratch, Helvetica, if you can perceive all of the subtleties, and there are a lot of subtleties in it. And you can’t copyright that. Now what’s happened, because it’s digital, they can copyright the digital version of that. And so it’s a lot harder to make fonts look the same. But that’s why you have so many fonts that look the same. But then it comes into metrics and all those little things, little subtleties, how it lays out, and how it, how it works.

So if you were to take something — and there’s another font called Helvetica Neue or Neue Helvetica — n-e-u-e-e or n-e…

Jacob:  A-u.

Paul:  N-e-a-u-e?

Jacob:  Yeah. I believe so.

Paul:  Something like that. I could look it up. But and it’s a beautiful font. Now, fonts aren’t free. I mean, people put hundreds, thousands of hours into creating fonts. And there are tools where you can do that yourself. And you go and try and, you know, make a 250 glyphs, and then deal with all the metrics and all of that. And then people steal it from you.

And there are rules on, you know, buying fonts and using them, and you know, if they’re in your printer, you can use them. If they’re not… You know, and now, there’s web fonts, where we can now, finally — it’s really been emerging over the past 10 years — use typography with the real fonts on a webpage. So, if I have Garamond, and I like Garamond, I want to set my stuff on the web page in Garamond, I can do that.

What that requires is that you either get a font that is free, you acquire a font and license it and download it. It makes your page bigger, because the person doesn’t already have the font, so you’ve got to tell them to go download this font so that the browser can display your text in that font. And that can cost money. For one site, we were using a font, and we had, you know, an agreement with — I forget who it was — Adobe with their typekit. And depending on the number of page hits we got, they charged us more or less. So, it was, you know, if you have a small site, it’s tiny amounts of money. But if you get a large site, it gets to be a significant amount.

What’s nice about web fonts is once they’re downloaded to the computer, they don’t have to download them again. So, they are able to have nice typography in them.

The Helvetica Documentary

Jacob:  Yeah. I don’t know if you’re aware of the documentary — it’s actually on Netflix — called Helvetica. And it’s all about the Helvetica font, obviously. It’s very fascinating to watch, because it works through all these things you’re talking about. I’d recommend it to anybody listening, because it talks through, for example, how Helvetica is used for all the underground and tube stations in London and New York City, and what it communicates and how it communicates information in a way that is so subtle, along the lines of what you’re saying, of it’s not noticeable in a “in-your-face”, but it informs how you receive and process the information. And Helvetica is just so common and used because of how beautiful it is in many ways.

Paul:  Yeah. It really is. I mean, that’s a great video. And I would suggest people watch it. If they’re not interested, just go to sleep, and if they are interested to really learn something about how… I mean, that’s probably one of the most sustaining — not sustaining… It’s really kept alive.

Jacob:  Well, it was basically one of the last kind of true foundry fonts where it was designed in a foundry, it was designed in the old typography mindset. But then it’s transitioned into the digital world, because I think it was done in the 1930s, 1920s, and then, obviously, it maintained up to the current day.

Paul:  Yeah. And you know, it’s interesting. You know, if we’re piquing your interest, you know, pick up a book or a magazine, or look at something, and you’ll notice that there are very few pure lines in it. Now, Helvetica does have straight lines, but there’s not a lot of circles, you know. Like the ‘o’ is not perfectly circle, circular. And those are subtle things. And then the outside of the ‘o’ is a different shape than the inside of the ‘o’. And those are all things that make you feel a different way, and also as you start to consume that font in different places, it connects information in your brain that way. So, you know, all the signs, Helvetica is a lot more factual. You might not use Helvetica in a whimsical child’s book for the text, or even for the headlines. It would be a, an awkward juxtaposition there.

Fonts Send a Message

Jacob:  Yeah. It’s definitely one of those things where, with the design work that we’ve done for clients, and as a part of content information, it’s really important for businesses to think about it, because it does… It’s a bit like what you were saying in how you set up your house. It’s all the subtle things. If you were to think about how you set up a dining table, you know, how you set the forks.

Paul:  The place setting. Yeah.

Jacob:  Forks, all that stuff. There’s a certain sense in which, yeah, you can put plastic forks down, and everybody is going to still be able to eat, but in the same way with typography, the way you set things out and lay them down, it does communicate a certain value and excellence that, potentially, depending on the type of information you’re communicating, wins people over in a way that they might not have been so easily won over.

Paul:  Yeah. And in large part, they won’t even realize it. There is, there is a great poster, the Helvetica poster. And then there’s posters that have been done that are just cringe-worthy copies of it. You know, like… If you take the Helvetica poster and do it in Arial, if you have that sensitivity and are aware of it, you will just, “Oh, my gosh. This is horrible.” Or if you did it in Comic Sans or Zapf Chancery with all caps, it would just be like, “Oh, my gosh. This is there.”

It is an interesting study, and I’d love to know if anybody has ever studied this, is how people that don’t perceive fonts deal with it, because I will see… You know, I’ve gone to, like, a recital, a local recital, and there will be Zapf Chancery in all caps. I don’t understand what’s different about me, and why I look at that and says, “That looks terrible,” and they didn’t even perceive it. That’s something that’s fascinated me.

And again, you see the iPhone, and you touch it, and you want to touch it. And it’s, wow. That’s so cool, you know. And that design, that design ethic is, has been brought to the fore by Steve Jobs, solely. There was companies like Frog Design, which did great design work, and IDEO, and all these different companies, but he sort of did the biggest lurch forward in making people appreciate design. You know, Ikea has pretty good design.

Jacob:  Oh, I love Ikea.

Paul:  Yeah, so, I mean, you know, and people can see that. And, but it would be very interesting for me to sort of do a man on the street interview, to see, you know, “What do you see? Do you see any difference between these two documents?”

Jacob:  But I imagine that people, I imagine they probably do in a, “Hmm. That seems interesting.” Or like, there’s something that’s not quite… Because, for example, the font for Google, like the name.

Paul:  The old one or the new one?

Jacob:  The new name of Google, you would recognize that, or Facebook, even if you were to change it, or, you know, Reese’s Pieces or something like that. You know, where you change, change the word in it, but you still use the same font. People recognize it. I do think it’s something for entrepreneurs and business executives to keep in mind when they’re designing products and putting information out there.

Paul:  Right. I agree, yeah.

Jacob:  They can’t just throw… I mean, I’ve seen stuff that’s just thrown together. It’s just like, “Man, like you lost me on this sales page the moment I saw it. I didn’t even have to read anything, because I could tell that you did not care enough about your content to make it packaged well.” And typography is a part of the packaging.

Paul:  It absolutely is. And I mean, you think a PowerPoint, you know. And PowerPoints, whether you love them or hate them, they’re a part of business. And I think that, you know, you have so many verbal and nonverbal cues, visual cues there, and you want to make that as winning as possible. And you want to make all those subtleties very, very consistent. And I think that’s probably the biggest lesson learned, is that, you know, for me, you, I was a passive consumer of design. It was just part of the background. And something opened my eyes before the Mac that was, like, I was keenly aware of this. Oh, this font. Oh, this font. Well, this is what this font is. And you sort of… And then you read about the people who made them and why they made them. And then there’s this whole rich history in that. And it just gets you really thinking a lot about it.

But, you know, then you have these weird dichotomies that exist. So, for example, for me, the Google font of Google with all the o’s, when it was the old one, I thought was always very juvenile. It just didn’t look like, I mean, you know, this behemoth of a company, it’s just like was, “What are you guys doing?” You know?

Jacob:  Yeah. It did look a little kind of–

Paul:  Amateurish.

Jacob:  Yeah. Did you get this from Toys ‘R’ Us or something like that, you know?

Paul:  Exactly. It just wasn’t… It didn’t look right. You know, I didn’t mind the multiple o’s, I got that. But now they’ve redesigned it, and they redesigned it, you know, and they used a lot of geometric shapes so that they could get it down so it will render very fast. And I applauded that, you know. Emotionally, it looks better. You know, but it honestly, it looked, it felt like, you know, it was a Yahoo page from 10 years ago. The old Google font.

And I don’t understand where that came from. You know, because they did a lot of subtleties, you know, with the, with the graphic every day. But that always stuck. And you know, it was something that was very interesting to me.

Jacob:  Yeah. I mean, I do think that is something to the power of typography, that Google, which is arguably the most important company in the world, or one of them, at least, is redesigning its entire main brand logo by the simple typography that’s in the name.

Paul:  As it should.

Jacob:  Yeah. As it should.

Paul:  Unfortunately, I think they needed too. So, you know, if you look at Microsoft, their original logo was, was sort of hideous. It was focused on an ‘o’ with sort of a grill of a car in it. And you know, that was the pivot point. And they had Microsoft in this weird font. And then they came out with basically, it’s a Helvetica black italic with a, you know, chevron out of the ‘o’ in the “Soft” in the middle there. And that’s been there for years now. It would be interesting if they ever change that.

Jacob:  Yeah. It would be.

The Importance of Typography

Paul:  So, typography, you know, what you have to remember is that there was a time that you didn’t have this option. You would go to a typewriter, and you’d type whatever the font was. You didn’t even think of the font. Now you have tools that not only enable you to make it look better, but they also enable you to both make mistakes from a design point of view but fix those mistakes. A lot of it’s done automatically, but you know, a little bit of knowledge in typography goes a hugely long way, I think.

Jacob:  Yeah. I think that that’s definitely the payoff of our conversation, is that typography is important to you regardless of what industry you’re in. If you want your information to be accessible and to remove the clutter out of people’s experience of it, getting a right sense of typography, getting a right sense of how the design of your content and the written form will be communicating to people is very, very important.

Paul:  Right. I think it’s interesting. If you spend time on a manuscript, and you type it up and everything, and then you give it to somebody else, and they find all these typos. And you, for the life of you, you didn’t see them. And I think that’s the key point here, is that usually we’re so close to our information that it implicitly clicks with us. We know what we intended to say. We know what we meant to say. And then, what we really need to do — as an executive, small business, medium, whatever it is — is realize that there are all these interface points that we deal with — the typography, the color, the paper that it’s on. All those things feed back to allowing the person to either comprehend what you’re saying or not. And you know, you might think it’s the most salient well-written piece of text you’ve ever seen. But somebody else, it’s hard to read. And if it’s in a bad font, and if it doesn’t have good spacing, metrics in it, all of those things are going to contribute negative to your message actually getting across.

Same thing within a PowerPoint document. So, I think that, you know, for people who don’t have a design bone in their body, and may or may not acknowledge that, I’d like to encourage them to caution themselves and pause and say, “Well, how does this look? Does this look good?” And you need to be careful who you ask that of, because you don’t want to ask somebody like you that doesn’t understand it or perceive it, or is color blind, let’s say. Maybe that’s it. But somebody that is really, understands that and has a good sense for that. And usually we have some people in our lives that can do that. And it’ll be some good feedback.

And I can’t imagine that that little bit of work, to make it look consistent and right, is not going to pay off ten, twenty-fold. It’s just, it’s going to make you look better. It’s like having ketchup stain or your shirt or mustard stain on your shirt. If somebody told you, “Hey, that doesn’t really look that professional,” you’d probably go change it. Why wouldn’t you do that, you know, with your layout? And the same thing for design. You might think it looks just fine, but you really need to start asking people, “Does it look fine?”

I will tell you the difference between good design and bad design is almost infinite. It is. It is huge. And so I really would caution people to think that they can take on the job of design. So, all you designers out there, you know, make sure… I’m giving you the platform out there to change the world, because you really can. And I think it makes it look a lot better.

Jacob:  Excellent. Thanks, Paul.

 

 

---

Also published on Medium.