Not long back I can remember few options when it came to web typography. The options included the serif font-family, sans-serif font-family, the mono-spaced font-family, and cursive font-family. All total there were a little over 30 web-safe font options. I noted web-safe since the fonts used on a web page would have needed to be installed on the visitor’s computer to render, which was different from PC to MAC, and per one’s own font library.
With the advancement in CSS properties this limited listing of web-safe fonts presentability improved some by way of the styling options which included the font-style (normal, italic, oblique), font-variant (normal, small-caps), font-weight (normal, bold, bolder, lighter, 100-900), font-size, color, text-transform (capitalize, uppercase, lowercase, transform), line-height, and letter-spacing. When used effectively these CSS styling options can help transform one’s text from utilitarian to engaging.
That being said, many designers have been frustrated with the inherent styling limitations for web use waiting for the day when web fonts options equaled the diversity available in print design. Initially many would create graphical text for navigation buttons, headers, call-out banners, etc, (still used for most logos), which we know now is not good from an SEO standpoint. Creating text in Flash was also a popular option, … another SEO failure.
A couple of years back Cufon fonts became popular. Cufon fonts use the CSS @font-face rule to replace the default text with the chosen Cufon font. In essence a JavaScript file converts the font into a vector form which is then translated to VML (vector markup language) which defines the font’s shape. The concern with Cufon fonts is that they don’t always render visually the same on every browser, JavaScript is required, and the internet browser used needs to support the JavaScript used. I note this since about a year ago the Cufon fonts stopped working on IE. In case you have used Cufon fonts and wasn’t sure of the issue, good news … the JavaScript file was updated and you just replace the cufon-yui.js file with the most recent one. This update works for static and CMS sites alike. You can download it at: https://www.2shared.com/document/O0Ku4S3n/cufon-yui.html
An example of a Cufon-font in use:
<script type=”text/javascript” src=”js/Droid_Sans.font.js”></script>
Okay, so this brings me to the most recent Font option. The current web standard is to use embed Web Fonts. Web Fonts are linked to, and if you do a bit of searching you will find that there are many web font options currently available. Adobe offers web fonts, as does Google, and many others. One advantage of web fonts over Cufon fonts is the concern over usability. Since not everyone will have the latest browser, or JavaScript turned on for security reasons, the web designer needs to ensure that the text provided is the most universally accepted option while still meeting their artistic goals of presentation. The innovative use of typography can help web developers convey an emotional impression as well as highlight specific areas of a site by using variations in font, colors, placement, and size.
Font Embedding is another option often seen in use. In this case the font is self hosted (called to from a folder in your website or server) and then linked to using the @font-face CSS.
An example of a hosted web-font in use:
<link rel=”stylesheet” type=”text/css” href=”https://fonts.googleapis.com/css?family=Tangerine”>
The font is applied by a simple CSS declaration:
body {
font-family: ‘Tangerine’, serif;
font-size: 48px;
text-shadow: 4px 4px 4px #aaa;
}
Popular Web Font Options
Google Web Fonts
https://www.google.com/webfonts
There are many web font options (most hosted) and the majority of web designer’s I have worked with use Google for their Web Fonts. Google’s free service makes is possible for developers to customize their open source fonts, and users have the ability to browse font families and add their favorites into their own Collection. This allows Google users to quickly select a favorite font for web use, refine their collection over time, and view their favorite styles in a sample layout.
Adobe Web Fonts
https://html.adobe.com/edge/webfonts/
Adobe’s “Edge Web Fonts” gives one free access to a vast web font library made possible by contributions from Adobe, Google, and designers around the world. The fonts are served by Typekit, so you can be sure of high performance and stability.
Typekit
https://typekit.com/
The typekit web fonts platform is a “subscription-based” starting at $24.99/yr. Typekit gives users the ability to preview fonts on numerous browsers and operating systems which is effective since types do vary in look based upon browser and platform. Typekit has more than 250,000 customers, including The New York Times and Twitter.
Fontdeck
https://fontdeck.com/
Fontdeck offers a catalog with thousands of fonts that are enhanced for on-screen use. Pricing is typically $7.50 a year for each font, priced individually per website, and you only pay for fonts that are live.
Webtype
https://www.webtype.com/
Webtype offers high-quality, Web-optimized fonts. The service ensures that all typefaces are automatically upgraded and display correctly on every browser. Though pricing is not noted on their website (I hate that) Webtype plans start at $40 per year for sites with less than 250,000 page views.
Fontspring
https://www.fontspring.com/
Fontspring differs from most web fonts providers in that they offer downloadable fonts for self-hosting. Users purchase a font type which they can use on as many projects as desired with no annual fee. This service also offers app fonts, which can be used within mobile applications.
Learn something new? Why not take a moment and like us on Facebook 🙂
https://www.facebook.com/pages/E-Curtis-Designs/112211662171761
