Information Technology Reference
In-Depth Information
Now, if you take a look at Listing 8-3, you can see how we are optimizing the size of the
font by only loading the letters we need to make up the words "Hello World." This is
perfect if you need to load a font into your site that is only going to be used once, such
as for the logo, and that will only use a few letters.
Listing 8-3. Loading an optimized version of the Chivo font that only loads the letters we need from the font
<link href=' http://fonts.googleapis.com/css?family=Chivo&text=Hello%20World'
rel='stylesheet' type='text/css'>
On top of allowing you to optimize your fonts, Google continues to add new fonts to the
Google Web Font directory on a regular basis. It is hands down one of my favorite
places to browse when I'm bored because you never know when you are going to find
that one magical font that inspires you to sit down and start coding something new.
Font Issues to Consider
Just as in using photographs, there are a few caveats to using different fonts and text
styling that one will want to consider and plan for:
What do different styles mean? We noted previously that we could
specify stylistic changes to a font, such as making text italic or bold, or
even using different variants of a font, such as one that uses block
lettering. While these variants provide a great amount of flexibility, they
can also confuse the user if not applied consistently. You should consider
if you want block text to refer to actions (e.g., the PLAY button of a video
or audio clip) or if you'd rather have that be in italics (although italics can
be hard to read on a mobile screen if the text isn't large enough).
However, if the actions are in italics, how should captions below photos
be displayed? Bold might seem too strong there, or might imply that the
text is a link. See how this can become a bit complex? Creating an
informal 'style guide' for your app can work wonders toward producing a
consistent and beautiful output and effective use of fonts.
Is the style worth the fluency trade off? Researchers in cognitive
psychology—or the psychology of how the brain interprets information—
use the term 'fluency' to refer to the ease of processing information. A
font with just enough weight to keep its lines separate, as well as one
devoid of serifs, is highly fluent, meaning that readers can easily parse it
quickly and understand what you're saying. On the other hand, a wavy
script font of 'elegant' handwriting or a very boxy block font (Where letters
begin to run into one another) is very disfluent. This means that users will
take longer to read those sections. In some cases, this is a good thing—
we might want to draw attention to a certain part of the app and make
sure users spend an adequate amount of time considering it (e.g., the
notification that all data is about to be erased might be a good candidate
for block lettering, assuming it's not so disfluent as to cause people to
bypass it out of frustration!). However, in other cases, we might want to
focus on speed over style.
 
Search WWH ::




Custom Search