![In
the
Browser.
This
is
the
standard
rendering
of
the
markup
code
in
Firefox
4[Mac].](https://image.slidesharecdn.com/fonts-keynote-110613112409-phpapp01/85/WEB-and-FONTS-9-320.jpg)
![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.]](https://image.slidesharecdn.com/fonts-keynote-110613112409-phpapp01/85/WEB-and-FONTS-10-320.jpg)
WEB and FONTS
- 1. web & fonts
- 2. 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
- 3. 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
- 4. Web Design/Development is very different than PRINT. 3 They are two enTrely different 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.
- 5. That will NEVER EVER happen over 3 the web, unless, all websites or pages are images :) Fonts on Windows XP Fonts on Mac OS
- 6. 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
- 7. 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
- 8. 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.
- 10. 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.]
- 11. 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 files 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.
- 12. 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
- 13. 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
- 14. ? 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.
- 15. 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
- 16. T FONT HOSTING/REPLACEMENT SERVICES
- 17. Q What service should we use ? • How important is font selection? Are there specific 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://fffo.grahambird.co.uk/ shows comparison of the most widely used font‐services.
- 18. ‐ 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 specific font
- 19. + 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
- 20. ‐ 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.
- 21. $ 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.stuffandnonsense.co.uk/content/demo/2009/07/28/typotheque.html