• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WEB and FONTS
 

WEB and FONTS

on

  • 961 views

Internal Presentation to discuss web and fonts

Internal Presentation to discuss web and fonts

Statistics

Views

Total Views
961
Views on SlideShare
961
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

WEB and FONTS WEB and FONTS Presentation Transcript

  • web &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
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.
  • 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
website1 Content/Markup HTML/xHTML/HTML52 Style CSS
2.1/CSS
33 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
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.
  • 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
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
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 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.
  • ‐ 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
  • + 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.stuffandnonsense.co.uk/content/demo/2009/07/28/typotheque.html