Pro Tips for Picking Web Fonts Webinar Transcript

Our Type Director Dan Rhatigan shows us what really matters when picking fonts, how desktop and web fonts differ, and what makes type work well on screens.

Watch the video instead and see the related resources


Hey there everybody. Thanks very much for joining us today. My name is Shelly, and I work here at Monotype, and I’m really pleased to be able to be here today to kick off the very first event in our new webinar series. So here’s the deal, right. Each month we’re going to be tackling a new design issue or challenge. And we’ll be bringing in an expert to shine a light into those sort of dark areas of design and typography, where we sometimes stumble or get slowed down, or just want to understand better, right. So some of you may know Monotype from our typefaces, and others are maybe used to using our design tools and services. And I’m hoping that when we’re finished today that you’ll all sort of think of us as the folks who filled your day with 40 minutes of really useful information.

So, we’re ready to get started. Today to give us some pro tips for picking web fonts is Dan Rhatigan who’s joining us from New York. Dan, do you want to say hello to our guests here today? I think we’ve got about 250 nearly.


Alright, hello everybody. I hope I have some useful things to say.


Dan, everybody, is our type director, and a big part of his responsibilities is--well he’s responsible for our type libraries. And he also oversees the development of new type families. So he really does know typography and type inside and out, so he’s really the perfect person to have here today. And Dan do you want to go ahead and get us started? I’m going to hand over here.


Alright, sure thing.


And let you have the controls. So we should be able to see Dan’s slide in just a sec.


Look at that, through the magic of modern technology. This has shifted from Belfast to New York City. And I assume that I’m talking to people from all over. So we’re going to talk today about picking web fonts. I’m not going to spend time talking about how you find fonts and decide what is inspirational, or what is kind of suitable to the design brief of different projects. There are so many places on the web for you to find fonts to work with, and so much of that is subject to taste and the specific needs of your own projects, or what people want you to try out. What I really want us to look at today are how you actually make smart choices, about whether or not fonts that you’re interested in are appropriate for the kinds of projects you may be building on screens. It’s one thing to look at something and say it’s great, it has the personality I need. But it’s quite another thing to figure out if it is functional and capable of doing the kind of work that you have to do. And this is a mix of technical issues and some very fine issues about what things looks like, and particularly how they look on screens. So I’m going to walk us all through some of those issues so that you can really evaluate things—asking the right questions about whether or not they can do the work that you need to do.


Type on Screen [03:02]

So the first thing that we want to talk about is this idea of we’re really looking at typefaces onscreen which have very particular properties, compared to the way we look at typefaces for other media. So right now onscreen I’m showing an idea of really what we think a typeface ought to look like. This very detailed finely drawn collection of letters, where you have smooth curves and straight lines, and things line up the way that they ought to. The reality gets a little bit trickier. Right underneath that in that bitmap image, is a blown up version of how a typeface gets rendered at about a 1 em/16 pixel size on screen. Typefaces are design ideas. They are developed and released as fonts. The font is, in this case, the digital data that gets sent out that you can incorporate into a project.

So those smooth mathematical outlines of a digital font have to get broken down into pixels in order to be rendered on screen. But the reality of how that happens can be even a little bit trickier. So this bitmap shows how a smooth mathematical outline gets broken down. And you see that it’s not just necessarily black and white pixels being switch on and off, but it’s usually some combination of grey pixels and other channels, that together give the eye the illusion of how things look. Even if you were to zoom in on a bit typeface like this, if you got right down to that pixel level you’d be seeing similar illusions like this to try to describe those shapes. So this is an image of what the software is doing, how it’s trying to figure out how to break those smooth lines down into pixels.

But then we also have the physical properties of what screens do with that information of the pixel map. So here’s a view of something that I took with a microscope of my MacBook Air screen. And you can see these red, green, and blue color channels. Those are the sub pixels. Those are the bits that make up a full pixel. And we see those colors that come from the illusion of the pixels also are broken down into those specific color channels of that digital screen. And this is one of the big reasons about why type will look so different on so many different devices—the actual physical medium is doing something in addition to what’s happening at the software level to render that type.

If we look down again, so this is taken off of a Nokia Lumia screen which is at a much higher resolution than that MacBook Air screen. There’s not a 1:1 relationship. I can only focus so well with this little microscope that I had. But you get the sense that you’re seeing a lot more pixels packed together to render type that was set at the same size. These two images were taken off of the same web page, that that word was set in at 1 em size. And then we get into other kinds of devices that we have altogether. This is what happens when my microscope sees a Kindle E Ink Screen, which is the black and white screen that’s made out of a totally different substrate altogether than these pixel screens.

So typefaces can go through a lot of punishment, and the tricky thing to remember when you’re designing for the web is that you want to make choices that can survive this whole spectrum of use. So it’s one thing for you to build something on your screen and say that it looks good, but other people are going to see it look quite different in other devices, or perhaps in other operating systems. These examples of Aptifer Slab that I set, were all done in browsers in Mac OS. And that’s the result of that that I’m seeing on these devices. But Windows can give you a slightly different effect. Android based operating systems can give you a slightly differing effect depending on the situation.

So you have to make choices and accept that you’re not necessarily in total control of the results, but you need to understand what happens with them. So as we move forward we’re going to talk about some of the other factors that are worth considering, so that you can make some smart choices to help things survive all of these results, okay.


Typefaces [07:40]

So when we talk about typefaces there’s a double-edged sword to this situation we live in today. There’s an incredible array of different designs that you can chose from, but many of the designs were built for different purposes over the years, or were designed by different people who want to take different issues of how those letters all fit together in mind.

What that means is that typefaces don’t necessarily swap in and out all that easily. For instance, if we take an example of Neue Helvetica® (which is based on a design that was originally done in the 50s and reworked in the 80s) against Monotype Garamond (which was originally made for printing books with hot metal type in the early part of the twentieth century, based on typefaces  that were hundreds of years older than that), we see different approaches to the scale of the typeface, and these make sense for the original design purposes. But now that we have them available as digital fonts and we can mix and match them as we see fit, we discover that those original design purposes don’t necessarily don’t come out the same way when we mix them in and out.

That Garamond looks very small compared to the Helvetica®. This comes from a combination of historical issues, technical issues of the original design. And they need to just preserve what was once done. But when we have all of these available to us today, it’s worth thinking about exactly how differently typefaces can look. So now all of these examples that I’m showing right here are all typefaces that handled well, can survive, be used on screen, and can give you different personalities. But these are all actually set at the same size. This is all text set at 1 em, which is about 16 pixels in a default situation. But look how big the Helvetica® looks compared to Gill Sans®. They’re both san serifs, they’re both low contrast. If you look at them big you may think that they perform exactly the same way.

And then compare the effect of those sans against serif typefaces, which can also have different proportions, different levels of weight. So just because you think a typeface is a good idea, it still means you have to try it out, see it in context, and make sure that it feels readable for the work that you want to do with it. Now the flip side of this (and we’ll talk a little bit about more of this later) is that what happens with that difference in the size of the type (which to your eyes is mostly determined by the size of the lowercase letters that give you the sense of the density across any line of type), is that you may think that you want a typeface that has great big x-height or great big height for the lowercase letters. But that gives the appearance of less space between the lines.

So all of these passages, which are set at the same size, are also set with the same line-height. And they give you a different relationship of black to white in terms of the text color overall. So there are tradeoffs to going bigger when you’re assessing type that’s going to be set in the same way. The other thing that’s worth considering when you want to start mixing and matching typefaces is because of these different proportions you can have with different typefaces, it may actually require you to specify the sizing in very different ways, particularly when you start mixing things that come from different families. So for instance in this passage down here, I wanted to have emphasis set in a serif italic compared to the Helvetica, so it really jumps out, so that there’s a shift in personality as well as just style or weight.

But, look at how tiny that Garamond is in the middle of Helvetica®. You can’t just change the font or else the Garamond disappears altogether. So in this passage over here, I’ve actually changed the size of the Garamond to go a little bit bigger so that visually it matches with the Helvetica®. So this is just some of the care that you may have to take when you begin choosing web fonts and integrating them into your projects. Particularly if you’re going to be mixing and matching styles, it’s worth considering how they fit together and do you have to make any adjustments. And you can test these out with the desktop versions of your font too. In general, the web fonts are just the same fonts that would get used on the desktop, but they’ve been prepared differently, and often have some extra software instruction to help them look good on screen.

But usually they are the exact same mathematical outlines at the core of these different font products. We’ll talk again a little bit later about variations in the fonts that you can get so that they work a little bit better on the web altogether.


Size [12:51]

So this issue of size that we talk about a lot, is a really huge concern for anyone who is working with fonts on the web. The trick of working with anything on the web is that you are constrained by those physical properties of the screen—that pixel grid. It’s actually a pretty rough environment. We live in an era where, thankfully, screen resolution is getting better and better and better, which makes type easy to look at. But if you’re publishing something to the web, you can’t necessarily guarantee that everyone who sees your website, or who sees your app, is going to be looking at it in the exact same high resolution that you may be looking at.

So it’s good to think about how things look at these different resolutions, and size has a real relationship to that, because of course the smaller you set text, the fewer pixels there may be to actually give you an example of a clear idea of that font. So I’ve set a simple waterfall here of ITC Franklin, and it’s kind of a no brainer that if you set text very very small on screen people aren’t really going to be able to read it very well. And up to a certain point it’s not even going to make a huge difference what the design may be with most fonts. When there are so few pixels to show you what the typeface is, you may find that it doesn’t really necessarily matter. You may not be able to tell much more than it’s a serif or a sans, or it’s a regular weight font, or a bold weight font.

But once you start getting closer to about 12 pixels/1 em or higher, the personality really begins to lift out. And this is where you may have to think more carefully about what fonts you want to use to get the desired effects. At very small sizes maybe system fonts are okay, maybe you don’t have to match the same font you’re using on the larger sizes because the details won’t be visible. But around this range you really start seeing a personality that is very clearly Franklin Gothic here. This is not Verdana®, This is not Arial®. This is not Helvetica® or something else. And then of course as we go bigger, some of the real details of this particular typeface or any typeface you use become visible.

So, the sense of scale can play a lot into the decisions you’re making about how you use web fonts. Your personality of any given design project is going to be driven by the largest size typefaces you use. At the smaller sizes, you have a little bit more flexibility to just choose things that are clear and readable. It doesn’t have to be the same font necessarily for the design to be consistent. You don’t necessarily have to follow this rule of ‘don’t use more than two typefaces in the same project’. It’s more essential than ever with the web that you use what works. And that may be a mix of system fonts and your web fonts that drive the personality, or web fonts that are designed more around functionality that work at these small sizes, with fonts that have more personality and can give you a little bit more distinction at that big size.

But there’s also the flipside to this. Different things can happen when you use type at very large sizes on the web. It’s not automatically great just because something is big. We have to think a little bit more about readability and clarity at small sizes, but at large sizes you have to think about that pixel grade too. Now here are examples of two typefaces, which are based on older historical models. Optima® and this particular version of Garamond were designed in the days of metal type and photo type, where it was perfectly fine to have very very shallow curves and elegant details—lines that were just off the vertical or horizontal. Because with ink and paper, which were how these were printed, that doesn’t make a big difference.

But on screen you have to think about the fact that Optima® has no perfectly straight lines in it. Garamond has no perfectly straight lines in it, at least not this version of Garamond. They’re very very subtle curves. Now at the text sizes like I have set down here, those curves just collapse into straight lines. But at a certain large size you may be able to determine how this long stroke of Optima® is actually switching from one row of pixels to another right there. That’s something to take into consideration and to look at on different screens—because Windows may show this shift of one row of pixels to another very differently from Mac OS, or iOS.

You want to make sure that that appears to be as smooth as possible, or else it becomes really distracting to the viewer and throws off the whole design idea you’re trying to get across. So for different fonts that you use there can be a sweet spot, where it looks as much like the idea of the typeface ought to be as possible. And this is something else to test. And if you’re not sure, if you don’t kind of have an idea in your head and you’re not used to looking at these, set a sample waterfall like this. And just really see what the typefaces do with different sizes to help you decide if the choice you’re making is right for what you’re trying to do overall with the page composition.


Style [18:39]

Now style is another related factor with all of this. We are very very lucky today that we have so many families to choose from, and when you’re browsing around and making choices for a project, (especially when you’re working on the web with the nature of text dynamic), it’s good to consider how many styles a font family has, what  those other styles look like and whether or not they’re appropriate for the environment that you’re designing in. So I say that the nature of dynamic text on the web is very important for this, because if you are building out a site, if you’re building at a page, you don’t necessarily know that you’re going to be the person who does all of the type setting for that. You’re writing CSS, you’re making specifications about what typefaces should be used, but perhaps different content is going to get poured into that site. Perhaps someone else is going to be working on the copy that gets flowed into the structure that you’re designing. And what if this beautiful weight that seems very clear in the upright roman regular weight that you’ve chosen suddenly comes across an emphasis tag or suddenly comes across a strong tag that tries to switch it to bold or italic text? You can anticipate what happens with those with your CSS  and switch to the very specific font that you need (which may or may not be coming from the same family).

But let’s just say that you want to stick with the italic of the typeface that you chose, or you want to stick with the bold weight of the typeface that you chose and just work with those styling versions of the family. That means that when you are looking at the fonts that you’re interested in, you also have to look at the italics, and the bold, and the bold italic or other weights, and make sure that all of the styles of any given family also work as well as the roman—which may be the weight you’re looking at in the big sample when you’re browsing around trying to discover options and trying to decide what you like. Here’s where some other principles that have governed typeface design for a long time come into play. A lot of typefaces, particularly if they have any kind of a relationship to a traditional type typography or the motion of the hand in calligraphy, tend to get a lot narrower in the italics.

You can see in this example of ITC Legacy Sans®, that’s pretty clear in the regular weight, but it gets a little bit narrow in the italic. Now italics are always going to be a bit tricky to work with on screen because they’re slanted. You don’t have many perfectly vertical lines, which is what the pixel grid wants to see. So italics are always going to be worth taking a close look at to make sure that they have the kind of slanted lines that can render well in a variety of environments. And it’s worth looking to make sure that they don’t get too narrow so that those interior shapes of letters start to close up at text sizes. Similarly with a lot of serif typefaces, if it’s a design that has a bit more of a traditional personality to it, the italics can become very detailed in their shapes.

There can be a lot of great subtle description of form that looks fantastic in print, or looks fantastic at large sizes on screen, but it can become a little bit tricky to read as a web font at a smaller size like this. And you can see how much is going on and how grey the letter shapes turn out in an example like this. Now similarly the bold weights of fonts create other problems. At text sizes, fonts used for screens and on the web want to have a certain amount of open space so that that illusion of the different colored pixels—of varying colors, varying levels of grey—seem black. It leads to a little bit of blurring around the edges, or lead to a tendency of the renderer of an operating system or a browser to shift letters a little bit from one row of pixels to another. That means that if you don’t have a lot of space, things can collide or they can close up a little bit. So when you have bold fonts, you run the risk of letters starting to close up a little bit more, because most fonts are drawn a little bit with a dense color. So ITC Legacy Sans® holds up pretty well in the bold. There’s good clarity of the difference between the black strokes and the white ground in and around those black strokes. But it can get a little bit tough if you go much bolder, and those interior shapes start to close up as the letters are spaced a little bit more closely to one another. And then look what happens in the bold italic. And this is, again, a factor of scale as well. We were talking about size, and scale, and style, and all of these things are interrelated.

So I have set this text at 1 em yet again, which tends to default to 16 pixel size in most environments, and this is what we get. I’m going to zoom in a little bit on this page, so this is maybe the effect of bumping this up to a higher pixel size or a higher em size, depending on which unit of specification you’re working with. But look how the clarity just immediately increases the second that I bump up the size, that is a way around some of these issues. If you have a typeface that has exactly the right personality that works for your design, works for your concept, works for the brand you’re doing something for, maybe you just need to bump up the size of everything a little bit in order to get the personality to come across. So I’m going to snap back to my default size here as we go into the next part of the example.

I know that it sounds like I’m warning you that there are all these tricky issues, and working with type on the web now that we are in the era of web fonts is not just a minefield of problems. It’s great that we have all of these fonts that we can work with, all of these choices available to us. What’s particularly great is that we have access to very large type families with many weights in them. Now if you started working with web fonts when there were only system fonts available, you’d know that there’s a pretty big leap from the weight of Verdana® to Verdana® bold, or Georgia® to Georgia®bold. When we work with web fonts, particularly with these larger families that have a lot of weights like Univers® Next in this case, that’s a great tool to have at your disposal—to be able to choose from these very very fine steps in weight from one to another.

So that means that you can adjust the way you use text on a given page to have the weight that reads most appropriately for a given size, or a given environment, or a given color relationship. And this idea of having these small steps available can be really really helpful. Just take a look, for example, at the difference in Univers® Next number 430 versus 330 (which is the lightweight) or 530 (which is medium). They have a different effect, say, when it’s black text on a white background compared to white text on a black background. This is also the nature of how type is rendered on the screen; it’s not exactly the same as working with different relationships of ink on paper. There are optical issues (that even effect work in print) mixed with these technical issues of how the software renders that type, and then how the screens use that software to display those letters in the pixel grid that also change the sense of the darkness or the lightness of a text. And this is also where it can shift from one environment to another. So when you have the ability to work with large families that give you all these options, you can tune things just right and say, ‘You know what, the regular weight actually seems really really heavy on a black background, compared to when it’s on a white background. So maybe I want to step down to a lightweight to get that sense of personality that I want for that weight.’ And these are the kinds of things that are worth testing.

So when you are looking around for fonts, it may not necessarily be enough to look at samples of a waterfall that comes from the foundry website or a portal like, or MyFonts. Sometimes you actually do need to test things out and apply some of the choices you know you want to make on the site, so that you know that you’re choosing exactly the right versions that you need.


Color [28:04]

I’ve spoken a little bit just now about color and the effect that that has on the appearance of type. So that is also a pretty big deal in design overall, not just with working with type on the web. The eye tends to prefer higher contrast for reading, and this is very much a principle of talking about text set at smaller sizes for sustained reading. A little bit more contrast between the color of the type and the background just makes it a little easier to pick out the letter shapes and read things clearly. There’s another level to this of how you work with fonts on the screen. Now if you back to this blown out bitmap of my 16 pixel text on screen, my 1 em text, we see this illusion of choosing various colors and various levels of grey to trick the eye into thinking that this is crisp clear smooth text with a lot of detail. When you choose color relationships that have less contrast, you have fewer steps to get you from the dark stroke of a letter, to the background color. And that means you don’t get as smooth an illusion of the clarity of the text.

So if we look at these examples you can see that nice crisp black text is a little bit easier to read than the lower contrast grey on white. That’s pretty straightforward. It is hampered a little bit by this way that type is rendered on the screen, but it gets trickier and trickier as we try out different color relationships. This is really low contrast and is very difficult to read. This is low contrast in a different direction, becomes a little bit crisper. But look at the difference down here of the black to white, where we have high contrast (which we know works) but it has that different relationship compared to black and white. When you have the white on black down here, that’s part of the properties of how screens render type. It tries to generally preserve the crispness of the black. So in this case, it’s really strengthening the white to get good crisp black.

Down here it is strengthening the white as well, and it’s tending to bleed out into the background. So these are all things that, again, are worth testing when you’re choosing fonts. If you have a sense of the color palette for your projects, set up some tests like this and put different fonts into these scenarios so you can actually make sure that the typefaces that you’ve selected survive and remain readable for these kinds of relationships that you’re building for the overall color palette.


Spacing [31:06]

Now I also mentioned earlier the effect of space on the text. It is a bit of a general rule of thumb that if you’re trying to read things comfortably on a screen, a little bit of space can be your friend. It helps keep letters from colliding with one another. Big open counters, which are what we call the internal spaces in all of these letters, help keep things open and clear.

But as I mentioned earlier, we have this relationship of the space not just between the letters, but also between the lines that helps the eye move its way around. So in the example here, I’m looking at the effect of line spacing. So the line-height is equal to the em size of the text in this scenario. So we have a nice comfortable typeface like Avenir® Next. It has a big generous lower case height to keep those internal shapes crisp and open so that things can be read. It’s got good space between the letters so they can be clear. But because it has that big lower case x-height, that height of the lower case letters, look how much the lines get packed together when you set the text solid (which is what we’re talking about when the line-height matches the text size).

There’s not actually a lot of space between the height of the lower case letters and the height of the caps. So you’re losing this white space that helps the eye move around. Okay, so it’s simple enough to adjust the line-height. Here we’re adding a little bit more space—room for the eye to track back from the end of this line to the start of this line. So that’s super. It’s maybe starting to get a little bit generous at 1.5 ems, but it still works. You still feel like this is a single paragraph of text not separate lines. When we start spreading out the line-height a little bit too much, this actually begins to feel like a stack of lines, not text that is flowing smoothly from one to the next. And that’s worth considering—that there’s a relationship between the size of your text and the comfortable amount of space between those lines so that it holds together as a passage.

Now there’s another trick to this, that relationship of the line-height to the text is also impacted by the overall length of a line. This is why when you’re working with responsive sites and dealing with dynamic text on the web, it’s good to establish breakpoints, or to see what happens if you stretch out a screen too much if you’re not actually being very specific about the line length. Because the longer your line length is, the more space you actually need to get the eye right back to the start of that line. So this 1 em size with the 1 em line-height, still totally inappropriate. That 1.25 em which is pretty good up here, is still pretty tight. It takes a little bit of work for the eye to get from here all the way back to here without accidentally switching to another.

Now people can get there, they can read it, but it’s a little bit harder. When you’re setting text for people to read, you want to make it as easy for them to read as possible so that they can concentrate on what they’re reading, not how much effort it takes to do that reading. So with this nice broad line, that 1.5 em line-height is comfortable. It gets the job done and doesn’t have that same feeling of looseness that we had up here though. And actually, that very wide, very high line spacing from the short column works pretty comfortably for the line-height here. So this is something to factor into working out your column length and your break points and how they work with typefaces you choose. You may actually have to switch to different line heights as your overall line length changes in order to have that same feeling and the same sense of readability for any font that you choose.

Letterspacing, so we’re talking about the horizontal spacing now rather than the vertical spacing of the line-height, also has an effect. Letterspacing, unfortunately, has very blunt controls on the web. Even though we’re no longer worrying about whether or not the browser jumps from one whole pixel to another depending on how we space things, we still have to think about the effect of space and how it relates to scale. In these examples, you can see how much I have tracked the text in. So for the most part, at the size text that you would use for longer passages of copy or regular reading, it’s almost always a bad idea to play with letterspacing. The blunt controls that we have in CSS just make things problematic right away. So don’t assume that you can successfully tweak the spacing for these text sizes, you have to work with the default spacing built into fonts, okay. And then hope that the type designers actually thought about spacing and how it’s appropriate for screen. But you can see how quickly even these minor adjustments in the letter spacing start to throw off text size. But at larger sizes, it really really really helps. Typefaces that are drawn to be set at text sizes (like this Avenir® Next) can look a little bit loose at headline sizes. The air that gives us so much functionality at this size becomes a little bit spacy up here. So that’s where you may want to track things in a little bit, and it feels as comfortable then it’s a little bit tight at a large size as it feels with the default spacing of a smaller size. And you can actually go pretty pretty tight at those big sizes. This still isn’t touching.

So when in doubt you can also space things really really really wide, which is still really bad for your paragraphs of text. That’s pretty tricky to read. At headline sizes, where you are only trying to grab a couple of words at a time, they can survive a lot rougher treatment. You can squeeze them together. You can spread them out. It’s still pretty easy to take in a couple of words at a time, so you have more flexibility at that scale. Whereas for the regular text sizes, you’d have to be a lot more careful and you can’t subject the text to as much tweaking of the spacing.


The Right Tools [38:43]

So when I mentioned about how we live in an age where it’s great that we can have so many styles to choose from from a family to help select exactly the right one for the task at hand, it’s not just a matter of choosing from the available weights that are drawn.

The more that we have worked with type on the web, the more the type foundries and type designers are trying to think about coming up with versions of typefaces that are really specific to reading things on the web. That are very specific to this environment where it’s pretty coarse, and you have backlit screens, and where you have these pixel grids that can distort the shapes of letters. So it’s also worth looking at for foundries that have designed type specifically for the web—either where they talk about how it’s a new typeface that was drawn from scratch with the web in mind, or if they have taken older typefaces and reworked them in order to look great on screen.

So a lot of people are doing this. Monotype has been releasing what we call our eText typefaces. Hoefler Type Foundry has been doing their ScreenSmart typefaces. Font Bureau has been doing this, and more and more foundries are getting on board with this idea of having different versions of a design that are suited for the task at hand but still give you the personality of that design idea for the environment that you’re using them in. And this example of Galliard versus Galliard eText, the traditional Galliard (which is based on the print font and it’s just been built as a web font) is shown here in red. Galliard eText, which was originally prepared for that really course environment of the black and white e-ink screens, has a number of adjustments made to it so that it can be read more easily and its fine details will degrade less on screen.

And these are the kinds of things that have been done to it. You see how the dot’s bigger, the letters are taller, the thin strokes are not quite as thin. Overall it’s been tweaked so that it’s less delicate, because that’s what you need in the environment of a screen. And look at the effect in readability at text sizes for the existing versions of a lot of these different type families compared to these ones that had been rethought and redesigned specifically for how you look at them on screen. Linotype Didot® is a design that is very very delicate and is very tricky to read. But with a little bit of handling, it becomes a lot clearer on screen. And you can see the same for Galliard®, as well as the other styles in the Galliard® family. I talked about how careful you have to be about the detail and the narrowness of traditional italics. Galliard® eText is a lot wider and a lot clearer.

Even a design like Helvetica®, which people say is amazingly legible, amazingly clear on screens, can be improved. There’s a lot of debate about how suitable Helvetica is for reading, especially on screens. Well it can be improved. You can make it a little bit bigger, a little bit more open. And with those little tweaks, you can get that Helvetica® feeling but in a way that carries across the spirit of the design much better in this environment. And that’s what these eText typefaces are all about. They can also help you out with these color relationships that I talked about, particularly when you have light text on a dark background. Again look how much clearer Didot is compared to the Didot® eText, and Neue Helvetica® to the Neue Helvetica® eText. And this is what type designers and foundries are trying to address when they release these versions of fonts that are designed for the screen. They want to make sure that the idea of what this looks like in the best environment carries across in a tricky environment like the web. So when you are looking around for typefaces, looking for inspiration, these are all the kinds of questions that you should be asking yourself. Is what you like also appropriate for the actual work at hand and what you’re trying to make? Are my typefaces going to be easy to mix well? Do they work at the size that I actually need to set text at? Do I get the amount of personality I need for the size that I have to set text?

Does that personality start to break down and give me other technical issues to look at? Are there enough styles in the family that I choose to be able to manipulate and make all the right choices for everything I need to design with this typeface? Am I planning color relationships that are going to cause problems for the text? So do the fonts that I want to use actually hold up with all of these different kinds of choices that I may want to make about size, and about color, and about spacing? And do I need to think about controlling the spacing, and putting in some extra specification in my CSS, to make sure that my text looks as great as it can with the pages that I’m building? And that involves manipulating the vertical space as well as the horizontal space.

And then if there’s a font that I want to use, is there a version of it that’s perhaps better for working on the web then a version for working in print? And hopefully all of these factors can sway your decisions so that you can make really smart choices about what you want to do.


I just want to thank Dan for taking the time to give such a great presentation. There was a lot of great feedback in the questions window, and it seems like everybody has really enjoyed it. And we’ll just thank him for sitting in with us today.


It was a pleasure. I hope that everyone got some good tips out of this.


And that’s all. We hope to see you guys at the next one, and thanks very much for joining us on our first one, the first of many. And have a good afternoon or night depending where you are in the world.