Posts

fun illustration for memorial day

Happy Memorial Day!

My favorite canine hits the road, and more…apparently.

This illustration was done in Illustrator, with the canine photo masked in Photoshop and then dropped into the composition.

Typeface for whimsical title was FontDiner’s Loungy. They’re a type foundry that specializes in retro fonts. (Loungy is listed under Free Silverware)

Split Types: Avoiding Painful Breakups

Sigh. . . it’s always unfortunate when partners break up. We were saddened to hear about the Hoeffler Frere-Jones split. At this point, it looks like the case will grind through State of New York courts for some time to come.

Read more

Webfonts Banish Bland Typography

The era of bland website typography is rapidly fading with the advent of webfonts — typefaces specifically designed (or redesigned) to be crisp and clear on screen. The use of webfonts allows a designer to use fonts that are not installed on the viewer’s computer.

How to use: most webfont repositories allow the web developer to use fonts from their library by including a link to the font inside the head tag of the web document. Then the font family will need to be named in a cascading stylesheet (CSS) linked to that web document. One example of a link included in the <head> of your document looks like this:

<head>
<link href=’http://fonts.googleapis.com/css?family=Open+Sans|Oswald:400,700′ rel=’stylesheet’ type=’text/css’>
</head>

Simply include the font name in your CSS just as you would with any system font. Here’s an example:

h1 { font-family: ‘Oswald’, Helvetica, Arial, sans-serif; font-weight: 700; }

The above style names the webfont inside single quote marks, followed by a list of alternates for viewers with really old browsers that do not support webfont use. A CSS style can be placed in the head of the document, or linked to the document. Find out more about using CSS here: w3.org

What’s the big deal?

There are important benefits to using webfonts:

Brand Consistency


Use the same typefaces on and offline so your brand looks the same everywhere; brochures, business stationary, website, or mobile apps

Search Optimization


Unlike a typographic image, a webfont uses “live” text that is searchable, and translatable

User Engagement


Webfonts enhance the your site’s visual appearance and the ability to translate text enhances its usability

Site Performance


The use of webfonts eliminates the need to an image for each instance of styled text, resulting in less bandwidth use

Sources for web fonts:

http://html.adobe.com/edge/webfonts/
http://fontdeck.com/
http://www.fonts.com/web-fonts
http://www.fontsquirrel.com/
https://www.google.com/fonts
https://www.myfonts.com/
https://www.theleagueofmoveabletype.com/
https://www.typekit.com/
http://www.typography.com/cloud/welcome/
http://www.webink.com/
http://www.webtype.com/

Please note that some of these resources require a subscription, however, a free account may be available for low-volume use.

And here’s a resource to preview how your site would look with various web fonts: http://webtypetest.com/ and choose a font for various text elements, such as headlines <h1>, paragraphs <p>, emphasized text <em>, and links <a>.