WEB and FONTS

COMMON ISSUES/QUESTIONS
• Why can’t we use this font? XYZ website seems to be using it and it looks fine on 
there.
• Can we not make it an image?
• Why do the fonts look all wonky?
• In my browser, the font looks weird.
• In my browser, i get Arial instead !
• It first loads a different font, and then aMer a couple of seconds, it shows fine.

2

FIRST THINGS FIRST
No fonts will look same throughout different OperaTng 
systems or even browsers. Many factors like screen 

1 resoluTon, screen size will impact the legibility of a font, 
which we might need to educate the client about in many 
instances.

Windows XP renders font completely different than the new 
Windows 7 and Mac renders font differently. There is no right 

2 way or the wrong way, they are just different ways. Also 
another thing to consider is XP is preWy old, and was released 
in 2001. 

That’s over 10 years old, and there are many features today 
that the old windows system cannot support.

hWp://damieng.com/blog/2007/06/13/font‐rendering‐philosophies‐of‐windows‐and‐mac‐os‐x

Web Design/Development is very diﬀerent than PRINT.

3 They are two enTrely diﬀerent medium. 

When prinTng, you know for sure that the PMS color you choose is going to 
be exactly the same shade no maWer which printer you use, and that the 
font you choose will print exactly like it does on your composiTon.

That will NEVER EVER happen over 

3 the web, unless, all websites or 
pages are images :)

Fonts on Windows XP Fonts on Mac OS

THE BEST WAY TO GO ABOUT 
FONTS
Use Web Safe Fonts in all Web projects to start with. Even for campaign 
1 presentaTon, Specially for Campaign Presenta4on. 

This gives us more room for enhancing the site on later stages, once the site has 
2 been developed. Depending upon the clients need, appe4te for web trends and 
technology, the impact of the fonts on their website and their willingness to pay 
an addi4onal fee for web font services, we can enhance their sites with Tasty 
fonts at a later stage.

Our primary goal always has to be to create sites that look good and func4on 
without special fonts.

If you don’t know what fonts are available in which plaform or the issues with font‐
rendering, this is a good resource.

hWp://www.ampsoM.net/webdesign‐l/WindowsMacFonts.html

WEB DEVELOPMENT
in 5 minutes
3 main parts to a website

1 Content/Markup
HTML/xHTML/HTML5

2 Style
CSS 2.1/CSS 3

3 Behavior TOPIC FOR A DIFFERENT DAY
JavaScript/ Flash

1 The Markup = HTML
<p> = Paragraph
<h1>= Heading 1
<ul> = unordered list
<ol> = ordered list
<li> = list element
<head>
<body>

New tags in HTML 5:
<header>
<section>
<article>
<aside>
<footer>

HTML elements form the building blocks of all websites. It provides a 
means to create structured documents by denoTng structural 
semanTcs for text such as headings, paragraphs, lists, links, quotes 
and other items.

In the Browser.

This is the standard rendering of the markup code in Firefox 4[Mac].

1 HTML is the most important element of the 
enTre Internet. 
2 Style
We aWach/embed a CSS file 
No maWer what anyone uses, PHP, ASP, Java, 
[Cascading Style Sheets or 
Ruby on Rails, PERL, Wordpress, Joomla, 
stylesheets] to the HTML 
Sitefinity, Drupal... or whatever else…it doesn’t 
document.
really maWer in this case because at the end, the 
main thing that we end up seeing on SCREEN is 
the HTML markup.  CSS is a style sheet language 
used to describe the 
For example it really doesn’t maWer to the end  presentaTon semanTcs (the 
user reading your brochure if it was created in  look and formapng) of a 
InDesign or Quark or even Word … because  document wriWen in a markup 
whatever programs you use to create it in the is  language.
your choice, your preference or what you’re 
more familiar with. This is very similar to the 
InDesign Styles, just like you 
No maWer what backend programming system  have character, paragraph, cell, 
anyone is using, all will generate HTML code at  table etc styles, we have to use 
the end.  similar styles but for each and 
every element of all pages.

[The difference is on the ways the different systems generate 
code …another topic we can discuss a different Tme.]

2 CSS + The Font Stack
Content apart, all styles are controlled via stylesheets, 
like color, font, background images, size, padding, 
margin, leading, border, hover states etc… You can 
research more about CSS ﬁles in the wikipedia.

   FONT STACKS
Every computer comes loaded with a set of fonts. Its not 
necessary that all computers have Arial, or Times New 
Roman but they’re usually pre‐installed because of their 
wide usage and their legibility.

2 FONT STACKS
font‐family: ‘HumanistBT’, HelveTca, Arial, sans‐serif;

This is how we specify fonts for a parTcular HTML element. The browser will look for the first specified font on the font‐
stack. It will only move on to the next font if the specified font is unavailable in the system. We usually end our stacks 
with serif or sans‐serif, so if the computer is unable find any specified font, it will load the default serif/sans‐serif font in 
the operaTng system.

COMMON FONT STACKS TAKING IT ONE STEP FURTHER
That is why fonts like Arial, Verdana, Tahoma,  The majority of the end‐user are either on a Windows PC or a Mac OS 
Courier, Georgia, Times New Roman, Times X System and Most people that are on Windows usually have a copy 
etc are used across the internet. Its because of  of MicrosoM Office. MicrosoM Office comes with a bunch of good 
the availability across muTple plaforms/ fonts and we can leverage that to create beWer font stacks like:
operaTng systems.

font‐family: baskerville,'pala4no linotype','4mes new roman',serif;

CLEVER FONT STACKS font‐family: cochin,baskerville,'pala4no linotype',georgia,serif;

Depending upon the client, font stacks can  font‐family: Baskerville,Georgia,Cambria,Times,Times New Roman,serif;
be changed a liWle.
For example instead of  
font‐family: Arial, Verdana, sans‐serif;

We usually do 
font‐family: ‘Helve4ca’, Arial, Verdana, sans‐serif; hWp://www.awayback.com/revised‐font‐stack/
hWp://www.codestyle.org/css/font‐family/sampler‐CombinedResults.shtml

2 FONT STACKS

Even Arial is not at a 100% for all computer systems, 
USING FONTS because people will be using all sorts of computers, macs, 
pcs, linux pcs and more.. 
There is no font that is 100% available on all computer 
systems. And we have no control over what fonts are installed 
on a computer either. If you look at the charts here, it gives 
us an overview of the fonts that are available the across each 
plaforms. 

The most commonly used Arial, Verdana, Times and Georgia, 
all are more available on more plaforms than other.
hWp://www.awayback.com/revised‐font‐stack/
hWp://www.codestyle.org/css/font‐family/sampler‐CombinedResults.shtml

? WHY USE A WEB FONT ?

"Right and wrong do not exist in graphic design. There is
only effective and non-effective communication."
— Peter Bilak - Illegibility

Because using the right font
at the right time and
the right medium
can be very
effective.

T OLD FONT REPLACEMENT TECHNIQUES

siFR – Scalable Inman Flash Replacement
SIFR uses a flash object to render to the font face, and then JavaScript to idenTfy the DOM{Document object Model} and 
replace the text as specified.

Slightly slower load Tmes
Requires both JavaScript and Flash to be enabled
hWp://www.mikeindustries.com/blog/files/sifr/2.0/

FLIR – Facelid Image Replacement
Using PHP (and the GD library) FLIR renders text into a font of your choice by reading the text in a DOM and sending a 
request to the server with that string and returning an image of that text rendered in the new font. 
= COMPLICATED and not pracTcal for all situaTons + Text is unselectable

hWp://faceliM.mawhorter.net/preview/

Cuƒon
Cufon uses the browser to draw vector objects using VML (Vector Markup Language) for Internet Explorer and the HTML 5 
Canvas element for the more advanced browsers

Violates EULA and copyrights due to fonts being embedded. Not many fonts are permiWed to be rendered with this method, 
Text cannot be selected, You can’t apply a hover state to converted text

A lawyer confirmed that Cuƒon is not a legal solu4on for font‐embedding on ANY website, but that unless you’re 
developing a large profile commercial site, you should be safe to use it freely.

Examples – Hunter Buildings, Smart Plumbing

T FONT HOSTING/REPLACEMENT SERVICES

Q What service should we use ?
• How important is font selection? Are
there speciﬁc fonts you need?
There is no right or wrong • How important is font quality to you
service. All of them are and your clients on the website?
different and depends • Do you or your client have a
upon the needs. Things to budget?
consider before using a • What type of fee structure would be
font service may be: ideal?
• Is iPhone and iPad (Mobile Safari)
support important?

hWp://ﬀfo.grahambird.co.uk/
shows comparison of the most widely used font‐services.

‐ Drawbacks of using web fonts

FOUT - Flash OF Unstyled Text

Fonts looking weird across multiple browsers,
weak platform integrations

Loading Time based upon the service used

Price

Availability of a speciﬁc font

+ Advantages of 

+ Strong Platform integrations, compliant and good performance

+ Biggest Web Font Library with the best browsing interface

+ Easy to implement and modify code wise

+ Advanced control over font, good and robust support for fallback and
multiple weights and styles.

+ Ability to test your typeface in multiple browsers and operating systems before
you choose on one
+ Easy to change fonts from the web interface

+ Popular in the the designer/development community and the most widely
used font service by far.

+ Competitive pricing and good Content Delivery Network via network of
servers

‐ Drawbacks of using Typekit

‐ Fonts are not available for desktop use.

‐ FOUT - Flash of Unstyled Text only on Firefox.
On all other browsers, text doesn’t show until fully
rendered, and the load times are fast.

Since Typekit’s fonts are loaded via JavaScript, it offers tools to control the
loading process, so delays are not as noticeable to the user.

‐ Renting versus “owning” the font.

$ Typekit Pricing

General Reading for Designers
+ hWp://www.adobe.com/designcenter/dialogbox/stylevsdesign/

Links
+ hWp://www.typekit.com
+ hWp://www.smashingmagazine.com/2010/10/20/review‐of‐popular‐web‐font‐embedding‐services/
+ hWp://www.stuﬀandnonsense.co.uk/content/demo/2009/07/28/typotheque.html

WEB and FONTS

Recommended

Recommended

More Related Content

Similar to WEB and FONTS

Similar to WEB and FONTS (20)

Recently uploaded

Recently uploaded (20)

WEB and FONTS

Editor's Notes