How to Look at Type: Fundamentals of Web Typography

1. Introduction: Typography is kind of magical. It's the thing that gives voice to words. I think language comes alive because of typography. It's not just what is written, but it's the form that it takes. It's been said that it's the clothes the words wear, and I think that that's silly and also perfect. Hi, I'm Jason Santa Maria. I'm design director at Slate and co-founder and creative director of A Book Apart. Both of my jobs focused very heavily on the written word. Obviously, the books are at largely tight in Slate, the website is editorial publications so we publish many articles everyday. Almost exclusively, my work is centered around typography, everything else spins around that. I want this class to teach you how to see type. I want you to understand that there are different considerations to make when choosing a typeface, and things that you can look for to make sure that the choices you make are going to give you what you need for your design. I hope that after this class, you won't just settle for maybe a font that's on the computer or the font that is used all the time and whatever application you open up. But you'll look for something that suits your needs, something that will help you communicate your message better. To put all this knowledge to use, we're going to be making a small, one page website about us. This will include a photo of you, a short biography, and maybe a headline and some links off to your social accounts. I'm going to be doing the project along with you. So, as we go through the class, you'll see the choices that I make when I'm choosing typefaces and also the way that I think they should be laid out for my page. I think that the most difficult thing about typography for someone who is new to it is that it feels like you've just opened up Pandora's box. I often find that you can learn in a tremendous amount about history and take biography from classifications to how things were used 200 years ago. But it really comes down to how something looks, and developing an eye for how something looks will guide you so much farther than those other finds. I'm so excited to talk about type today. Let's get started. 2. What is Typography?: Whether you're a designer just starting out or you're new to design entirely, typographic knowledge is one of the greatest things that you can learn. The web is so much of a visual medium that everything on there is basically made up of type. Whether or not you're designing something yourself or working with a designer, having a vocabulary for typography will give you a greater appreciation of the work that they're doing and will allow you to understand what something looks like when it's good or when it's bad. The principles of typography between print and the Web are largely the same with two big exceptions. One is the web is a variable medium. So, when you set type on a web page, someone may see that on a desktop or a laptop or a tablet or a phone. The way that you set that type, needs to understand those conditions and still be legible and still be pleasing to read. Also everything that you load onto a web page is an asset that needs to come from a server or somewhere else. So, the more fonts that you put on the page, the slower your website is going to be. The most important thing about typography is that you are setting time for someone else to read. That type not only needs to be legible, but readable. Legibility means that someone can actually see the letterforms and understand what they mean. Readability means, "Do they want to read it? Is it something that's inviting?" And the way that you set your type, will convey some sort of message. It could be open and pleasing, it could be standoffish, it could be strong, it could be brash, it could be soft and gentle. All of these things are wrapped up in the way you set that type. When it comes to legibility, we're really talking about the principles of typesetting. Is the spacing right? Is the size of your type large enough so that someone can read it from the distance they sitting at? Does the color provide enough contrast to be legible? Is the spacing of the lines correct for the size of type that you're using? All of these things come together to basically amount to some sort of legibility. If you're just starting out with typography, two of the things that are easy considerations to make are, just making your type large enough to be read and choosing a typeface that's suitable for what you're trying to say. What we're aiming for is something that feels comfortable. Good typography fades to the background. It's sort of a silent partner for the story that's being told. If it's calling attention to itself, it's taking attention away from the story. When it comes to typefaces and fonts, a lot of people use these terms interchangeably and casually, that's probably okay, but a typeface and a font are something different. The typeface is the work of art and a font is the actual form of that art. Designer, Nick Sherman, summed this up well. A typeface is to a song as the font is to an MP3. So, a type designer will design a typeface. Let's say, that it's Proxima Nova, and that typeface exists on your computer will be in a font file. In the case of Proxima Nova, you might have ProximaNova Bold.ttf. That's the font. It's also helpful to understand the difference between typography and lettering. Typography is all about typesetting, you're using fonts to create reproducible results that are exactly the same every time. Lettering is more akin to illustration or drawing of letterforms for sort of a one-off use. Classifications are ways to describe typefaces. Just as you might have genres of movies or songs, you have sort of genres of typefaces too and these are representative of not only when they occurred in history, but what the letterforms look like. Some examples might be ones you've heard of before, Serif, Sans serif, Monospaced. But there are some really deep holes that you can go down into history here too. Different kinds of Serifs from Spur to Bracketed, Old style, Transitional and a lot of this is probably more than you need to know on a daily basis. But just know that a lot of terms are out there to describe how typefaces look. Typeface anatomy is probably exactly what you think it is. All letterforms have different parts and there are names for those parts. This could be the stem of a letter, the opening inside of an O, with an A or G as one story or two story, X height of a letter. All different pieces of letterforms have names. Again, you might not need to know all of these, but it's helpful to understand that there not only are names for these things but some typefaces have different looking letterforms than others. We're going to put all this together today in our project. This is going to be a one page website that describes you. It will consist of a headline, a short paragraph about you and some links off to your other social media accounts. I'm going to be doing this project with you. I'm going to choose some typefaces that I like that might be right for me. But you're going to have to choose some that are right for you. Once you finish, upload it to the Project Gallery, where you can see yours and other students projects too and give each other feedback. I'm really excited to see what you come up with. 3. Practical Considerations: As we're working through this project, we're going to call out some technical considerations that are useful to keep in mind when working on the web. When working on the web, you mostly want to be considering two primary things, the size of your files and also the size of your type. File size means how big the file is going to be to transfer from a server to your website and the size of your type is just the actual size that you set your type at. When it comes to file size, it's useful to think of it like a picture. The larger the picture, the larger the file is going to be. For a Typeface, usually the more characters that it contains, the larger it's going to be. Because so much of the web is made up of text, you want to make sure that your type is legible at the size that you're setting it at. Another thing to think about is the Font file format that you're using. There are a few different kinds, but more more than anything we're using WOFF on the web, W-O-F-F which comes in two varieties WOFF and WOFF II. The second providing a little bit more compression. We use WOFF because it compresses fonts as small as they can be right now. If you're using a service like Typekit or Google Fonts, you probably don't need to worry about it. They'll serve the right file format to you. Fonts generally cost money. Every Foundry and Service is a little bit different. Some will charge you based on the page views that your site gets, some are free and have use that has no boundaries. If you're paying for a Typeface, sometimes the cost could be quite a bit. Individual weights and styles can be on the order of 10 to $20 to a couple hundred. And, if you're using them for the Web, this cost could increase because a lot of foundries and services charge you based on the page views that you accrue every month. More times than not I use the service like Typekit or Google Fonts because they figured out the licensing for me. Sometimes, I'll go directly to a foundry and self host, but each Foundry has their own licensing agreements that you have to be concerned with too. In general, be certain that you have the right to use a font file. If you're using a service, this is already buttoned up for you. If you're buying something directly from a Foundry, they'll probably have their own terms. If someone gave you a font, you probably don't have the rights to use it. 4. The Design of Typefaces: Somethings that I look for when I'm looking at typefaces. I want something that has enough contrast. So, a typeface with less contrast is going to have very even widths in each of its strokes. You won't see a lot of variation here. But a typeface with a lot of contrast is going to have a lot more difference between the thick parts and the thin parts of the letters. Depending on how I'm going to use the typeface, I might want more or less contrast. Typefaces with a lot of contrast can be difficult to use for text because they have to get so small, the differences between those thicks and thins become more pronounced and it might affect the legibility. X height refers to the size of the lower case letters against the capital letters. You can see that here, the typeface on the left has a higher X height than the typeface on the right. What this means is that there's basically more body In The letterforms on the typeface on the left than the one on the right which helps with legibility. Often times when you're setting running tasks like you would see in an article or a paragraph, that legibility can really add up. So, if you're setting anything more than say a paragraph, if you are making an article or some sort of book, you want to choose a typeface that's going to be not only legible but it's going to hold up well to that type size. The typeface on the right is not necessarily a bad choice but it can be a little bit difficult to read because of the size of that X height. Because the higher X height gives it a little bit more body, there's basically just more information to define what a letter looks like. One thing that's really important to keep track of is, if your typeface has all the characters that you need a lot of times this really comes down to punctuation. Some three fonts or display fonts might not have a full character set, they might only have letters. But not with set running type or really just any kind of type. You're often going to need some sort of punctuation, you need quotation marks, you need periods and commas and a set of dashes. These will make sure that any type that you want to set you're going to have the right forms for. If your typeface is missing some of these important marks, the browser might fall back into a different typeface some sort of default and it'll look really discordant with the typeface that you're using. This is also important if your text is going to be translated into other languages. Many languages require some sort of accented forms or a larger character set that might not be contained in a Latin based language itself. If I see that typeface is missing these key characters, I'll usually keep looking. Another consideration to make when choosing a typeface is making sure that it has all of the weights and styles that you need. Typically, you need an upright roman and an italic and a bold and that should be about it. Some typefaces might not include those or might include some additional ones heavier weights, semi-bolds things like that as well as bold and italic. I typically don't worry so much about bold and italic because it's sort of a double emphasis. And it's one less thing that you have to load onto your page. When looking for a typeface.I like to look for letterforms that are unique or at least are recognizable for what they are. A lot of typefaces might have letterforms that are similar to one another and that's okay. That's what makes them cohesive. But, when a letter form can be confused as another, that can affect legibility. So, in a typeface like Helvetica that doesn't have a lot of variability and it's letterforms, as that type gets smaller it's easier to confuse some of those letterforms for one another a capital D might look like a zero. I like to look for typefaces that are sort of workhorses, things that I can use at a variety of sizes. So, a typeface that will look good for a running text but also good for a headline, may be good for a date on a blog post or navigation on a website. The easiest way to determine that, is to look for some of these features. Does it have a high enough X height? Are the letterforms recognizable? And then to really dig in and start playing with it at a variety of sizes. So, what are some red flags that you want to be aware of when looking for typefaces? We talked about stroke consistency but there's also letterforms consistency. Do any of the letterforms look out of place? Do they look like they're either from a different font or kind of doing their own thing? Sometimes it just comes down to feel when you see all the letters lined up and seeing how they look against one another. But, some of the pieces should feel like they're part of a family. The openings and letters the way that a descender drops below a line, the size of a capital letter. These things should feel like they're consistent and part of a system. I usually try to avoid fonts that I call readymades. Things that look like they have design already baked in. Typography is really where the design comes from and if the font has too much of an opinion it's going to be difficult to get away from that. This could be a font that's really grungy or really extreme. Those things are kind of bundled up in the typeface and you can't separate your design from them. Most good typefaces cost money. A lot of independent foundries make their living off of selling these typefaces. But there are a lot of services out there too that provide entry level and free plans. Google fonts will have a lot of typefaces that are both good and bad but certainly affordable. Typekit another service has a free plan as well as paid tutors and a lot of the typefaces on there are really good too. There are free fonts that are well designed but there are a lot of free fonts that are not well designed. It's always good to pay for quality if you can afford it, especially if you're supporting an independent foundry. The nice thing too about paying for a font is that other people may not have paid for a font, so, you might have a typeface that other people aren't using. Even if you don't want to pay for fonts, some of the ones that come on your computer are totally okay to use too. Helvetica is used a lot but it's still a really nice typeface. Georgia, Verdana even Times, these all have their place. So, now we looked at some things to be aware of and some red flags to avoid. But now let's dig into actually choosing a typeface. 5. Typeface Inspiration: Some people keep images of haircuts that they might like to have some day or the way that they might like to style a room in their house. I keep pages of typefaces that I might like to use some day. I keep up on type news because I'm really interested in new developments and new typefaces that come out, and I like flagging typefaces that could be useful in future projects. So, I collect typefaces on Pinterest. Most of these are divided up by classifications for san serif to serif, script, and even some decorative ones. I like keeping track of typefaces this way because I don't always have a need for them right away, but I might in the future, and some of these really speak to me for different reasons. I might like that something is really extremely wide and eccentric, or that it just has some really interesting elegant forms. I don't know what I would use this for but it speaks to me and it's handy to save it somewhere for future use. So these in particular, are a little bit more decorative. Some of these might veer into the readymade territory a little bit, but it's all going to be dependent on how they're actually used. Because I keep up on typeface, I find that these boards are often my first stop when I'm looking for a typeface, because I've collected enough that I know there's a lot here that I like, and it's easier just to go through some of these first sort of like they're pre-approved for at least consideration rather than just jumping into big listings of typefaces elsewhere. These are some of my favorite typefaces right now. That list of typefaces I want to use changes a lot, but these are ones that have spoken to me in some way. This first one, Harriet, is a really interesting, very contrasted serif typeface. You can see it has a lot of different looks depending on how you want to use it. From using it really heavy and all caps to some of the itallic usages. It has a beautiful flow to it and some of these letterforms are decorative without being too overbearing. If you're tired of using Helvetica but still want a really clear and nice san serif, Proxima Nova is a fantastic choice. The letterforms are very open, there's a very large X height, and it comes in a variety of weights and sizes too. From regular to condensed and compressed, the letterforms are a little bit more open especially the open spaces like inside of C or an E. They wouldn't be as closed as Helvetica is. Mallory is another really nice san serif and sort of like a newer style. It has some really interesting little features that give it a little bit of quirk and a little bit of uniqueness. Whats nice too is this typeface was engineered to work very well for small sizes, so you can actually see it over here in the margin at some smaller settings, and it holds up very, very well for text like this. There are no real guidelines for what would work better for text, either small or large sizes, it really depends on what the letter forms look like. This works well because some of the things that we have looked at before it has a really nice high X height and some really open letterforms, so that when it does get small, it's very legible. You can see all of those letterforms really distinctly, and you can tell what they are and read them. But that doesn't necessarily mean that a serif would do poorly in the situation either. Input is a really fantastic monospace family that is also customizable. You can customize what you want some of the letterforms to look like when there are different versions. There are variants of things like the number one or a zero. Monospace fonts are usually used for coding applications, and this is actually the one that I use when I code websites. But this is a very interesting one, and that it holds up very well for text on a website as well. Monospace font is not necessarily san serif or serif for really anything other than the letterforms take up the same exact amount of space for each character. So, every character takes up the exact same amount of horizontal space, so that the letters are always going to align on a very specific grid. So much so that you can actually count the letters and align and predict exactly how many are going to fit, and it will always be the same. Freight is a superfamily, and what that generally means is that, there are more than one type of typeface within that family that might be a serif and a san serif. Freight's really nice because the superfamily includes not only text in san serif but some bigger use typefaces as well like a display. So, this is actually one of those families that you can stay within entirely and just pair say, the san serif with the serif and probably call it a day. Freight has some really beautiful letterforms but one of my most favorite things about it is, it has fantastic italics. They're just very expressive and I feel like super charming. They just have a very interesting look to them. On the topic of additional styles, if you're setting something for running text it's usually useful to have a really nice italic and a bold, so that you can switch to emphasize things when you need to. A lot of times these are pretty straightforward and you don't necessarily need to worry about them. But this is just another consideration to make when choosing your typeface. Be certain that the italic looks like it's italic, and is distinct enough from the normal upright, and that the bold looks bold enough to stand apart. If you want to keep up on typography, it's usually useful to find some foundry's you like and sign up for their newsletters. But there are a number of websites out there too that post type news. One of my favorites is, Fonts In Use, which not only shows typefaces but projects that they're used on. 6. Finding the Right Typeface: So, when it comes to choosing typefaces for your own purposes, there are a few ways to approach it. I personally like the abstract things out a little bit. I like to write down a few adjectives of what I'm looking for and then find typefaces that look like those things. It's not that far from thinking about how you might approach an outfit, or a chair in your room, or even music styles. So, if we think about this like a chair, say that we want something modern, it might be very minimal. It might not be very adored in any way. It might use wood, and it might reveal a lot of that wood. Maybe there isn't a lot of color. Maybe the form is very sleek. By thinking of adjectives like this, it helps you find those physical attributes that might embody those things. So, if you're looking for something that is strong and powerful, you might find letterforms that are really thick. If you're looking for something that has a little bit of finesse or a little bit of elegance, maybe those letterforms are thin or they have a little bit of script to them. They are low-flowing. This exercise with adjectives is very similar. If you've ever done a branding exercise for your company, you find words that might describe that company or if you are tasked with introducing a friend to someone new, how might you describe them? So that's easy shorthand to make a one-to-one correlation between an adjective and a typeface. But this is where typography gets really interesting. You can also use that same exercise to find contrasts to juxtapose those adjectives using the typeface in a different way. One thing that's easy to fall into is finding typeface that is sort of a ready-made that feels a little bit too close to what it is that you're trying to emulate. If you're designing something for a horror movie, you might find the typeface that is actually dripping in blood or if you were designing a logo for a playground, maybe this is made up of children's building blocks. Those things can only really say that one thing. Ready-mades are only ever going to be able to be that one thing. So, it's more useful to find a typeface that has some of those qualities, but then you bring out through the design those adjectives. Because typography is sort of the voice of your design, you want to make sure that your design has its own unique identity. So, if you are using a building block font, so would everyone else who is making a playground logo. It's important to be able to stand out. So, look for some of the other attributes that might be useful to embody as well. I've gathered up a few typefaces here that evoke some of the adjectives that I'm looking at. First up, we have something that is a little bit more literary. These kind of look like they would be read at home in a book or a magazine. You would read these in long paragraphs. A lot of these have serifs and sort of look-like old book type pieces. Depending on what you need, it might be difficult to actually choose from a typeface in this kind of usage. The best way to look at these is to set some type in them and to see how it feels to read in them. Here's some that I've flagged as being elegant. A lot of times, this usually means really simple letterforms and either some high contrast letterforms or some very thin letterforms. We equate this with something that is usually fancy or maybe a little bit pricey. You can also achieve this with some script typefaces. Because of that sort of flowing look to them, they feel like they're a little bit more high-priced. If you want to evoke power or strength, you might look for some very dense letterforms. Not just bold, but letterforms that have very closed-in spaces. These could include thick strokes or very tightly packed letters. Some old style serifs, especially slab serifs, do this very well. You can also look to some of the thicker and heavier sans serifs, both in some of the gothics and some of the newer style sans serifs. As you might expect, contrasting hard with something soft or light can often mean just using a lighter weight of the same typeface. This has some correlations to what we would call elegant in that some of these letterforms are thin. But just being soft can also mean airy. So, look for letterforms that have large open spaces that feel sort of floaty. One way to make sure that you're not veering too far into a ready-made is to see if that typeface can be used for something else. The nice thing here is that you do have some flexibility. There are no real rules or right choices in topography. There are just different choices. So, what is light and airy to someone could also be elegant to someone else. There are many different ways to get at the same feeling. So, when I think about how I would describe myself, the adjectives that would make up my design, I think about how I consider myself as a designer. I feel like I'm sort of blue-collar, not super-intellectual but a little bookish, more of like a paperback rather than a special edition of a book. So, I'm not set on a serif or a sans serif to start with, but I want something that feels a little bookish but being really sort of dense and strong too. 7. Choosing Your Typefaces: So, once we have some adjectives set out and maybe we've even looked at a few typefaces or have a general idea of what we're looking for, where do we go next? I've put together a list of websites that I like when I'm looking for type. Some of these are foundries, some of them are blogs and other news sources. I've included them in the resources section of the class. Typekit has a really handy filtering mechanism where you can come on and filter by classification, as well as intended use. So, say that I want a sans serif for paragraphs, I click those buttons, I want to make sure that maybe it has a very sort of normal weight, the width is normal, maybe I want a very low contrast, and I'm given a lot of really good options that I can then check out in more detail. Whether you have an account or not, this is free to use to at least browse. I generally divide type into two categories; Type for a Moment and Type to Live With. Type to Live With is the kind of stuff that you have to read a lot in. So, this might be an article or lots of flowing text you would see in a book or a magazine. Type for a Moment is sort of like a headline. This could be a little bit more expressive and has a little bit more flexibility to have interesting letterforms or things that wouldn't necessarily hold up to a lot of texts but are good for a few words. Because you have a lot more flexibility with these typefaces for a moment, you can be a little bit more expressive with them. You might use a script typeface or something that is what we would call display typeface. In display typeface, you would usually only use large and for a short amount of text. You wouldn't want to set a paragraph in it, but it's good for a headline. You have the option of using one typeface for your layout, but a lot of times, you might want to pair with something else. This is pretty common when working on the web or really any sort of publication design. We could spend a lot of time on typeface pairing alone, but as some general guidelines, you often want to look for contrast. If a typeface is already doing one thing for you, you probably don't need to choose a typeface that does a similar thing. So, if using a sans serif, an easy way to contrast that is to choose a serif. Similarly, if you're choosing a serif, go with a sans serif for something else. There are also sort of pieces of those letterforms that you can pick up on. There's a skeletal nature to the way that a letter looks. Maybe it's the roundness of the letterform, the openness of a character, the height of something or the thickness of something, and you can kind of echo that in what you pair it with. Some of the biggest mistakes I see most often when it comes to type pairing is choosing something that has too many similar traits. Two serifs together or two sans serifs together that do very similar things are usually not that useful. What we're looking for is to build a really strong palette so that everything in that palette is doing a different job and supporting its own weight. Over time, you're probably going to start developing your own personal palette of typefaces you like. There's nothing wrong with using the same typeface over and over again. In fact, it actually is pretty rewarding to find new uses and new ways to use that typeface. Don't feel like you have to try something new every time. I probably have about 10 or so typefaces that I often use when I'm starting out a project. Sometimes I end up using those all the way through to the end of the project, but sometimes they just sort of set up and evoke a feeling that I'm looking for from the start. This is often a useful shorthand because it lets you get into the design faster and not spend all of your time just looking for a typeface. So, those typefaces might evoke something like strength or just be really good for text. Now that I have a pretty good idea of what I'm looking for, I'm ready to start playing around with type a little bit to see how it will work with content that I have. I've grabbed a bio that I want to put on my Website and what I usually like to do is gather up all the content that I know I'm going to be using and kind of lay it all out in front of me. Sort of like I was gathering the ingredients to cook something. So, I know that I'm going to have some sort of headline which for me is going to be my name and my occupation and my location, and then a short paragraph that's sort of a bio for me and what I do. Right off the bat, we can tell that we kind of have our Type for a Moment and Type to Live With. You have a paragraph that we want someone to read, so this is going to be more like the text of an article, and then we have something else that's more of like a headline. We could probably be a little bit more expressive, this type will probably be a little bit larger, and maybe this will be sort of the visual anchor for our piece. So, let's get started by just assuming that this will be a little bit larger. We can make that bigger and then we can start trying out some of the typefaces that we found before. You have a couple of options about how to proceed. You could start with your body type and find a typeface it's going to be really nice for that and then work into the headline afterwards or you can start with the headline and work into the body type next. For my piece, because we have such a large kind of headline, I want to let that be more of a focal point. So, I'm going to start there. Some of the type faces I like have very dense weights. This one is a serif and has some really nice contrast, as well as some really dense areas of spacing. It kind of traps in a lot of the white space in between the letters. You can see how the E is very closed off and there's not a whole lot of space inside of the openings and letters like the D and the P and the H. This other typeface is really nice, too. This is a very, very dense sort of blocky sans serif, feels like it can be a tractor trailer or something. Both of these look really nice, but I think I'm leaning more towards the serif. I like that it brings in a little bit of that bookish quality I was talking about, but it's not overly decorative either. Now that I know I'm going to go with this serif, let's look at our body type. So, one way that we could go is just to contrast the serif. We could go with some sort of sans serif that looks really nice, let's say source sans. It's a typeface that I think looks pretty good. It's legible at small sizes, has a really nice rhythm to it. Letterforms are really nicely resolved. It has all the weights and styles that I need and provides a really nice contrast to our serif for the headline. We could also go in a different direction. We could try something that is a serif as well, something that has maybe a different feel than our headline, something that is a little bit more cheesily and has a little bit more of the eccentricity to it. It has some letterforms that are not necessarily perfectly squared and have a little bit of character to them. But this might be a little bit too close to our headline, not just because it's a serif, but because it doesn't really provide that much more variability than if we were to just use our serif from the headline as body type two. I think I prefer going with some more contrast in our body type. The sans serif provides contrast I'm looking for, but also fulfills all of my technical requirements. Now that we've selected some typefaces, it's time to look at how we actually want a typeset this. We're going to look at line spacing and type size, as well as alignment with the other elements on our page, notably a photo and some additional links outside of our site. 8. Layout: Sizing & Spacing: So, today, we're focused mostly on making a design comp rather than a web page, but the process that we're using is basically the same. We're proceeding in a way taking into consideration all the things we would need if we were designing a website. So, even though I'm making this on a desktop design application, I'm thinking about how this would need to look on the web. In the resources section, I'll post some links for how you can actually get those fonts onto your website, whether or not you're self hosting them yourself or using a service like Typekit. So, now that we have our typefaces chosen, we really delve into typography itself. Typography is more of the practice of setting the type and the combination of all those decisions that we've made. This is where the design really comes together. So, we have our headline typeface and our body typeface. We want to start thinking about how these interact with the other elements of our page. So, we know that we're going to be using a photo, so we have a great big photo of me that we know is going to be on the page, and we might mask this off into a smaller shape afterwards. But we can start thinking about how this layout is going to actually work. I've developed a really simple grid to help us size and aligned things. A headline typeface can be large because it's not going to be read for that long, so we can make that as big as we want. We need to make sure that the line height gives us enough air as well, so that the spacing between our lines doesn't feel too tight and congested. In general, when we're talking about line height for running text, the longer your lines are, the more line height you're going to need between them. Basically, because it's a little bit more difficult for your eye to end on one line and get back to the beginning of the next one if they're too tightly packed. For line length, we want it fall somewhere along a spectrum of about 45 to 75 characters or so per line. That's not a hard and fast rule but it's a pretty good guideline. We can space this up a little bit more. We have a few terms in here that we know are either books or things that will need to be italicize because they're publications. So, it's a good thing we chose the typeface that has a nice italic because we're using that quite a bit in here. So, we have a really simple grid set up here, we know that our type is going to be about that long, and we also want to have a few links out to some of our profiles elsewhere. For me, I wanted to have a link for contact to email me, as well as my Twitter and Dribbble pages. Now, we don't necessarily need to make our paragraph and our headline the same width. In fact, our paragraph could probably be a little bit more narrow, especially if we bring these links up alongside of it. This creates a nice little balance. We have a nice resolution and a boxiness to this layout that feels pretty good. If we want to bring this picture into the layout, we have a few options. We can fit it inside of this layout somewhere, maybe between the headline and the paragraph, we can bring it up off to the side, or allow these elements to overlap one another. I have a few guidelines that I like to follow when I'm designing. In general, I almost always will make things a little bit bigger if I'm afraid that they're being too small. I don't feel like you can really go too large on the web because legibility is often a concern depending on different screen sizes. It's not always a hard and fast thing to follow when it comes to design, but generally, I favor making things bigger rather than having them be too small. You also want to set up some hierarchy to your information. Think about how you want someone to actually read through this. We have our headline, that's going to be biggest and on top, so it's pretty obvious that they're going to start there most likely. Beyond that, we want them to maybe jump to the paragraph and then find our secondary information after that. The way that we've laid this out, as well as the size of the elements, determines how that flow actually goes. The big thing comes first, then this blocky or a bit of content will come second, and then our smaller list off to the right side will come last. The case that you set your type at is really important. Some people might set a headline in all caps, which is certainly one option. All caps can be shouty, not only does it feel like you might be yelling in your design, but it reduces legibility a bit. These larger letter forms feel like they take up about the same amount of space, they're a little bit more difficult to distinguish. In general, I use all caps sparingly when it might be just one word or might enhance the meaning of something. So, these links off to the side, this would be fine. We could set these in all caps and I feel like they would look just fine, but maybe not our headline. If your text has any special characters or punctuation like quotation marks and apostrophes, you want to be mindful that you're using the right ones. A common mistake is to use what's called dumb quotes. These usually look like straight quotation marks and apostrophes. They're a vestibule remnant of the age of typewriters when space on a keyboard was really valuable. So, they need to do the same mark for opening and closing quotation marks. But good typography uses smart quotes, these curly ones. This fit more in line with the tone of the typeface that you're using and don't stand out as some mistake. Whenever possible, you want to use smart quotation marks and apostrophes. It's often said that music is really the space between the notes, and typography is often about the space between the letters. When it comes to your layout, the space around the elements can often be as important as the elements themselves. In order to give the design a little bit of breathing room and the reader a little bit of space to understand and comprehend what's in front of them, it's good not to pack the layout too much. You don't want to go edge to edge with all of your elements or have your type to in their face. You want to give them a little bit of space to breathe and to find their way through the pages themselves. When I'm worried if something isn't quite legible or if I want to make sure that the type size I'm using is right, I often bring in a friend to give me a quick gut check to make sure that it's legible and that the typefaces I'm using are readable. So, I played around a little bit more with my layout. I decided to make the photo not only sit in a circle, but be overlapped by the type. I think that this creates a little bit of interest and a little bit of a focal point and connects the elements a bit better. My headline got a little bit smaller and is now taking up about half of our layout. The paragraph below a little bit smaller too, and our links off to the side now have icons to go with them, just for a little bit more visual interest. Because these elements are overlapping, I need to make sure that there's enough contrast that this type can be read on top of my photo. So, maybe what I need to do is make a background color a little bit darker, the photo can blend back into it a bit, and then my type on top can be reversed out in white. The headline too, maybe we can give this a color and make it a bit brighter itself. These links can be a secondary, maybe they're white too, or maybe just a complimentary version of our background palette. This gives us enough contrast so that the type can be read on top of the image. The image is big enough that we don't need to worry about it being that visible. It can be more of a nice little subtle design element to the background. Our type is still large and legible, and we provided a little bit of nice contrast and interest with the color choices. Now that we have something that's working well, we could play around with some other color options. Maybe we don't want this darker teal, but we go with something a bit brighter. Our yellow doesn't read quite as well on top of the screen, there's not quite as much contrast. The white is still prettier, pretty good. Maybe we want to go with something warmer. That works pretty well. The salmony red-orange color has pretty good contrast with our headline. The white still reads pretty well and our links over here are holding up nicely. I like that, too. So, before, when we're talking about ready-mades already having baked-in design, this is where the design really comes from. It's the arrangement of elements on the page. It's the typeface choices, our color choices, and you can see even through these different colors that we're choosing, we're giving the design a different feel. Color has its own storied history of theory and ethos around its usage. Different colors can mean different things in different cultures, and different colors together can also mean different things. So, by choosing a color, you're also giving the design some sort of feel. This is what you want to look for, rather than finding a typeface that has the design already baked in, because you can't really separate it from that. Ended up liking this teal one the best. I feel like it has the contrast I'm looking for, and I really like the way that the colors are working together. Now that I figured out basically what I think the desktop size should look like, I work through what some of the other canvases might look like, too. Here we have a tablet and also a mobile phone. If this were a larger site or a publication, I might have started with the mobile view first because you often want to begin with the smallest version and the most simple and fastest version, and then progressively enhance up from there. But because I knew that this was going to be a fairly straightforward website, I didn't mind starting with the desktop version first. I think that this project really illustrates how hierarchy of information and layout can really play an important part of your design process. It's not just about what typeface you're choosing, but how you use it in your layout. These typefaces work well together because they not only provide contrast, but they're both very clear and legible and I think readable. I hope you'll explore some of this in your projects, too. Maybe your headline is just your name, maybe it's longer, maybe you have a lot more of a biography that you want to put out there, maybe you don't want to use a photo at all. These are all considerations that will make your site and your design sync or not. 9. Final Thoughts: Thank you so much for taking this class. I hope that you see how much typography really can add to your design and really make what you want to say that much better. Typography is a practice that really rewards lots more research and delving deeper into the details. I hope that through this class, you've seen how some of those pieces of design from letterforms to punctuation to just using typefaces can really make or break your designs. If you're looking for something to tackle next, maybe look at some designs that you like that are out in the world. See what typefaces they are using, what typefaces they're pairing, and some of the design considerations that they have made. Use an extension like web font ninja, which I have linked up in the resources, hover over any piece of type that's on the page and it'll tell you what it is. You can also click on it and type out whatever you want in that same font. This is often a really good way to get into the brain of a designer and also figure out how to make your designs better. I'd love to see your projects. Please upload them to the project gallery so that we can give each other feedback. Thanks again. I look forward to seeing your projects. 10. What's Next?: way.