COMMON ISSUES/QUESTIONS• Why can’t we use this font? XYZ website seems to be using it and it looks ﬁne 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 ﬁrst loads a diﬀerent font, and then aMer a couple of seconds, it shows ﬁne. 2
FIRST THINGS FIRST No fonts will look same throughout diﬀerent 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 diﬀerent than the new Windows 7 and Mac renders font diﬀerently. There is no right 2 way or the wrong way, they are just diﬀerent 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
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 ﬁle No maWer what anyone uses, PHP, ASP, Java, [Cascading Style Sheets or Ruby on Rails, PERL, Wordpress, Joomla, stylesheets] to the HTML Siteﬁnity, 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 diﬀerence is on the ways the diﬀerent systems generate code …another topic we can discuss a diﬀerent 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 ﬁrst speciﬁed font on the font‐ stack. It will only move on to the next font if the speciﬁed font is unavailable in the system. We usually end our stacks with serif or sans‐serif, so if the computer is unable ﬁnd any speciﬁed font, it will load the default serif/sans‐serif font in the operaTng system.COMMON FONT STACKS TAKING IT ONE STEP FURTHERThat 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 Oﬃce. MicrosoM Oﬃce 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.
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
$ 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