Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In Creating an Online Resume: Hands-On Training, interactive design professor and enthusiastic educator Laurie Burruss teaches how to produce an online resume—and create a first web site in the process. Laurie suggests structure and information needed to create a winning resume, and shows how to design the pages with simple typographic principles and effective layouts. She explains how to use Cascading Style Sheets (CSS) and control the design and structure of HTML documents through hands-on development. Exercise files with additional supporting materials accompany the course.
So let's delve a little bit into types of font and what fonts are web safe. There are really basically four font families. There are Serif and as you can see Serif has fine lines and little flourishes at the end of each stroke. Then there is Sans-Serif where there are no flourishes at the end of the stroke. There is some thinness and thickness just like there is in Serif, and they also can be single stroke. Monospace actually means that there is exactly the same space between each letter. Typically, a Monospace font looks a little spacier, or has more negative and positive space.
Then finally there's the Cursive or Fantasy fonts. Now Cursive tends to look as though someone drew this with a marker or a pen or a pencil or a paintbrush. And the Fantasy fonts are the special fonts like grunge fonts. They are used for specific purposes. They're more like imagery or ambiance. These fonts usually you buy for a very specific reason or to create a very specific layout or graphic design. These same four families are available on the web and it's important to know what are the web safe fonts that you can use on the web.
A web safe font is one that works on both Windows and Macintosh and Linux, that is available to the user on all computers. Unlike print where you don't need a font to be able to view the printed document, if you're looking at an HTML page inside a browser, the user must have that font in order for it to display. Otherwise, you have to take an image or use a bitmap image of the font that you want. The Serif families that are typically used are Times New Roman and Georgia. The Sans-Serif families are Arial, Arial Black, Century Gothic, Impact, Trebuchet MS, Verdana, Monospace's Courier New, Andale Mono, and the Cursive family is Comic Sans MS.
These fonts are pretty much available on both Macintosh and Windows, especially in the latest operating systems. So as we think about these fonts, you want to be very careful that you choose accordingly. Some of these fonts were actually designed for on-screen use. In the case of Verdana, it was actually a font that was commissioned by Microsoft for on-screen graphic display. Others have been around for a long, long time. But you have to be careful if you're using Serif fonts. Because you're looking at a screen filled with tiny little boxes or a grid of light, these flourishes as the font gets smaller can make it actually more difficult to see the font on-screen.
Sans-Serif fonts are probably the most popular fonts used for body text, and particularly Arial, Helvetica and Veranda. So let's take a look out on the Internet and talk about what makes a web safe font. A web safe font should be common to all versions of Windows and their Mac substitutes. They should be browser safe. So you'll see that Windows and Mac have some similar fonts and they may have a slight change in name, but they're essentially the same font. They should be universally available on any computer.
As we go out to the Internet, I'd like to show you a few sites that are particularly helpful resources when you're looking at fonts on the web. This first one is Dustin Brewer's web design site. As you can see he's created a chart that shows the four groups that we just talked about, Serif, Sans-Serif, Cursive, and Monospace, and he has put the most popular fonts that are available on Windows and Mac and Linux. The more green checks a font has, the more likely that all users on all these systems have it. So if you look at Arial for instance, you'll see that Windows last version, Windows now, and the Mac OS now, all have the same Arial font available.
So the more green marks you see, the more likely it's going to work well in your web page. Remember in order for your fonts to appear as type and text and not image, they need to be available on the user's actual computing system. Another site I'd like to show you is called Code Style. Code style has a different way of organizing this information. What we see here is the platform and font name installed. So for instance, if you look through this site, you can see what is the most frequency for all platforms, and in this case, the one that's most frequently installed is Microsoft Sans-serif.
This has a lot to do with the fact that about two thirds of the world owns Windows operating system, but you can see that there Veranda, which is also available on Macintosh is also a large, large font. By clicking on sample you can go and have a complete overview of this particular font. You can see what it looks like in its entirety, just like you could if you were using a font book for print, and you can see it in Normal, Bold, and Italic style. You also get an example of what it looks like as body text or paragraph.
Then finally, you get to see font variants. You get to see what it looks like as Normal, Small caps, Italic, Oblique and you see it in a blown-up version. It also gives you some tips on whether it's going to be supported by browsers or not. The most important thing on the sample page is it shows you font scaling using relative measurements. So this is what the font would look like at 150% of the browser font size. This gives you a great idea of how to use percentages and what they will look like if you use them as a measurement system on the web.
I'm going to go back to that original page and just choose one other one that's very popular, and that one is Tahoma. One that people don't often think of using but it's one that's available in quite a few of the Windows, Mac, and Linux operating systems. So if you want some variation and you want to get away from Arial or Helvetica, you can try some of these other typefaces. It shows you what it looks like again. Again, you get to see it in paragraph or body text. See its different versions and how they look, and then as I said before you get to see how they scale.
As you can see, Tahoma at 100% is slightly smaller than the font I showed you before. The last site I want to take you to is a list of Web safe fonts. This site font tester is just fantastic. It's one of the best resources if you're designing for the Web. This actually gives you the CSS style that you need to apply the font list. One of the things that you haven't learned yet, but you will as you do this course, is that when you are creating a font family list, because we don't know what fonts the user may have, you give it suggestions of first, second, and third choices. As you can see, the most generic is Sans Serif or Serif, or Cursive.
So you start off with what you hope the user has, then your second choice, and then your third choice. This gives a great starting place for beginners and newbies to the web design world, because you can look at these lists, and see some of the most common lists of font lists that will look good in your browser experience. Remember what we're aiming here for is that it feels and looks the same on every version of the platforms and in every browser so that the user think they've had the same experience from browser to browser and platform to platform.
It also has a Web Safe Fonts Preview page and I like this one a lot, because you can look at these different fonts, and check them out, and see what they're going to look like on the web in a web page. You can even resize them by going down here and choosing Extra Small and hitting Return and trying out different point sizes to see what they're going to look like. So this is a great site for previewing. Then the last one is the Fonts Test Page, and this is sort of like having your own typographic book for the web.
You get to see these different font families in the font list in the CSS style, and you can see what they look like on screen. Again, it's a helpful resource. You don't have to buy a big book and you get a lot of support for designing and styling your fonts. So this gives you a little idea of what we're dealing with on the web. Remember my main motto here is be fluid, not rigid, and think about how to work around and with the issues of what fonts are on operating systems and what things are available for the user.
So I hinted a little bit that measuring fonts on the web might not be just the same way as we do it in print. There are essentially two ways that we can measure fonts. One is an absolute or exact method and another is a relative or proportional method. Now if you have been in print design or ever designed anything InDesign or any layout program, you know about absolute. We use something that's called points and we use something called leading. It's measuring the height of that letter and adding leading. A typical one for print might be 10 points with 12 point leading.
But on the web, because it's fluid and flexible and we don't know what fonts the user has and we don't know what size the viewport will be and we don't know which browser they will choose and we don't know if they're on a Mac or Linux or on Windows. Relative or proportional is often a better way to go, because it's going to be relative. It's going to scale up or scale down relative to whatever is available on that user's desktop. So one of the most common ones is to use the em, and the em nowadays means the height of the font.
So it measures things by whatever font that you have chosen. It looks at that em height, and the descriptor for leading on the web is not leading, but line height. So this is a different measurement system. If we go out to this website, codestyle.org, they've created a wonderful CSS font family glossary that explains these different measurement systems. So remember the most common ones that are relative would be percentages, or the ems. Could be exs but ems and percentages are the ones that you see most used.
It also gives you examples of how to write styles and gives you a great idea of many of the vocabulary words used in typography both in print and in the web. I highly recommend if you really want to understand this that you go out to this glossary and check this out. So here is an example of how to write line height or what we would call leading if we were in print. Here is a way to talk about measurements done in exs instead of ems. The ex would be the measurement of the X as opposed to the letter M. So there are lots of wonderful and great resources out on the web to help you be a better designer and to help you understand about measurements and which fonts to choose and once you get into the habit of not being fixe,d but being fluid using proportional and relative measurements and thinking about what fonts installed on the user's operating system, you can be a successful typographer and a great graphic designer for the web.
There are currently no FAQs about Creating an Online Resume: Hands-On Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.