Lessons

Lesson Info

Formatting Your Type

Today we're going to peel many layers of the onion of typography, so to speak on, we're going to start with with some basics required for fine tuning and finessing, um, and formatting as well, and then as we go further in the session, we're going to kind of go deeper and deeper into a lot of details that many of you might or might not be familiar with. Some people are familiar with the concepts of some of these things. I don't know why they should be done and don't know how this should be done, so I'm very happy to be here today to take you on that journey, so we're going to start with formatting your type type size, okay, we don't always say point size anymore because of the web, but type size point size it all pretty much means the same thing. Ah, digital fonts at the same point size or type size can have varying ex heights as well as cap heights, so this is a major consideration when your setting type and deciding on the size and also when you're changing fonts and changing sizes ju...

st to give you an example, these are two different typefaces for for convenience sake, I've set them both at the exact same cap height. It does not, I mean, both samples are actually the same point size if we're talking in print but for comparison's sake to see the difference in an excite the first one which happens to be golden the eitc golden type which is the heavier one happens to have a very short excite compared to the camp the one next to it which is caxton light has an extremely tall x height the ex high even though you're seeing owes the x height refers to the height of the lower case x in comparison to the cap so all lower case characters for the most part have an x height perhaps without exception oven ellerbe's k or something like that so I have little red lines indicating where that those excites are you will notice if you look closely this is just a little another bit of information that the red line is especially on the the darker first example doesn't seem to be exactly on the top of the o and that's intentional because if it were an exit would be but because uh rounded characters if the same exact height as a flat sided character were the same height they would look slightly smaller so in every well designed typeface the rounded characters extend very slightly the margin of whether it's the excite the cap height nor the baseline okay but we still refer to it is the excite so as you can see here if you look at the settings below again at the same size or at the same cap height the golden type looks a lot smaller and that's because the x height is that much shorter, whereas the setting below it looks like it's a different type size and that's the mistake that some people make number one, you can't just judge a type size, you know, bye what you see, okay, because in the digital font, things can have a not random there randomly assigned, but there isn't a sort of a science or prescribed height for caps or ex heights to determine the size in a digital fund. So it's things might have been slightly different in metal type, and they were they had other constraints, but in digital type, you're very often going to find different typefaces. Different fonts look different at different sizes, okay? And this is something you have to take into consideration. So therefore, when choosing a type size or changing fonts, the optimum font size might vary from font to font or setting to setting. So this is something again. Sometimes you get a client or it could be a legal thing where they say, oh, this has to be set ten point. Ok? They don't tell you what type face it has to be what you might have been told in an occasion, it has to be a certain point size. But the thing you have to realize and the things you might need to communicate to your client to your boss to the employer, whoever, whoever it is who's telling you this that the actual number of the type size will vary that what they're looking for is a certain optical look a certain level of readability on dh that a lot of times the size doesn't matter and this is really critical when you're changing typefaces in a design because often when we're designing, we don't always know what what fun we're going to wind up with, um and therefore just changing changing fonts, it's, it's all going to look different so once you decide upon a final fun you do or you might have to tweak the size of the of the of the type so that it looks it's all optical. Okay it's not it should not be a mechanical decision or a numerical decision, it should be all optical and what looks right for that particular job. Ok, the next topic is line length as you can see there's three different rather extreme examples of different line lengths. Now what we're talking about when when I say line linds, what I'm really referring to is how many characters per line because the line lanes changes to based on the size of the type and how many characters in the line okay or column with again column with is something that there isn't a right or wrong it oh it depends on how many characters fit on that line in order to ah create optimum readability so for instance we see on the upper left an extremely narrow calm okay that's that's not so easy to read in general because there's ah too many in my opinion too many hyphen ations and your eyes constantly having to jump from one line to the next to the point where that at activity reduces readability and somewhat comprehension especially for long lengths of time the one on the bottom is an extremely wide setting that has its own problems which we'll talk about the second and the one and this sort of a center to the right is much more pleasing it's a good line length or a good number of characters per line on and that would give you the most readability short lines or short line lance or narrow column with as I've described result in deep rags and too many hyphenation is very often okay and this reduces readability so once again we're looking at that very first column that I showed you it's on the left um what I did on the right was I tried to make a little bit of ah ah wider column um and adjusted that but it's still really not great you don't want to set something like that for lengthy copy um I'll give you some character suggested character counts for lines but just looking at that that the first column looks to me like it's about ten twelve characters per line just guessing I'm not going to take time again the second one is more like maybe fifteen to eighteen so it's not the best there are instances and there are exceptions for instance because a lot of one I'm telling you these are basic guidelines there exceptions to just about every rule. So for instance, if you happen to have a caption next to a photo or an image and it's a small caption and you don't want it to take you don't have room we just wanted to take a little small vertical column it's okay to do it on occasion something like that but in general if you're doing lengthy copy if you're laying out let's say the template for a magazine or a brochure and you're trying to decide you're trying to lay out a grid and you're trying to decide how many columns I could have four but maybe I wanna have six well, maybe six columns is is not going to be good for the type size that you have is going to result in too many very short lines and make it difficult to read when I say difficult to read and I talk about readability this is not something that people are consciously aware of okay, they're not going to go and read this and say this is hard to read it becomes a subliminal thing that effects there interest in sticking with the article so these are things that you guys as designers and people wanting to get more involved in typography should be aware of and not wait for somebody say you know, I tried to read the website you just design but you had eight columns and that was I couldn't stand it because I got kept getting hyphenated words that's not gonna happen that's why you need to understand how you need to design two best attract and hold an audience make a client happy get that get that keep that job show good work in your portfolio all these things add value to you as a professional okay whether you're a graphic designer whether you're a web designer whether you're a motion graphics person or whether you're an illustrator or photographer who occasionally has to add type to their work perhaps you're a photographer and you're putting together a portfolio a book of all your pieces in this very little type except maybe it would just have to give some credits on you know who took who took the photograph where it was taken? It might be something very small and you might feel like I don't need to hire a designer for this I could do that but everything requires knowledge and understanding of best how to approach setting little bits of type like this so this is why this is important for everyone across the board contrary to the short lines very long lines create confusion going from one line to the next also reducing readability let me ask you guys here and and the home audience and I know this has happened to me how many times have you tried to read whether it's a magazine or a brochure something that had really white column like this and when you get to the end of the line and you try to go to the next line I already know you're really smiling you either really read the same line you jump the line okay that's a really common occurrence when you have lines that are too long or have too many characters per line because your eyes having to jump from the end of one line to the other and it often creates confusion and it creates frustration and it gets people to not want to continue reading okay so this is not something you want to do for lengthy copy I've seen magazines a lot of people think it really looks good I've seen high end magazines where for instance a letter to the editor or I'm sorry letter from the editor or notes from whomever that is involved in the publication they want this nice clean page so said a whole page of a large format magazine in wide column like that going down the page, and it might look beautiful, but it's, uninviting and difficult to read, so if you truly want your audience to read something and stick with it, you probably want to stay away from these really, really wide columns. A general guideline for line length. This is not justified, tight this's a flush left or flush, right and ragged. One rag general guideline is between forty five and seventy five care tres ok, we're not going to be more specific because it depends, and you need to have flexibility with your layout onda lot of it, it will depend on the kind of language that you're setting. If you have a lot of short words that don't result in a lot of hyphenation, you might be able to go a little narrower if you happen to be setting medical copy or pharmaceutical copy that has really big words if you setting foreign language copy that has long words such as german, which is noted for having these really long words that's going to create a lot more hyphenation, okay, which, again, is going to reduce readability? So these air guidelines and most mostly, they're considerations that everybody should be thinking of when you're designing your page when you're laying out your typing when you're formatting your type so thes air things to think about don't get stuck on the numbers, step away from the computer, look at what you're doing and see how you feel that it reads what I always recommend is whatever you're doing very often in the process print out your work especially if it's meant to be print ok if it's on the web and it's his kind of irrelevant tape it on the wall, walk out goto lunch, go get a glass of war to come back in and just stand and look atyou workings and try to look at it with fresh eyes because we get very involved in minutia of designing on the screen and it stops us and it can prevent us and from noticing the big picture okay, so I always recommend doing that quite often as often as you find it helpful print out you work put it on the wall, look at it sometimes you come in the next day and you see things you never noticed before and and it just makes you work better. So this is a, um ah much more pleasing setting of type with a nice line length that's that's probably forty five to fifty characters in this particular type face um there's there's not you know the rag is good, we'll talk about the rag in a minute if you're not sure what I'm talking about I'll explain that s so it's it's pleasing it's easy to read it's inviting and it doesn't make your eyes hurt doesn't make your brain feel like it's working too hard so so this is what you're trying to achieve again a general guideline general setting okay line spacing line spacing refers to the space between lines or more technically accurate the space from baseline to baseline line spence spacing is often referred to as letting it is even referred to his leading in some aspects of the software particularly auto letting on dh the word the term leading comes from the days of metal type when in order to add space between the lines of the metal type they added slugs of lead it could be one point lead to point whatever it is whatever they needed so in the days of metal type it was called leading so in the digital world we mostly call it line spacing but they're kind of interchangeable and you'll hear people use them both and as I said even the software refers to auto leading which I will explain later on so the spacing between lines should be determined optically based on the typeface you're using the type size you've selected the case whether using upper and lower case or all caps because clearly it's all caps it's going to eat into the negative space of the between the lines and your overall design objective this is an example of attacks setting set with three different line spacing setting so the first one, they're all twelve point. The first one is twelve on twelve, which we called used to call set solid, of course that's a term from the days of metal, when one line of type sets solid against the next without extra lead slugs in between, um, and that tends to be rather tight looking. The second one is twelve on a funky number fourteen point four six the reason that letting is in parentheses is because that's the format in most software to indicate auto letting. Ok, I am going to talk more about auto letting later. But let me tell you, since I'm showing you instances of it in in design, for instance, because most of my demonstrations and conversations are going to be related to in design if u u it's the best tool for good typography, if you're using illustrator, many of these features are available an illustrator, but not everyone, and there was also a slightly different interface, so when I show you something in in design, it might not look exactly the same, and it might be in a different place an illustrator, okay, but auto leading is an attempt to create a convenient way by the software to allow you to play around with type size is without constantly having to change the leading until you know where you're going. I mean, maybe that that's how I look at it, what it is, the default setting of auto letting is that it will give you a letting value that is one hundred twenty percent of the point size you said so a lot of times you do get fractional values and if you look in the software in the character palette where the line spacing is selected um the default unless used changed to a fixed value will be an auto letting value and it will have parentheses around it. So that's how you know it's an auto setting and a lot of people never change and I'm going to explain to you why I think it's wise to do that in many cases even if you like the setting but here I'm just showing what is just really more of a style thing so the first one is set pretty tight. It's set solid twelve on twelve the second is twelve point with auto letting set to fourteen and almost a half and on the bottom is, um is a more generous line spacing setting of twelve on eighteen um I will say the two that looked good to me our is the second in the third, the top one to my eyes and in today's world seems a bit tight to me but I will and is also less readable but I will also tell you that line space sline spacing is somewhat fashion related I don't mean fashion in terms of what you wear I mean fashion and style in terms of what's happening in the world of typography so for instance, in the sixties and seventies when her blue balan was designing with type herbal balan was a groundbreaking, phenomenal type oriented graphic designer and typeface designer lube alan if you don't know of him makes a lot of sense to look to look him up l u b a l I n okay, so herbal balan was a groundbreaking designer and typographic slash designer at that time who I was at the forefront of the change from metal type technology to photo type which is what came before digital type and photo type allowed the opportunity to have complete flexibility with typefaces point size leading with anything you can pretty much do anything just about that you can do with digital type that you couldn't do with metal type so metal type you couldn't set the letters tighter than the slug of medal and you couldn't set the line spacing tighter than set solid for instance because you couldn't because you're the leading had a butt up against you know the type head above up against the next line of type so what happened when when herb was designing he took advantage of the freedom of the technology of that time, which was photo type and so he was setting many things very tight he was sitting tight letter spacing he was setting tight line spacing and that became the accepted style it was in rebellion to what came before, which is how ah lot of art design music a lot of things evolve, they revolve in rebellion too from what came before and then it becomes the norm. So what happened was type line spacing became extremely common at that time. It wasn't easy to read, but it was the thing to dio times have changed, we're no longer rebelling against metal type in fact, we're in the digital age, and the focus for the most part is more on readability and ledge ability let both ledge a billion readability or things that we discussed in in the in the in another session that I did for creative live, which is typography the fundamental. So if you're interested in learning more about that, you might be interested in that session, but suffice to say that readability does relate to how you arrange the type. Ok, so these days we don't see a lot more of really type tight line spacing, although I am noticing in magazines and the fashion and sometimes they trying to make a really ed you look in there and they're creating that okay, but you have to decide who your audience is, how much readability you require to meet the objectives of your client or your creative director and work accordingly. So more open line spacing tends to be the way we go these days. Okay, you might not see a book sent set with the really open, letting I happen to really like that, but you also have to realize that it's going to take of you have long a long project's going to take more pages so it becomes more expensive, more paper and all of that stuff. So there's, always things to consider when you're determining the actual line spacing, display type, especially all caps, you really can't go buy that auto letting because they tend to beg to be set tighter line spacing. S o what you see on the time, and I see it done what I consider incorrectly or not, not typographic lee tastefully very often because a lot of people, they just go with that auto athletic setting, and they don't bother to change it now when you're setting all caps, there are no d senders, okay? So especially if you have a typeface like this one, which is very condensed and their sand saref and therefore can be set pretty tight, it shouldn't be set that open in most instances. Okay it needs to be co a coherent unit so the top setting is forty four point on fifty three at a fraction so that's the auto leading okay, so I said it what I think is uh more appropriate for this particular type face this's forty four on forty two so this is what we call reverse leading or negative letting okay couldn't do that mental type but don't be afraid of the number I know I tried to stress a lot it's not what mechanically cents sounds right it's all visual it's all optical it's all what looks good to your eye here's another setting it's also condense it's a little more open because it has sarah ifs so as you can see the top one is thirty eight on forty five and but three quarters and in order to make that look good um it's also two point on minus two point ah in the leading so it's thirty eight over thirty six there's a little larger setting um again you know you know that you're on the top one is uh eighty three on one hundred okay made to make it look good it's eighty three point over sixty six point leading don't let the numbers freak you out it's what looks good you're also you're looking at the overall color and texture and what you see on the top are almost unrelated especially because the word spacing is a lot smaller than the line spacing so it really as we say it's starting to fall apart or maybe it's already falling apart gates not really started because it's way too open so these are the kinds of things that you should be paying attention to for display settings when you're considering line spacing going backto auto letting um auto landing once again can be used to facilitate the type styling process, especially for text but should in my opinion eventually be converted to a fixed number to avoid other problems. So even if you like that number it's it's a good idea for a number of reasons to avoid certain problems to convert it to a fixed number you don't have to okay if you just everything is working for you and it's great that's fine, but I am going to show you a problem that can come up with that you might have experience and you might not understand why um let's say you have this setting this is lovely typeface golden cockerel is the name of the typeface and instead of using a paragraph separator you're adding a little ornaments that's part of this this font it's called a gold golden cockerel ornament and it's very small it's in the middle of the third line and it happens to be it's the same exact size as the rest of the fun okay, so this whole setting is fifteen auto, leading set to eighteen just happens to be a whole number this time, but I don't like the size of that little ornament. I want to make it bigger, so I highlight the ornament and I make the ornament twenty five point and I'm still in auto leading. Has this ever happened to you? Okay, did you ever figure out why do you know why we're trying to figure out why is there a big space there now? I'm assuming the deadline height of that particular character? Yes, exactly. It's what happens is now that I still have auto letting turned on for that ornament, even though that ornament is twenty five point the auto letting off that ornament is now thirty point. So even though the small text on that line is fifteen over auto leading eighteen, that one ornament is thirty points, so the letting of a line is going to be determined by the largest, uh, elements on that line and this is can be a problem when you're setting auto, letting so and it's one of these things that happens to people, they don't know why, and they don't know what to do about it all you have to dio is highlight that whole section we don't have to change the point size of the type we don't have to change the point size of the ornament or you have to do if you like that eighteen point auto letting fixed value is replace the the eighteen point in parentheses with typing in the eighteen without the parentheses and that becomes a fixed letting so now all of a sudden that ornament technically is twenty five point ornament over eighteen point leading and therefore nothing you put within that taxes going to disturb the landing if you sat the leading consistent for a block of text, you could technically take that ornament and set it seventy five point it would cover up all the type around it, but it wouldn't change the line spacing okay, just another example of a particular type face set at auto leading on the left and and it really I mean really looks around us again. It depends on and how the font is digitized and how the, um a lot of the what we call the a lot of the different numbers associated with the technology are set, so the setting on the right looks better doesn't really matter what the number isn't just trying to once again remind you not to rely on on auto leading and not only not to rely on it to always use your eye to make things look as good as possible this is just an example of a piece that set really tight. This is everything is one on top of the other there's, nothing. There's, no lesson here, except to say that you don't have to have space between type of you don't want it. I mean, all your decisions are going to be designed decisions. But in order to make the best decisions decisions, you have to understand some of the fundamentals of formatting and and your technology, because once again, technology is a great thing. These air wonderful programs that allow us to do things very easily and quickly to change fonts. But a lot of times were not aware will become lazy, or we're just not that one it's intentional. But you don't pay enough attention because the software makes decisions for you all the time, and you have to allow yourself to be the boss of it and not let it control you.