CoffeeCup Software Web Typography Handbook

Transcription

CoffeeCup Software
Web Typography Handbook
Prepare to make ugly Website text a thing of the past with these
simple, step-by-step directions on how to spice up your Web
typography with the help of CoffeeCup sIFR Font Maker, Website
Font, and Direct FTP. As an added bonus, we’ve included several
helpful Web Page Design For Designers (http://www.wpdfd.com)
articles covering everything from choosing Web-safe typefaces to
using CSS to improve text readability to utilizing minifonts.
165 Courtland St. Suite A, Box 312 Atlanta, GA 30303
(678) 495-3480 • www.coffeecup.com
Table of Contents
How To… ........................................................................................ 4
Introduction.............................................................................................4
Convert Fonts For sIFR ..............................................................................4
Modify sIFR Formatted Fonts ......................................................................6
Add sIFR to Your Website......................................................................... 11
Become a Web Typography Expert............................................................... 15
Typography and Renaissance-Era Eroticism ............................................. 16
Introduction........................................................................................... 16
Typeface vs. Font .................................................................................... 17
Types of Type......................................................................................... 17
Serif......................................................................................................................... 18
Sans Serif................................................................................................................. 18
Monotype................................................................................................................ 18
Cursive .................................................................................................................... 19
Fantasy.................................................................................................................... 19
Picture..................................................................................................................... 19
Play it Web-Safe ..................................................................................... 19
Getting Choosy With CSS ......................................................................... 20
Be Responsible ....................................................................................... 21
Knowing About Web-Safe Fonts ........................................................... 22
What Are Web-Safe Fonts?........................................................................ 22
Who Should Use Web-Safe Fonts? ............................................................... 22
Why Use Web-Safe Fonts?......................................................................... 22
When Should I Use Web-Safe Fonts?............................................................ 23
When Are Web-Safe Fonts Applicable?......................................................... 23
How Do I Use Web-Safe Fonts, and Which Ones Are Safe? ............................... 23
Serif Web-Safe Fonts................................................................................................ 24
Sans Serif Web-Safe Fonts........................................................................................ 24
Monospace Web-Safe Fonts ..................................................................................... 24
Cursive Web-Safe Fonts ........................................................................................... 25
In Some Cases, Can I Use Other Fonts? ........................................................ 25
Provide Downloads For Your Users ......................................................................... 25
Use Images .............................................................................................................. 26
Image Replacement Techniques ............................................................................... 27
Use sIFR ................................................................................................................. 28
So There You Have It! .............................................................................. 28
Don’t Be Afraid of Serif Fonts .............................................................. 29
Introduction........................................................................................... 29
Things to Keep in Mind ............................................................................ 20
Benefits of Using Serif Fonts .................................................................................... 31
Things to Watch Out For When Designing With Serif Fonts..................................... 31
Keeping The “Design” in Web Design.......................................................... 32
Simple CSS: Creating More Readable Text .............................................. 33
Introduction........................................................................................... 33
A Sample Page........................................................................................ 33
Choosing Your Fonts ............................................................................... 35
line-height — Be Good to Your Visitors!.................................................. 39
Adjusting Letter Spacing ........................................................................... 41
Expanding on This CSS ............................................................................ 42
Everything You Wanted to Know About Web Type But Were Afraid to Ask .... 43
Introduction........................................................................................... 43
Serif......................................................................................................................... 43
Sans Serif................................................................................................................. 43
Monospace (Typewriter Style).................................................................................. 43
Cursive (Scripts and Informal).................................................................................. 43
Fantasy (Far Out or Fanciful Designs) ...................................................................... 43
CSS and Fonts ........................................................................................ 44
Safe Choices .......................................................................................... 44
MSIE Core Fonts .................................................................................... 45
The Best Fonts to Use............................................................................... 46
Serif Fonts ............................................................................................................... 46
Sans Serif Fonts ....................................................................................................... 47
Monospace Fonts .................................................................................................... 48
Cursive Fonts .......................................................................................................... 49
Size Matters........................................................................................... 50
Very Small Fonts..................................................................................... 51
Minifonts ........................................................................................ 52
Specifying Small Type Sizes ................................................................. 53
CoffeeCup Software Web Typography Handbook...................................... 55
Introduction........................................................................................... 55
Trademarks............................................................................................ 55
Warning And Disclaimer........................................................................... 55
Published By .......................................................................................... 55
How To…
A great way to make your Website stand out is to use creative fonts in your
headings and accents. In fact, the right font can say almost as much about your
content as the text itself. However, Web designers tend to run into trouble when
they try to use fonts on their Websites that aren’t installed on their users’
computers. When this happens, the text defaults to a Web-safe font, which has
unpredictable — and often ugly — results.
With CoffeeCup sIFR Font Maker and Website Font, you can bypass these
snafus through the magic of scalable Inman Flash™ Replacement (sIFR).
Converting your heading and accent text for sIFR means it will display correctly
every time.
This guide will start by showing you how to convert fonts on your computer for
sIFR using CoffeeCup sIFR Font Maker. Then you’ll learn how to customize
them with Website Font and use Direct FTP to add them to your Webpage.
Convert Fonts For sIFR
First, open sIFR Font Maker. You can do this normally or through Website Font
by clicking the sIFR Font Maker icon located beneath the Fonts pane, using the
keyboard shortcut Ctrl+Shift+M, or navigating to Fonts menu > CoffeeCup
sIFR Font Maker.
Once sIFR Font Maker is open, click the Browse button next to the Regular Font
field and browse your computer for the font you wish to convert. You can repeat
this process with the italic and bold versions of the font if you’d like to be able to
apply these styles when using the font on your Website.
The next step is to select the glyphs (characters) you’d like to include in the
conversion. Your options are All, Basic (a set that includes all upper- and
lowercase letters, the numbers 0-9, and six commonly used punctuation marks),
or User Defined. Once you’ve configured these settings, the sIFR Font Maker
workspace will look like this:
You’re given two options for saving your converted font. Save as… saves your
font to a location of your choice, whereas Export to Website Font saves the font
within Website Font, which allows you to modify its color, size, and effect set.
For this walkthrough, we’ll be using the Export to Website Font option. Once a
font has been successfully converted, this dialog box will appear:
Modify sIFR Formatted Fonts
!
After you have exported your font to Website Font, it will appear in the My
Fonts section of the Font pane.
This list is not automatically refreshed, so if Website Font is already open, you
will have to use the keyboard shortcut Ctrl+R or navigate to Font Menu >
Update font list in order to access your new font.
Once you have successfully imported your font, you can use Website Font’s
editing tools to create exciting text effects. First, select the HTML tag you’d like
to modify. The H1 tag is automatically present in the Tag pane, but you can add
more tags to the list by clicking the Add Tag icon beneath the Tag pane or the
Add Tag button in the Toolbar, navigating to Tags menu > Add Tag, or using
the keyboard shortcut Alt+Shift+A.
These options open the Add a new tag dialog box, which includes a drop-down
list containing the HTML tags H1-H9. You also have the option of manually
entering any valid HTML tag. For this example, we’re going to use the H2 tag.
Once you’ve selected a tag, you can begin editing it. The Font pane contains
options for changing the size, color, style, and background color of your text and
links. The Hover option allows you to modify how a link will look when a visitor
holds their mouse over it. For this example, we’ll change the size to 50, the style
to italic, and the color of regular text to a pretty purple.
Meanwhile, the Effects pane gives you the option to apply more sophisticated
styles to your text, including shadow, bevel, and glow effects. You can choose
from a number of stylish predefined effects, or experiment with the tools to create
a unique design. For this example, we’re going to use the predefined Smoke
Room effect. This adds a drop shadow and bevel effect.
You can keep an eye on how your changes look using the Preview pane. Just
type text in the Enter Text field, and it will appear in the Preview field complete
with the changes you’ve made applied. The example we’ve been working on
looks like this:
If you’d like to see how the text looks in a Webpage, either click the Preview
button in the Toolbar, use the keyboard shortcut Ctrl+Shift+P, or navigate to
My Webpage > Preview all the tags.
The preview option opens a browser window containing your modified fonts.
When you’re satisfied with how your font looks, save it. Then, click the Get
Code button on the Toolbar or navigate to My Webpage > Get Code.
A window will appear giving you instructions for uploading your fonts. This
involves uploading the websitefontdata folder associated with your font and
adding the provided code to the <head> section of every Webpage where you
want your fonts to appear. If you are unsure of where your websitefontdata folder
is stored, this window provides a link to its location.
Add sIFR to Your Website
The next step is to open Direct FTP and browse your computer for the
websitefontdata folder associated with the font you want to add. Once you’ve
selected this folder, connect to your server. You can do this by navigating to File
menu > Quick Connect or by selecting your server from the Servers button dropdown menu.
Once you’re connected to your server, you can upload your websitefontdata
folder by clicking the Upload button on the Toolbar, dragging the folder from its
local location to the My Server pane, using the keyboard shortcut Ctrl+U, or
navigating to Actions > Upload to Server.
You can track your uploads using the FTP Activity pane. A red X will appear
next to the progress bar when the transfer has been completed. When your folder
is uploaded, your workspace should look like this:
The next step is to paste the code from the Get Code window in Website Font
into the head section of your Webpage. You can do this within your preferred
Web design program, such as CoffeeCup HTML Editor or CoffeeCup Visual Site
Designer, or you can use the File Editor pane in Direct FTP. To open a file for
editing, you can navigate to File menu > Open File (in Editor) or use the My
Computer pane to navigate to the desired file, and then drag and drop it into the
File Editor pane.
Once you have opened the file you wish to edit, you can simply paste the code
provided by Website Font just before the </head> tag.
Once you’ve finished inserting the code and making any other last-minute
changes, save your code. You can do this by navigating to File menu > Save as
Local File, using the Save icon and selecting Save Local, or with the keyboard
shortcut Ctrl+S.
When you’re done saving, simply upload the modified page using any of the
uploading options outlined above.
You also have the option of editing a Webpage that’s already on your server. Just
use the My Server pane to find the page you wish to modify, and then drag it to
the File Editor pane. Paste the code provided by Website Font just before the
</head> tag. When you’re done editing your code, save the file remotely. You
can do this by navigating to File menu > Save to Website, using the Save icon
and selecting Save Remote, or with the keyboard shortcut Ctrl+Alt+S,
When you save, a window will appear asking whether you wish to overwrite the
existing files. Select Overwrite.
And that’s it! Now you can open up your favorite Web browser and check out
how your new fonts look!
Become a Web Typography Expert
The following articles have been hand-selected from Web Page Design for
Designers (http://www.wpdfd.com) for their usefulness and relevance. They’re
arranged in reverse chronological order, starting with the most recent article from
November 2008 and ranging all the way back to a classic written in March 2003.
These articles present several views — some of them conflicting — about Web
fonts and typography. Although every piece is helpful, some of the information
may no longer apply to current Web design trends. We leave it up to your good
judgment and personal taste to decide what to use and what to ignore.
Typography and Renaissance-Era Eroticism
by Brooke Marshall — November 11, 2008
Hold on tight, people: I'm about to take you way, way back.
Think back to a time before the Internet, before computers, before typewriters,
back when the word “America” was still fresh on the lips of European colonists
and people were still getting used to that newfangled Gregorian calendar. I'm
talking about the 1600s, the Renaissance, perhaps the highest pinnacle of
European art and creativity.
Back in those days, a man by the name of John Donne stunned his peers with
glorious poetry that was highly clever, highly metaphysical, and highly erotic.
Yeah, I'm talking about the same John Donne you probably studied in high
school. Since English teachers seem to delight in draining the fun out of the great
works of literature, I'm not surprised if you're a bit skeptical about the whole
eroticism thing. Let me prove you wrong.
In “The Flea,” Donne set out on the unlikely task of attempting to seduce his
reticent lady-friend by explaining that, since they'd both had their blood sucked
by the same flea, they'd practically already had sex. That being the case, they
should just go ahead and consummate their relationship — after all, why should
the flea have all the fun?
MARKE but this flea, and marke in this,
How little that which thou deniest me is;
It suck'd me first, and now sucks thee,
And in this flea our two bloods mingled bee;
As if the juxtaposition of flea infestation and sex wasn’t clever enough, Donne
took an extra step and cracked a few typographical puns. Take a closer look at
the third line — “It suck’d me first, and now sucks thee” — and then think back
to Renaissance typography, particularly the infamous “long S.” Not familiar with
what it looks like? I'll fill you in:
Replace all the S's in that third line with long S's, and you'll get this:
That's right.
And just in case you're wondering, yeah, John Donne knew exactly what he was
doing. There's a reason why he's still remembered today — he was witty,
unafraid of ribaldry, and a literary master beyond compare.
Now let's fast-forward to the present day. There's actually a lot Webmasters can
learn about the importance of Web typography from this little exercise in
Renaissance-era eroticism. The way you present your text can and does have an
effect on its meaning — even if you aren't using typography that transforms a
relatively innocuous word into the F-bomb.
Typeface vs. Font
Before we get started, one thing needs to be clarified: the difference between
typeface and font. Most people use these two terms interchangeably, but they
actually mean two different things. A typeface is a specific design within a type
family. For example, Times New Roman is a typeface within the serif type
family. A font, on the other hand, is a variation of a typeface. Every time you
bold, enlarge, shrink, italicize, or otherwise modify a typeface, you're working
with a font.
For more information about the typeface vs. font debate, I highly recommend
Jon Tan's examination of the subject at
http://jontangerine.com/log/2008/08/typeface--font.
Types of Type
When you're deciding what typeface to use, you should first figure out which
type family best fits your textual intentions. Like John Donne, you should know
how your text is going to look when rendered in a specific typeface, and what
layers of meaning the typeface is going to add to what you're saying.
Typefaces come in many shapes and sizes, but they can all be categorized into six
type families: serif, sans serif, monospace, cursive, fantasy, and picture.
Serif typefaces got their name because they have serifs — those little decorations
on the end of strokes within each character. Serifs are useful because they provide
a horizontal groove that serves as a visual cue for the reader's eyes to lock into.
This makes them easier to read, particularly at small sizes, which is why they're
so widely used in the text of newspapers. They tend to be proportionally spaced,
which means that different characters have different widths. They're great if
you're trying to convey an authoritative, professional feel, but you should avoid
them if you want your text to seem more personal and friendly. This isn't a hardand-fast rule, though; for more information about using serif types, check out
David Rodriguez's fabulous article on the subject, “Don’t Be Afraid of Serif
Fonts.” A few serif typefaces you may have seen are Times New Roman and
Georgia.
Sans serif typefaces are proportionately spaced and, as you may have guessed,
don't have serifs. This means they're harder to read at smaller sizes; however,
they work well as headings or large text. They also seem a lot friendlier and more
approachable than their serif counterparts. Popular sans serif typefaces include
Arial, Helvetica, and Verdana.
Monospace typefaces may or may not contain serifs. What sets them apart is that
they aren't proportionately spaced — that is, each character takes up the same
amount of horizontal space. Monospace isn't the best choice for most text, but if
you're looking to set certain text apart, or if you want to create a mechanical or
typewriter-esque feel, typefaces like Courier and Lucida Console will work just
fine.
Cursive typefaces such as Comic Sans are curvy and stylistic, and are meant to
look like handwriting. As you might guess, these can be kind of cheesy and
difficult to read, and as you might not have guessed, they sometimes inspire
hatred. This means it's best to limit your use of them to accent text; for instance,
if you’re going for a really personal look in a heading, a cursive typeface could be
just what you're looking for.
Fantasy typefaces are decorative and artistic — think Impact — which means
that, like cursive typefaces, they can be difficult to read. In addition, these
typefaces can come with unique limitations, such as a lack of lowercase letters.
These typefaces are best used as accents, not your main text.
The picture type family consists of those crazy typefaces that replace characters
with symbols and illustrations, like astrological signs, shapes, and the like. I'm
sure at some point you've had fun checking out what your name looks like in
Wingdings or Zaph Dingbats, but it's best to avoid these typefaces altogether
when designing your Website. The reason for this — besides the fact that they’re
completely nonsensical — is that there are no browser defaults for picture
typefaces, because they don't correspond to an actual language. An A is an A no
matter whether you're using Arial, Comic Sans, or Times New Roman, but if
you're using a picture typeface, it could show up as anything from a flower to a
pair of scissors to a Kronecker delta.
Play it Web-Safe
So, now that you know the different type families you can choose from, it's time
to go wild and pick out all your favorite typefaces for your Website, right?
Unfortunately, no. Web browsers are finicky beings, and they usually don't get
along very well with creative-looking typefaces. If a browser encounters a
typeface that isn't installed on its computer, it will default to another typeface,
which can seriously mess up your design, let alone the meaning you had in mind
for your text. Your best bet is to stick to Web-safe typefaces, which are generally
rendered the same in all browsers, for your main body text. This isn't necessarily
a bad thing — there are enough of these typefaces to ensure that you'll be able to
find something to fit the mood of your text and your Website. Here are the most
common Web-safe typefaces:
Arial
Arial Black
Courier New
Times New Roman
Impact
Comic Sans MS
Georgia
Trebuchet MS
Verdana
Meanwhile, you should play up the power of creative typefaces by exclusively
using them as headers and text accents. In order to do this without the browser
defaulting to another, safer typeface, you can create an image of text or use a
program like CoffeeCup sIFR Font Maker to create Flash™ text. You can go
further with Flash™ by adding colors and effects to your typefaces using a
program like CoffeeCup Website Font. I'd go into more detail about these
processes here, but David Rodriguez has already written an excellent article on
this topic, “Knowing About Web-Safe Fonts.”
Getting Choosy With CSS
When John Donne was penning poetry, he only had two options for displaying
his work: handwritten pages or the relatively new technology of the printing
press. That being the case, he didn't have the opportunity to choose between
different typefaces that might work better with his artistic vision. Instead, he had
to work within the established system. Although modern-day Web designers have
to do this in a sense with Web-safe typefaces, they do have the option of choosing
which Web-safe typefaces they'd like displayed. You can do this using a simple
bit of CSS: the font-family property.
Say you want to use Baskerville, a stately, sophisticated serif typeface, for your
Website text, but you're not sure all your users are going to have it installed on
their computers. What you could do is pick another, more common serif
typeface, like Georgia, and set that as a backup. You could even set “serif” as a
backup for the backup, just in case your Website visitor is using some strange
browser that doesn't recognize Georgia. Setting serif instructs the browser to use
its default serif typeface in case it doesn’t recognize the other typeface(s). The rule
would look like this:
font-family: Baskerville, Georgia, serif;
You can learn more about this technique in yet another article by the illustrious
David Rodriguez, “Simple CSS: Creating More Readable Text.”
Be Responsible
Webmasters are presented with a ton of freedom when it comes to typography.
Novelists, journalists, academics, Renaissance poets, and other purveyors of the
written word are pretty much limited to strict typeface conventions, but the
Internet plays by a different set of rules. Big text, small text, colorful text, text that
glows and explodes and reassembles — pretty much anything is possible with the
powerful tools available to Web designers.
But just because you’ve got a lot of freedom doesn't mean you should abuse it.
The “suck” pun only appears in “The Flea” twice — John Donne knew that if he
overused it, it would lose its power and cleverness. In the same way, you should
preserve the power and cleverness of your Web typography by using tasteful text
and saving the creative, exciting typefaces for special occasions.
Otherwise, your Website could suck.
“The Flea” screenshot taken from http://digitaldonne.tamu.edu/.
Knowing About Web-Safe Fonts
by David Rodriguez — July 22, 2008
What Are Web-Safe Fonts?
Practically every personal computer has a set of fonts installed. These fonts are
usually put there by the computer manufacturer or are the default sets of fonts for
the operating system that computer is using. It's possible to install additional fonts
on your own.
However, not all font sets are created equal. Different computers can have very
different sets of fonts installed, and most casual computer users never know the
difference. When you are designing a Webpage, you need to keep this in mind. If
you decide to use a font on your page that a visitor doesn't have, that font will
render differently (and often unattractively) on the visitor's machine.
So, how do you make sure your fonts will look good on the largest number of
computers out there? Easy: Use Web-safe fonts. As computing evolves,
considerations for the Web have taken effect for modern operating systems and
Web browsers. Among these considerations is a list of Web-safe fonts that Web
designers can use to make sure their fonts render properly. Web-safe fonts are a
set of highly common fonts that come installed on just about every computer out
there. Some (much) older computers may not have a few of the fonts that we
consider Web-safe today, but they are a minority.
Who Should Use Web-Safe Fonts?
Every Web designer should use Web-safe fonts. There are some cases where you
may want to use a special, non-Web-safe font, but these cases are rare. (We'll
discuss cases like this in a bit.) By keeping your fonts readable with Web-safe
fonts, you retain readership and make your site more accessible to a wider range
of people.
I guess the best answer to the question of should use Web safe fonts can be
summed up in one word: you.
Why Use Web-Safe Fonts?
As explained above, if you use a font on your page that your visitor doesn't have
installed, their browser will pick a fallback font that you may not intend to appear
on your page. Often, the result is ugly text that is not at all pleasing to read.
If a visitor can't fluidly read your site, then he or she can't get the information you
provided, and that’s the whole reason why your visitors are at your site! Even if
the text on your site is ugly and someone decides to trudge through it for your
content, it will still look displeasing, and you will retain fewer readers. A Website
with no readers is a waste.
Using Web-safe fonts is just one part of a larger set of design practices that keep
your site user friendly. Don't strain a reader's eyes, don't make information
difficult to find, and make sure they can progress through your site and content
without having to think about it. If at any point someone looks at your site and
takes even a millisecond to think, "Ugh, that's some ugly text," you've jarred the
experience. Ideally, the entire encounter with your site should be smooth as silk,
and using a Web-safe font is a big part of attaining that goal.
When Should I Use Web-Safe Fonts?
As a general rule, always use Web-safe fonts for your page content.
Where Are Web-Safe Fonts Applicable?
Your plain text headers, links, and content should all use Web-safe fonts. If you
plan to use normal text for your logo, you should use a Web-safe font for that,
too. In fact, one of the few exceptions to using Web-safe fonts is if you decide to
use text in your images. If you plan to use images for some of your text, then it's
safe to use other fonts, because images will appear the same on the visitor's
computer as it does on your own. However, you should never use images for all
your text. This technique should be used sparingly, such as in logos and headers.
Everything that's content or otherwise normal text should use a Web-safe font.
How Do I Use Web-Safe Fonts, and Which Ones Are Safe?
Include Web-safe fonts in your CSS with font or font-family rules.
There are a good number of Web-safe fonts. Many of them look very similar to
other Web-safe fonts, and in practice they are essentially the same. A CSS rule for
your font family, for example, may look like this:
font-family: Arial, Helvetica, sans-serif;
The first font listed, Arial, is an extremely common font available on most
computers, so you can safely bet that it will show up properly on a visitor's screen
when they visit your site. In rare cases, however, a computer may not have Arial
installed. Older Apple computers, for example, may not have Arial, as well as
several other fonts. Helvetica, though, is widely installed among Apple
computers, and it looks very similar to Arial, so Helvetica is listed second. When
a browser cannot find the first font listed, it looks for the next fonts in order. In
this case, Helvetica will be used when Arial is not installed.
And in extremely rare cases, some computers may not have Arial or Helvetica
installed. In this case, "sans serif" is used. This is a fallback, default font a Web
browser will use if it cannot find any of the previously listed fonts.
There are four types (or families) of Web-safe fonts: serif, sans serif, cursive, and
monospace. Each of these has its own fallback font (like sans serif above). The
fallbacks for each family, respectively, are: serif, sans serif, cursive, and
monospace. You will find that font rules almost always include one of these
fallbacks, and always last.
Serif Web-Safe Fonts
The art of Web design has many general guidelines that have taken hold as the
Web has become more firmly rooted in the Web 2.0 setting. We have other
articles that discuss when to use serif and sans serif fonts, so all I will say here is
that, in general, serifs have generally been used mainly for headings. Below are
the Web-safe fonts that you can use for your serifs:
Bookman Old Style
Garamond
Georgia
Palatino Linotype, Book Antiqua
Times New Roman, Times
Sans Serif Web-Safe Fonts
Sans serifs are typically used for the bulk of the content on a Website.
Arial, Helvetica
Arial Black
Impact
MS Sans Serif, Geneva, Verdana
Trebuchet MS, Helvetica
Lucida Sans Unicode, Lucida Grande
Tahoma, Geneva
Monospace Web-Safe Fonts
Monospace fonts are useful when you want to make sure characters all line up
with exactly the same width. Displaying code or tabular data without using a
table are good uses for monospace fonts.
Courier New, Courier
Lucida Console, Monaco
Cursive Web-Safe Fonts
Currently, there aren't many Web-safe cursive fonts. There is a cursive fallback,
like sans serif, serif, and monospace, but for the most part it is highly unused.
There's some debate whether Comic Sans MS is a compatible match with the
cursive fallback font. Some think Comic Sans MS belongs with sans serif fonts,
and others say it's the closest font to a normal cursive-like feel that you can
currently get in a Web-safe font.
In any case, cursive and Comic Sans MS are typically avoided. Personally, my
opinion is that you should avoid both of these altogether.
Comic Sans MS
In Some Cases, Can I Use Other Fonts?
Yes, there are some exceptions to the "always use Web-safe fonts" rule.
Sometimes due to circumstances out of your control, you simply must use a font
that is not considered Web safe. A client, for example, may have a business that
has used the same font for their company's signs, trademarks, and logos for over a
century. Bringing a business like that to the Web without losing its long-standing
integrity and brand recognition would likely be impossible with a Web-safe font.
Or perhaps you, as a designer, want to experiment with design and take things to
the bleeding edge. I've always believed that true artistry and experimentation lay
in the artist's ability to see beyond the normal scope and step away from standard
practices. If you share this idea, then undoubtedly at some point you're going to
look for ways to tinker with non-Web-safe fonts in your pages.
Below are the best ways to use non-Web-safe fonts in your page and still have
them render properly on most computers out there.
Provide Downloads for Your Users
If you want to use a very specific font for your site, you can include a link to the
font file on your page. In this way, visitors can download and install the font,
then visit your page and see the font rendered properly with no real drawbacks.
This is a lot of work to expect the visitor to do, though, just to view your site as
you want them to see it. The visitor doesn't usually want to do anything special
just to view a Webpage. Requiring that someone go through the trouble of
downloading and installing a font just to view your site is a great way to lose
visitors. Odds are, most of your visitors won't even know where to begin
installing the font, anyway.
There are also some potential legal issues if you take this route. If you are not the
person who created the font, then most likely you do not have the legal rights to
distribute it.
Because of these major flaws, this method is widely avoided.
Use Images
When you use an image editor like Photoshop, The GIMP, or even MS Paint,
you can create images that use any font you like. Put the image on your page,
and it will look the same on a visitor's computer as it does on yours. Below is an
image that uses three non-Web-safe fonts that came pre-installed on my
Macbook.
Whether you, as this site's visitor, are on a Mac, a Windows PC, in your favorite
flavor of Linux, or even surfing on something else like a PDA or iPhone, the
fonts above show up properly. This is true even if your PC doesn't have these
fonts installed.
This is a great way to display any font you like for your logo, advertisements, or
some of your headers. However, for a number of reasons, you cannot rely on
images for actual content. First, a visitor cannot highlight text with the mouse,
which means if they want to copy and paste your text somewhere (say, to send
your business name to a friend), they can't do it. Also, text in images cannot be
read by screen readers, which some handicapped people use to browse the Web.
Any text you have in your images will not be accessible to these people. Plus,
some people browse with images turned off or have their images blocked by a
third party, like in some corporate offices that use a proxy server. Finally, search
engines cannot properly read and catalogue text within images.
All in all, any text you use in your images should primarily serve as purposeful
decoration. There is an alternative though: using an image replacement
technique.
Image Replacement Techniques
There are techniques you can use in your CSS and (X)HTML that will let you
use images in place of regular text while maintaining your site's accessibility and
search engine friendliness. Notice that the header above that reads "Image
Replacement Techniques" is an image. It uses a font called Rockwell (which also
came installed on my Macbook), and the font is green rather than the typical
black we've been using.
This header utilizes an image replacement technique called Single Pixel <img>
Replacement. It uses CSS and (X)HTML to display the image, but if someone
has CSS turned off, the image will not appear. To solve this problem, there is a
hidden span element that will still neatly display the text "Image Replacement
Techniques" for this header.
As for screen readers and other situations where images might not be accessible,
there is a 1-pixel image with alt text that reads "Image Replacement Techniques."
This way, we aren't harming accessibility, and screen readers will still pick up the
text as we intend it.
One of the only disadvantages to using this technique is that it adds some
extraneous elements to your (X)HTML. They don't harm anything, but they do
add more bulk to your work and to the file size of your document. It also makes
it more difficult to follow when reading your site's code. Even still, it's a fantastic
way to add rich typography to your site.
If you want to try out this image replacement technique on your site, let me
provide you with the code you need. First, create two images, a spacer GIF and
the header image. (Yes, I know the general feelings about spacer.gif. Let’s keep it
between us, just this once.) Next, add this code to your CSS file.
#header {
width: 250px;
height: 30px;
}
#header span {
display: none;
}
Finally, implement the image replacement with this in your (X)HTML:
<h3 id="header">
<img src="spacer.gif" alt="Image Replacement
Techniques" />
<span>Image Replacement Techniques</span>
</h3>
View it in a browser, and you should see the effect at work. You can find a list of
image replacement techniques over at mezzoblue (http://mezzoblue.com),
which is where I was introduced to this particular image replacement technique.
Use sIFR
sIFR (Scalable Inman Flash™ Replacement) is perhaps the most popular way of
using rich, beautiful fonts on your page. Indeed, you can see an example of it at
the top of every WPDFD article. Titles on this Website are written in Interstate,
which is not typically a Web-safe font.
This used to be a somewhat involved process that could take a long time to do,
even for experienced Web designers. However, with the advent of tools like
CoffeeCup sIFR Font Maker, the technique is now almost instantaneous. You
learned earlier in this PDF how to use CoffeeCup sIFR Font Maker, Website
Font, and Direct FTP to create and upload Flash™ fonts to your Website.
So there you have it!
Well, you came upon this page and read through this article to help stay
informed on Web-safe fonts, and now you know all the most important aspects of
them. If you'd like more information on how big an effect readable text has on
your page, feel free to read a previous article of ours, “Simple CSS: Creating
More Readable Text.”
Don't Be Afraid of Serif Fonts
by David Rodriguez — April 28, 2008
As the practice of Web design ages, some common rules and best practices
inevitably embed themselves in the craft. Among these are the processes for using
specific types of semantics when coding your site, like using divs as hooks in your
X/HTML for your CSS to make your page more beautiful and functional.
Another is to ensure readability of your site by choosing a proper number of fonts
(generally, no more than three or four, and for the minimalist, one or two). More
important than that is the type of font you choose.
Typography in your Web design is undoubtedly important. For some time now,
it's been taught and practiced that using a sans serif font is the best choice for
page content and large blocks of text in Web design, whereas serif fonts should be
reserved for use in small doses or as the style of choice for your headings.
WPDFD even has a very recent article that states this. Some other places you can
find this teaching:
•
•
•
About.com (http://webdesign.about.com/od/fonts/a/aa080204.htm)
Urban Fonts (http://www.urbanfonts.com/blog/sans-serif-fonts-forwinning-web-design/)
Web Design Reference
(http://www.webdesignref.com/examples/textex.htm)
In a nutshell, here are some of the key points to remember when using sans serif
fonts:
•
•
•
•
•
Sans serif fonts look good at most sizes.
They tend to have a more contemporary or business feel.
Most operating systems render them neatly.
Serif fonts tend to lose readability at smaller sizes.
Serif fonts, when viewed on a Windows computer, may look terrible.
Even though Windows has a ClearType ability that smoothes the edges of
screen fonts, thus improving the readability of serif types, most computers
don't have this option turned on by default. Sans serif fonts, on the other
hand, can look good with or without Windows ClearType turned on.
Overall, designing with sans serif fonts for your main content is a good general
typography rule for your design. Many popular sites use sans serif fonts for
viewing on the Web, and it certainly works well for them. Google is an obvious
example, and Microsoft and Yahoo! also follow this convention. Prominent sites
in our own field, such as A List Apart and our very own WPDFD, use it to very
good effect.
But. (You knew that was coming, didn't you?)
I fired up my RSS reader recently and came across a fairly attractive page with an
entry about designing with type characters:
http://cameronmoll.com/archives/2008/04/designing_with_type_characters/.
This particular page doesn't touch directly on using serifs in Web design, but I
found it easy to read.
It was also fairly refreshing. Seeing so many sans serif fonts used in only so many
ways on the Web isn't exactly tiresome, but it certainly does lend a certain charm
to serif fonts when you seem them executed well in Web design.
That same page above also has links to a few other pages that use serif fonts well.
For your convenience, I'll link them here, too, and include my thoughts:
•
•
Twisted Intellect (http://twistedintellect.com/)
I like this page. It reads well, and it's a very elegant design. The
typography here is very nice.
The 3rd SEED Conference (http://seedconference.com/)
Whereas Twisted Intellect uses serif fonts, it doesn't use them for lots of
content. The 3rd SEED Conference does exactly the opposite: The entire
design is serif fonts; no images. It's just layout, placement, and
typography. This is executed beautifully, and I really like what's been
done here.
There are some other sites I've come across while just browsing leisurely that also
caught my eye with their use of serifs:
•
•
Jens Meiert: Why Reset Style Sheets are Bad
(http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/)
This is a good-looking, minimalistic blog that uses serif fonts to good
effect. And hey, the page even touches on an interesting topic.
Fun With Fonts (http://www.funwithfonts.com/G.html)
This is not only a cute short story about a robot; it's also a good use of
typography. The serif font here accomplishes its job very well.
The examples of good-looking pages above were all delightful to look at and to
read. As opposed to sans serif fonts, it seems that serif fonts do take a bit more
skill for a Web designer to wield effectively, but the payoffs can be quite
impressive.
Things to Keep in Mind
From what I can see, there are numerous advantages and disadvantages to using
a serif font.
Benefits of Using a Serif Font
•
•
•
•
Thanks to the vast majority of Websites using sans serif fonts, a serif font can
lend your page a refreshing, personal, warmer, and more visually attractive
appeal. Any or all of these effects can be accomplished with the right styling.
A page using serif fonts is different and can help you stand out.
Serif fonts tend to give a Web designer more to work with. Their shapes can
range from rigid and stoic to elegant and understated.
I think serif fonts benefit more from color and experimenting with color,
though this is just my personal opinion.
Things to Watch Out For When Designing With Serif Fonts
•
•
•
•
This is one of the biggest points against using a serif font, so pay close
attention: Serif fonts, especially when italicized, usually look terrible in
Windows! The ClearType preference must be turned on for the fonts to look
nice, and many Windows users do not know where to turn ClearType on or
even what it is.
Serif fonts lose readability at smaller font sizes. A medium-to-large font size
works best.
This Webpage provides an example of how serifs can break down at too small
a size and make the eye struggle:
http://www.webdesignref.com/examples/textex.htm.
Serif fonts tend not to have a business feel about them, so it's probably still
best to avoid them when designing a commercial site. They lend themselves
better to personal or informative content.
When you really look at the points against serif fonts, though, you can see that
generally they break down into two main problems: readability in Windows and
text size concerns. Both of these problems aren't as bad as you might think.
For one, Internet Explorer 7, while not the best browser around, uses its own
ClearType rendering, regardless of whether ClearType is turned on in a user's
Windows settings. Most Windows users still use Internet Explorer to browse, so
serifs for these users will seamlessly look as you, the designer, intend them. The
widespread use of Internet Explorer 7 alone significantly reduces the concern for
how serif fonts will look in Windows.
Secondly, if a user does use Firefox or another browser in Windows, your
concern for how your serifs will look can drop a bit more. It's safe to think that
most (or at least some) users who have another browser installed also have
enough knowledge of Windows preferences that they'll have ClearType turned
on, or at least know how to do so.
As far as text size is concerned, that's totally up to you. This leads to a third point
against serifs that is focused more on you than on technicality: Serifs are a bit
tougher to use in Web design than sans serifs.
That's not a terribly large issue, though, because it's one that you can get around
with your design. In fact, as is the case with the sites I've listed above, it may not
even be something to "get around," but instead an intentional tool to work with
in your design.
Keeping the "Design" in Web Design
I would like to see more modern Web designs using serif fonts for their content.
They look really nice when used well, and it's a scary thought to think that we
may be running into design clichés with the whole sans serif-for-content rule. The
Web is a great canvas, and I hope designers can continue to do great and
beautiful things with it, especially when those beautiful things step outside the
lines and manage to remain functional.
Simple CSS: Creating More Readable Text
by David Rodriguez — April 21, 2008
Typography is an important part of Web design. Just like in the print world, your
content needs to be readable for it to be of any use. As a general rule, you want to
make sure your Website provides as little resistance as possible to the user, and
the easier your site is to read, the better. CSS provides three very useful properties
to enhance the readability of your site: font, line-height, and letterspacing.
A Sample Page
Let's begin with a small sample Webpage.
This page uses a small, pretty standard design with some low-key colors to help
emphasize the content. This is a good use of design and color if your site fits in
the "content is king" category (and most sites do), especially if your content
consists of articles or other long blocks of text, like a blog.
The thing to notice here is that the text does its job: It communicates a message,
and the user can walk away having consumed your content. But the text is the
same across the whole page, with the exception of a color change in the small
subheading below the header text and the positioning of it. Here's the CSS used
in the sample page.
body {
text-align: center;
margin: 0;
padding: 0;
background-color: #363942;
color: #382513;
}
#container {
margin: 15px auto;
text-align: left;
background-color: #D8CAA8;
border: 1px solid #4B1E18;
padding: 0px;
width: 850px;
}
#header {
height: 80px;
border-bottom: 1px solid #284907;
margin-bottom: 15px;
padding: 15px;
}
#header h1 {
position: relative;
vertical-align: center;
color: #382513;
margin-bottom: -10px;
}
.subheading {
color: #284907;
}
#sidebar {
border-left: 1px solid #8FB65F;
margin: 0 0 15px 15px;
padding: 0px 15px 15px 15px;
float: right;
width: 175px;
}
#content {
padding: 0 15px;
}
#footer {
clear: both;
border-top: 1px solid #284907;
padding: 15px;
margin-top: 15px;
}
Choosing Your Fonts
To improve readability, we'll want to choose a font that looks good with the
colors you've chosen and at the size you plan on making your text. Typically, a
sans serif font is advisable for the main content, whereas headers benefit from the
added noticeability of serif fonts. If you come from a print background, this may
sound backward. Usually, in the print world, serifs are preferred for blocks of text
because the serifs help the eye distinguish each line. However, modern operating
systems have options to smooth the edges of screen fonts automatically, so nonserif fonts come out looking better as main content and serif fonts look good in
small doses.
With this in mind, I'm going to use one of my favorite lines when it comes to
CSS and fonts:
These fonts are some of the safest you can use in your design, so if cross-browser
compatibility is a concern for you, memorize them. They're good to use on their
own, or you can use them as a starting point for your non-serif text. In this case,
for simplicity's sake, I'm going to stick with just these three for the content. The
body section of the CSS now looks like this:
body {
text-align: center;
margin: 0;
padding: 0;
background-color: #363942;
color: #382513;
}
And with that small change, the overall readability of the page has changed
slightly for the better:
The slight change is good, but the entire font is still the same family, and this
creates a bad sort of uniformity. We want some distinction going on here, so let's
set our headings and subheading apart from the rest of the content. We'll ignore
the h1 at the very top for a bit, since we'll want to do something a little different
with that in a second.
For the subheading and the heading in the content, I'll be using a serif font. Just
like above, this next line is probably one of my favorites:
font-family: Georgia, "Times New Roman", Times, serif;
Again, these are some of the safest fonts you can use in Web design, even if it's
just for a starting point and you plan to expand your typography a bit later.
Reserve this line for headers and other places where it would look good in small
doses; the eye has a tougher time reading serif fonts on a screen than non-serif
fonts, so whole blocks of serif text can be jarring.
So now our subheading class looks like this:
.subheading {
color: #284907;
}
And we need to create a new rule for h2 tags in the content section. We do so like
this:
#content h2 {
}
All right, now the header information is more separated from the content, which
is good. Take a look here.
Now, what about that h1 header at the top of the page? We're going to make it
larger and give it less contrast to its background. This will ensure that users know
what site they're on without being distracted by the header.
We'll do this with the following code:
color: #6B5846;
font-size: 48px;
So now the full header h1 rule reads:
#header h1 {
position: relative;
color: #6B5846;
font-size: 48px;
}
Here’s what the modified header looks like:
Now we’ll turn our attention toward the sidebar and footer. The text in these
places is the same as the body text in main content area. The sidebar and footer
typically play secondary roles, so we'll give them smaller text and a different font
family with a single font rule:
font: 12px Verdana;
Now, our sidebar and footer divs have the following CSS:
#footer {
clear: both;
border-top: 1px solid #284907;
padding: 15px;
font: 12px Verdana;
margin-top: 15px;
}
#sidebar {
float: right;
width: 175px;
font: 12px Verdana;
color: #5A4735;
}
Right now, the content text feels a bit overwhelming. We'll reduce its size with
this:
font-size: 15px;
And we'll put it in the content rule, so now it reads:
#content {
padding: 0 15px;
font-size: 15px;
}
And now we have our fifth iteration of the CMRT page.
We've taken some good steps in making sure the different sections of our site
each have their own look and feel while still feeling unified. Now, we can take it
a step further with the line-height property.
line-height — Be Good to Your Visitors!
Your visitors are there to see whatever content you have up on your site. They've
come to see you, and they're your guests! Treat them well. You don't want to
strain their eyes when they view your page. Use line-height to make your
text more readable. Adding more line height to your text increases the amount of
space between each line, and it helps the eye make that jump as it moves down
your content.
We'll give the content div a line height of 160%, which basically gives it 60%
more line height than it normally has, based on font size. This is a decent amount
of line height and gives the text some room to breathe. For the sidebar, since the
text is smaller, we'll only give it a line height of 140%. So, now our content and
sidebar CSS are as follows:
#content {
padding: 0 15px;
font-size: 15px;
line-height: 160%;
}
#sidebar {
float: right;
width: 175px;
font: 12px Verdana;
line-height: 140%;
color: #5A4735;
}
And with this, the text takes on a much more pleasant look:
The eyes don't have to work as hard to read the text now, so it's easier for your
visitors to consume your content.
Adjusting Letter Spacing
There are only a couple of places where letter spacing comes into play with this
page, but it, too, can play a part in increasing your site's readability and helping
each element on the page seem more distinct. Headers and headings are usually
good candidates for letter spacing. From a design point of view, you can use letter
spacing on your header text to add some improved visuals to your page, like
we're going to do in the header div with this:
letter-spacing: 20px;
This increases the space between the letters of your text by 20 pixels. 20 pixels is a
big number for ordinary text, but for the header at the top of the page, which is
just four letters, it helps it stretch to be just about as wide as the subheading
beneath it, giving it more of a header feel.
For the headings in the content of the page (the h2 tags), we're going to increase
the letter spacing by just 2 pixels. This will lend the headings a more prominent
feel and separate them further from the text, and the adjustment is minor enough
that it will not distract from reading:
So our header's h1 CSS and our content's h2 CSS now look like this:
#header h1 {
position: relative;
color: #6B5846;
font-size: 48px;
}
#content h2 {
}
Here’s what it all looks like on the page:
Expanding on This CSS
There are a lot of different ways you can apply these properties, too. For the
design of the page, I purposely used a simple, rather unintuitive design so I could
focus on the text as it changed during the above steps, but applying this kind of
CSS to a much more vibrant and elegant design can drastically improve its effect
on your visitors. I don't intend to "pretty up" the CMRT sample page, and if I do,
it will be for a totally separate article, but if you'd like to take a crack at making it
look prettier while preserving the font and text adjustments, hit me up, and we'll
talk about it.
Everything You Wanted to Know About
Web Type But Were Afraid to Ask
By Joe Gillespie — July 1, 2004
We all get fed up seeing the same old fonts on Webpages, but is there anything
we can do about it?
It all comes down to the fact that some fonts come preinstalled by Windows and
Mac OS by default. Of course, it depends on which version of Windows and Mac
OS we are talking about, because font sets change over time, and there are still a
lot of legacy systems in use out there.
The font base also depends on what browsers and programs are also installed,
because Microsoft Internet Explorer and some applications install fonts that
won't be there if the reader doesn't have those programs.
Yes, there are a lot of ifs and maybes. The fact is that you can't assume that any
particular font is available for your Webpages other than a few general styles —
serif, sans serif, monospace, cursive, and fantasy.
Although some of these are pretty obvious, others are not, so I'll give you some
examples.
Serif
Times New Roman, Georgia, Palatino, Trebuchet MS
Sans Serif
Arial, Helvetica, Verdana, Geneva
Monospace (Typewriter Style)
Courier New, Lucida Console, Monaco, Andale Mono
Cursive (Scripts and Informal)
Comic Sans, Brush Script, Zapfino, Marker Felt
Fantasy (Far Out or Fanciful Designs)
It's really potluck with this one — in fact, there might not be one at all!
CSS And Fonts
Although many of us think in terms of Windows fonts and Mac fonts, there are
many other operating systems — Linux, UNIX, PalmOS, etc. — that might not
have even the common ones that first come to mind. That's why when we specify
the type for a Webpage in CSS it goes something like this:
font-family: <ideal>, <alternative>, <common>, <generic>
When you specify a font family like this, the browser will use the first font in the
list that is installed on the user's computer. The last font listed, the generic one in
the family list, is the catchall type style that will be used if none of the specified
fonts are available. If that is not there, you will just get the default font, whatever
that is. Don't worry; you will never be left high and dry with no font!
If you’re using serif fonts, the CSS would look something like this:
Here, Georgia is the ideal font, the one the designer prefers. (Yes, it's okay to
prefer a font!)
Times New Roman and Times are the Windows and Mac names for the most
common serif font. Serif is the generic type style. Note that when a font name is
constructed from several words, like "Times New Roman" or "Trebuchet MS," it
must be enclosed in quotes or it could be ignored.
For sans serif styles, the specification would be more like this:
font-family: Verdana, Arial, Helvetica, sans serif;
Again, Verdana is the first choice, Arial and Helvetica are common alternatives,
and sans serif is the generic style.
Safe Choices
Having established these principles, there is nothing to stop you putting whatever
fonts you like at the front of the list. Sure, they won't always be available, but if
your Webpages are targeted at a particular audience, the chances of them having
the desired font installed are better.
To help you decide what you can use, I've compiled some lists of fonts that are
installed by default on the various systems. Further down the page, I have links to
visual references of all these fonts so that you can see what they look like.
The following fonts are installed on both Windows XP and Mac OS X Panther
by default:
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Arial
Arial Italic
Arial Bold
Arial Bold Italic
Arial Black
Comic Sans MS
Comic Sans MS Bold
Courier New
Courier New Italic
Courier New Bold
Courier New Bold Italic
Georgia
Georgia Italic
Georgia Bold
Georgia Bold Italic
Times New Roman
Times New Roman Italic
Times New Roman Bold
Times New Roman Bold Italic
Trebuchet MS
Trebuchet MS Italic
Trebuchet MS Bold
Trebuchet MS Bold Italic
Verdana
Verdana Italic
Verdana Bold
Verdana Bold Italic
Webdings
MSIE Core Fonts
Microsoft Internet Explorer, with over 90% of the browser market, comes preinstalled on Windows and Mac OS 9.x, and most likely on OSX too. This means
there is a high probability that following additional core fonts will be available,
along with some italic/bold variants. You have to be careful here, because if you
specify bold or italic for a font that doesn't have such variants, you might not get
what you expect!
•
•
•
•
Andale Mono
Arial (regular, italic, bold, bold italic)
Arial Black
Comic Sans MS (regular, bold)
•
•
•
•
•
•
•
Courier New (regular, italic, bold, bold italic)
Georgia (regular, italic, bold, bold italic)
Impact
Times New Roman (regular, italic, bold, bold italic)
Trebuchet MS (regular, italic, bold, bold italic)
Verdana (regular, italic, bold, bold italic)
Webdings
The Best Fonts to Use
The vast majority of fonts are designed for printing at several hundred dots per
inch. That means that resolution is not an issue and that they can be as intricate
as the designer wishes.
As the Web became a viable medium for communication, some fonts were
introduced that were designed to work at the lower resolution imposed by
computer displays — typically a hundred pixels or less per inch. Screen fonts
have to be sympathetic to the square pixel grid of the screen. Subtle curves don't
work at all, and curved and diagonal lines work only work sometimes.
For Webpages, fonts designed for the screen give better results than ones
designed for print, but there's much less choice. Let's look at some.
Serif Fonts
Designed by Matthew Carter for Microsoft in 1996, Georgia was created to
provide optimal readability onscreen.
Since it’s designed specifically for screen display, Georgia is a better font choice
than the ubiquitous Times Roman, which was designed for newspaper use, so:
Georgia is the first choice. If it’s not available, Times New Roman will be used.
Times is the Mac (previous to OSX) name for Times New Roman, and serif is the
catchall for everything else.
This isn’t really considered a screen font, but Hermann Zapf's Palatino (designed
in 1948) works remarkably well for a print font.
Palatino is available on XP and on Macs that have Mac OS Classic installed, but
the name is slightly different. On Windows it's called Palatino Linotype, and on
Mac, just Palatino. On older versions of Windows, it is called Book Antiqua.
Even though it is a printer font, because of its squarish, pixel-friendly shape,
Palatino renders quite well onscreen — better than Times — so it make a useful
alternative serif font:
font-family: "Palatino Linotype", “Book Antiqua”,
Palatino, “Times New Roman”, Times, serif;
Sans Serif Fonts
Also designed by Matthew Carter (1994), Verdana always appears larger and
slightly more open than other fonts of the same pixel or point size. For sans serif
fonts, Verdana is also designed especially for screen display and should be used in
preference to Arial or Helvetica:
font-family: Verdana, Arial, Helvetica, sans serif;
If you are feeling adventurous, you can include a few other options:
font-family: "Franklin Gothic", Futura, Verdana, Arial,
Helvetica, sans serif;
Matthew Carter again.
Tahoma is similar in feel to Verdana, but where Verdana is open in character,
Tahoma is more condensed and tight. Think of it as Verdana Condensed,
although it's not exactly that.
Tahoma shares Verdana's large X height, so it will look bigger than most other
fonts of the same font-size. Use it when you want to get more words into a given
area without having to go down a size.
font-family: Tahoma, Arial, sans serif
Designer: Vincent Connare (1996)
Trebuchet is also designed for screen use. Whereas print fonts are usually
originally designed at a fairly large size, typically about six inches high,
Trebuchet was first designed as a bitmap at a smaller size. At small sizes, there
are fewer opportunities to make a typeface really unique, because you have to
forgo the subtleties. Nevertheless, Trebuchet manages to get a lot of character
into a very small space.
font-family: "Trebuchet MS", "Lucida Sans", Arial, sans
serif
Hermann Zapf (1958) designed this one.
There are fonts that fall somewhere in between serif and sans serif, but there isn't
a specific category for them. Optima and Albertus have very subtle curves that
end in vestigial serifs. Even at the relatively large size of this sample, the serifs are
just smudgy edges. Such fonts don't work at small sizes. I've included them here
purely to demonstrate that a good choice for a printed page can be a bad choice
for the Web.
font-family: Optima, Albertus, Verdana, Arial, sans
serif;
Monospace Fonts
There are many variations of this classic typewriter font originally designed for
IBM by Howard Kettler in 1955.
Occasionally, you will want to use a monospace font for citations or code
snippets. With monospace fonts, like those on typewriters, every character is the
same width, so they line up vertically as well as horizontally. If you want to try
your hand at ASCII art, you need the even spacing that monospace fonts provide.
Courier New is the most common monospace font but it is a bit light (when antialiased in its regular form, anyway) to use at smaller sizes. Alternatives are
Lucida Console (Windows), American Typewriter (OSX), and Monaco (Mac).
font-family: "Lucida Console", "American Typewriter",
"Courier New", Courier, monospace;
Cursive Fonts
Designer: Vincent Connare (1995).
Designer: Hermann Zapf (1998).
Cursive fonts range from informal handwriting fonts to fancy scripts. The most
common one is Comic Sans, which, as the name suggests, is like the handwriting
you see in cartoon speech bubbles.
Windows is a bit short of classy scripts, but have a look at Palatino Linotype
Italic and its bolder counterpart. They’re not strictly cursive, but give the required
result. On Mac OSX, there is a better selection of scripts — Apple Chancery,
Brush Script, Chalkboard, Cochin Italic, Marker Felt, Papyrus, and the very
extravagant Zapfino.
The problem with specifying cursive is that the feel of a free handwriting font and
that of a classy script are diametrically opposed. If you want to say “high class,”
and the reader sees Comic Sans, you could have problems! Be careful with this
one.
If you want to make sure that surfers see exactly the font you have used — to
conform with a corporate image for instance — you will have to rasterize the type
into a GIF or PNG file, or you could make it into a static .SWF (Flash™) setting,
provided you don't need a transparent background.
When you do use images of fonts, you should make sure that you provide an alt
attribute to the image tag so that the words appear in text form, too. This helps
with accessibility and searching.
Size Matters
Included with Mac OS X, Papyrus (Chris Costello, 1983) manages to be both
informal and classy, but needs to be large.
An Adobe font designed by Carol Twombly, this one really has to be a GIF or
PNG.
The fonts I've mentioned so far are for body text — general reading matter. When
you want a bit more punch for a headline or banner ad, you can use what
typographers call display or headline fonts. Display faces are intended to be used
in small amounts to give strength and contrast to a setting. Setting the body text
of a page in Impact or Futura Extra Bold Condensed would be very tiring to the
eyes.
For really "sock it to 'em" headlines, consider Arial Black, Impact, or Tahoma
Bold on Windows and Arial Black, Gill Sans Bold, Helvetica Neue Condensed
Black, Optima Extra Black, or Futura Extra Bold Condensed for Mac OSX.
As display faces are always used at larger sizes than body text, they can afford to
be a bit more elaborate and full of character. They can be very bold or very thin.
In fact, it's probably not a good idea to use regular weights. What you want is
something that contrasts with the body type, and the further away you get from
that normal weight, the better.
Very Small Fonts
If all your text is 14 pixels high or more, most fonts will look okay, but some
fonts work better than others at smaller sizes.
As I've already mentioned, for general text, it is better to choose fonts that have
been designed for screen display. Verdana and Georgia are good, Times and
Arial not so!
When you go down to really small sizes, as you do on menu bars and buttons,
even Verdana and Georgia have their limits. Anti-aliasing works great for larger
fonts, but at small sizes, the whole text becomes blurred and visually fragmented.
If anti-aliasing is turned off, the text will look jaggy and pixilated.
These are two of my own pixel fonts from the MiniFonts
(http://www.minifonts.com/index.html) range. For best results at small type
sizes, you should use fonts that are designed especially for that purpose. These
pixel fonts won't be installed on the user's machine, so you have to make them
into small GIF or PNG images, but if they are used sparingly and the images
saved at low bit depths, their byte size will be very small.
Pixel fonts do not use anti-aliasing, so they remain sharp and crisp at tiny sizes.
However, they are not scalable, so they can only be used at their optimal
designed size.
Minifonts
by Joe Gillespie — February 1, 2004
This is a set of free sample MiniFonts
(http://www.minifonts.com/samples.html) for Mac or Windows featured in the
February issue of How Magazine that you can download and try for yourself.
They are complete, usable fonts, not disabled in any way.
Specifying Small Type Sizes
by Joe Gillespie — March 1, 2003
There is a raging debate in Web design circles about the relative merits of
specifying font sizes in pixels or ems.
Using pixels locks the size of type in sync with physical pixels on the device
displaying it, whereas using ems sets the type sizes relative to those set up in the
reader's browser preferences.
As long as the pixels are about the same size from one display device to another,
using pixels gives fairly predictable results. Problems occur when the pixel size
varies significantly from the norm — or if the reader's monitor or eyesight is not
as good as the designer's. For instance, even at 9 pixels, Arial looses its kerning
and becomes hard to read. It is, after all, a printer font and not optimized for
screen use. Times was designed for small print in newspapers but is a total
disaster at small sizes on the screen.
If you have a 17" monitor running at 1280 x 1024, and the width of the screen is
13 inches, then the size of the individual pixels can be calculated by dividing the
13 inches by 1280. However, it's probably easier to consider the pixel density,
which is 1280 divided by 13 — approximately 98 pixels per inch. If the monitor is
running at 1024 x 768, then the pixel density is 1024/13 — approximately 79
pixels per inch. The difference in perceived size from one monitor resolution to
the other means that 10px type looks like 8px type at the higher resolution.
Some recent browsers can resize type sizes specified in pixels —
Mozilla/Netscape 7, Opera, and Safari all do a reasonable job — but some can't,
and leave little option but to change the monitor resolution if the type is too
small. Poor old Explorer 6.x refuses to resize type specified in pixels — so that
means most!
Specifying type in ems is safer when the audience is using a large variety of
monitor sizes and less capable browsers. Think of 1 em as being 100% of the
user's preferred type size, 0.8 em as 80% and 1.3 em as 130%.
Now, that's all fine, but there's another factor that many designers forget about.
As a designer of small fonts, I'm aware that there is a minimum size at which
type can be formed from pixels and below which it becomes a meaningless blob.
This critical threshold size is based upon the need for 5 pixels in height to
properly form a lowercase a or e, and if you add h and g, you need at least two
pixels for the ascender and two pixels for the descender. So a font size of 9 pixels
is the minimum you can get away with for an upper- and lowercase font with a
good screen font.
If a designer specifies a small font size like, say, .6 em, and that resolves to less
than 9 pixels in a reader's browser, then the type will be totally unreadable. Even
changing the resolution or using a magnifying glass won't help.
The moral is, if you do prefer to use ems to specify your type sizes, when you
want small type and get below about 0.8 ems, switch to pixels to be sure that your
type doesn't go below the critical 9px threshold.
CoffeeCup Software Web Typography Handbook
Copyright © CoffeeCup Software, Inc.
All rights reserved. No part of this handbook shall be reproduced, stored in a
retrieval system, or transmitted by any means, electronic, mechanical,
photocopying, recording, or otherwise, without written permission from the
publisher, except for the inclusion of brief quotations in a review. No patent
liability is assumed with respect to the use of the information contained herein.
Although every precaution has been taken in the preparation of this handbook,
the publisher and author assume no responsibility for errors or omissions. Nor is
any liability assumed for damages resulting form the use of the information
contained herein.
Trademarks
Trademarked names may appear in this handbook. Rather than using a
trademark symbol with every occurrence of a trademarked name, we use the
names only in an editorial fashion and to the benefit of the trademark owner,
with no intention of infringement of the trademark. All terms mentioned in this
book that are known to be trademarks or service marks have been appropriately
capitalized. The Publisher and Author cannot attest to the accuracy of this
information. Use of a term in this handbook should not be regarded as affecting
the validity of any trademark or service mark.
Warning and Disclaimer
Every effort has been made to make this handbook as complete and accurate as
possible, but no warrantee or fitness is implied. The information is on an “as is’
basis. The authors and the publisher shall have neither liability nor responsibility
to any person or entity with respect to any loss or damages arising from the
information contained in this handbook.
Published By
CoffeeCup Software, Inc.
165 Courtland St.
Suite A, Box 312
Atlanta, GA 30303
Tel: +1 (678) 495-3480
Fax: +1 (678) 495-3481
Web: http://www.coffeecup.com

CoffeeCup Software Web Typography Handbook

Transcription

Similar documents

your handy guide to - Beacon Media + Marketing

Quick Start Guide

Typography - Samantha Warren

2014 Program Guide Spec Sheet

view flyer - AppleUsers.org

Max Lucado Sheila Walsh Lisa Harper And Musical Guest

Hatch User Guide

FONT STYLE

Website Layout Homework

10 MS fonts list - Technology in the Mearns