'Net Features : fonts

Font Inspector in Firefox DevTools

Pete Prestipino — Thu, 14 Mar 2013 18:55:00 GMT

The role that typography plays in the success of a Web design (and of course to the user experience) is indisputable – if I never, ever see Comic Sans again it will be too soon. Website Magazine has covered a few different tools over the years to help designers identify fonts they may be interested in using, most recently Fount, but there’s always room for one more, right?

Mozilla has included a new font-related tool called the Font Inspector (see image below) to its Firefox Dev Tools. While currently only available in the browser’s nightly build (meaning it’s only in the pre-beta stages now), it does indicate that the popular open-source browser maker’s developers are certainly tuned in to the challenges of modern Web design.

The tool essentially enables designers to see what Web fonts and font-based icons are being used in a page (including the font name and font family, its location, a preview and the @font-face code) – providing yet another opportunity to see different approaches to typography in action.

Related Information on Fonts in Web Design:
- Typekit of Google Web Fonts?
- Textillate Brings Back Text Animation
- Tyopgraphy App Eases Design Process

Fount: Find Fonts You Love

Pete Prestipino — Thu, 21 Feb 2013 13:45:00 GMT

What happens when you come across a font online you’d like to use within your website? Look in the source code? That’s so… archaic. Don't worry, there’s a better way!

Web designers (perhaps even those that are involved with a new site or redesign) should check out Fount, a very handy bookmarklet that provides the ability to identify any Web font in a font stack (e.g. Google Web Fonts or Typekit) that is used on a web page. Fount provides a good amount of information, indicating the font size, weight, and style (bold, italicized, etc.), and works in Safari, Chrome, Firefox, and IE8+.

Users simply click the Fount bookmarklet in their browser toolbar menu, highlight the text using the font, and click again to see the details. Below is a sample one of the fonts we use here on WebsiteMagazine.com.

Related Items at Website Magazine:

- Typography App Eases Design Process
- jQuery Plugins for Increasing Interaction
- Five Fantastic Web Font Services
- 15 Fresh & Free Fonts

Source Sans Pro – Adobe Open Source Type

Pete Prestipino — Mon, 06 Aug 2012 18:25:00 GMT

Adobe has released a new (and free) open source type family by the name of Source Sans Pro.

The Source Sans Pro font, the first ‘open’ font from Adobe, includes six weights (from ExtraLight to Black) in upright and italic styles. The font (seen below) also offers broad language support for Latin script, including Western and Easter European languages, Vietnamese, pinyin Romanization of Chinese and Navajo. The fonts also support both the Indian rupee and the Turkish lira currency symbols.

”The primary need for type in Adobe’s open source applications has thus far been for usage within user interfaces,” said Adobe typeface designer and font developer Paul Hunt. “A second environment of perennial interest to Adobe is the realm of text typography. Thus the immediate constraints on the design were to create a set of fonts that would be both legible in short UI labels, as well as being comfortable to read in longer passages of text on screen and in print.”

The full package of source files are available to download through SourceForge. The Source Sans Pro font is also available for use on the web via font hosting services such as Typekit, WebInk, and Google Web Fonts (as well as for use directly in Google documents and Google presentations shortly).

"I believe that the world of type design and typography has benefited greatly from Adobe’s contributions in the arena of type technology," wrote Hunt, the designer of Source Sans Pro, on the company's Typblography page. "In adding to this legacy, I am proud to announce that today marks another milestone as Adobe makes yet another type resource freely available by releasing the Source Sans Pro family as our first-ever open source type family."

Adobe also released an Adobe Original typeface (not open source) by the name of Leander Script (available on Typekit and WEbINK), along with adding five more fonts to the Adobe Web Fonts collection in Cottonwood Std, Ironwood Std, Juniper Std, Mesqire Std and Ponderosa Std.

Web Font Fun with Javascript Plugins

Administrator — Thu, 28 Jun 2012 19:30:00 GMT

When I first started working on the Web in a professional capacity, there really wasn’t much you could do to dress up your website as it related to font choice.

Web designers had little control over fonts in the past, but that has changed dramatically over the past two years as the pace around jQuery development accelerates and responsive design becomes the norm (or at least more normal).

While it’s possible to manipulate text using CSS, that method still has its limitations. As a result, many turn to Javascript to solve the inherent problems - and the results are often worth a look.

Below you’ll find several javascript plugins that can help you, the designer/developer, modify text through kerning, introducing a responsive nature and even tossing aside all convention with some quite dramatic effects.

SlabText: This Javascript plugin splits headlines into rows before resizing each to fill available horizontal space.

FitText: The plugin renders font-sizes flexible, making it ideal for use in fluid or responsive layouts to achieve scalable headlines.

LetteringJS: For those willing to make a more daring design choices, LetteringJS fits the bill.

jqsloText: This plugin is another for those willing to make some edgy design choices, as it renders an arching effect (gets bigger as you approach the middle and then tapers off) on HTML text.

jQuery Glow: The plugin provides the ability to add a glow effect to text when hovered over.

BigText: This plugin automatically sizes text to fit inside a parent element, resulting in perfectly justified alignment.

Typekit Now Available for Adobe ID Users

Michael Garrity — Mon, 09 Apr 2012 17:30:00 GMT

Popular font provider Typekit, purchased by Adobe back in October, has received an update that allows webmasters and designers to access its non-standard fonts using an Adobe ID.

Now, current Adobe ID holders are able to sign in to Typekit with their previously registered username and password. It also encourages others to take the time to sign up for an Adobe ID, making it possible for them to take advantage of Adobe’s Creative Cloud service launching in the next few months.

This also means that Typekit users can utilize Adobe ID support, which has been reflected in a recent update of the Typekit terms of use that have moved to the standard Adobe privacy policy, bringing it in line with Adobe’s traditional practices and opening the door for new features in the future.

Those old-school Typekit users who want to carry on using their current Typekit logins will be allowed to do so, although the terms of use changes will still apply.

In addition to updating the privacy policy, Adobe has disabled the use of third-party Web analytics within kits, which had been used to gather data about the “browser landscape,” as well as traffic across the various kits. Third-party analytics tools have been removed from all of the kits published after September 12 of last year.

Typekit has also announced that all night weights (and corresponding italics) of Darden Studio’s Jubilat font are now available in its library.

Compressed Web Fonts from Google

Pete Prestipino — Wed, 11 Jan 2012 16:30:00 GMT

Google’s affinity for all things speedy is no secret. That is why it should come as no surprise that it has made yet another foray into making the Web even faster - at least as it relates to fonts.

On its official Code blog, Google announced this week a new way to make web fonts smaller (and faster) through collaboration with the Monotype Imaging Fonts.com Web Fonts team.

Google Web fonts now implements Monotype Imaging’s MicroType Express compression format. Using gzip alone, the format should yield approximately 15 percent savings in file size.

Designers won’t need to update their integrations as Google is upgrading the CSS snippet and font files which it has done for previous speed optimizations.

LostType.com: WM Site-of-the-Day

Administrator — Tue, 17 May 2011 16:00:00 GMT

Redesigning your website? Looking to freshen up your sales or marketing collateral? If so, you might just be interested in the Lost Type Foundry, a type foundry with a very unique model.

What makes Lost Type so interesting is that users can pay whatever they want for a font - even $0 for a free download. Funds from the sale of fonts go directly to the designers - Lost Type takes no cut of the sales and holds no funds.

There are currently just ten fonts listed but expect more in the future. One of our favorites is Highlands from Lost Type co-founder Tyler Galpin, a slab-serif font perfect for headlines that draws its inspiration from National Park posters of old. Check it out below.

WM Tool-of-the-Day: WhatFont

Pete Prestipino — Thu, 28 Apr 2011 20:55:00 GMT

If you're in the process of a redesign and are busy checking out the competition to ensure your newly retooled Web presence is in line with the competition, check out the WhatFont Tool.

The bookmarklet and Chrome Extension makes it easy to find out what fonts are being used in a webpage.

With the extension installed, by hovering over the font you like, you'll be able to see at a glance what web fonts are in place.

While you could use extensions like Firebug or Webkit Inspector to do the same, WhatFont is a far simpler, far more elegant solution.

A snapshot of the WhatFont tool is below. It's pretty fun to play with so check it out!

Finding Free Creative Assets at Veer (and elsewhere)

Pete Prestipino — Thu, 06 Jan 2011 16:05:00 GMT

Who wants to pay for images? Sometimes you have to but you never, ever want to, right? Fortunately, the Web provides quite a few places to obtain images for use on your website - oftentimes it can be cost prohibitive however. If you're looking for some high quality assets and don't want to spend a dime, head on over to Veer.com’s new free product section.

The company has released a section on their website which can be used by anyone at no cost. While a little light in quantity (quite light actually) the section is not just limited to images. Fonts, illustrations, wallpapers, screensavers, fonts and an add-in for Microsoft Office are also available in the section and new images and illustrations are added weekly (new fonts added monthly).

Another of my recent favorite finds is RGBstock.com. Membership is free and all the photos and graphics are actually free believe it or not. There are a handful of rules but the quality is quite good.

What online image service do you use? Share your recommendation with other Website Magazine readers by commenting below!

More Font-y Goodness from FontShop with FontFonter

Administrator — Sun, 08 Aug 2010 15:00:00 GMT

Google released a font preview tool this week which enables websites to see how a fonts within its Font Directory will look at different heights, weights, spacing, colors, etc. It was one of our most popular posts of the week. Apparently, our readers are keen on fonts – so more font resources you shall have.

Today FontShop released FontFonter which lets you render a live copy of any Web page using its own proprietary Web fonts. If you’re interested in what your website (or any website) might look like with some FontShop fonts, definitely check it out.

Font prices can be prohibitively expensive so being able to test and preview before spending a great big lump sum could be quite valuable.

Handwritten Fonts For Web Authenticity

Pete Prestipino — Thu, 03 Jun 2010 08:45:00 GMT

Sometimes a personal touch is all it takes to convince a user of your (and your website's) authenticity.

Handwritten fonts, while not used very often on today's 'Net, provide just this opportunity. We've scoured the Web in search of what we consider to be some of the best handwritten fonts available.

We're showcasing just 15 from UrbanFonts.com and hope you enjoy but know that there are a lot more out there that are freely available just like these.

Handwriting

Waste of Time

Medulla Oblongata

2 Peas Platform Shoes

Tire Shop

Marker Twins

Sketchbook

Use Any Darn Font You Want FLIR

Pete Prestipino — Tue, 17 Mar 2009 14:45:00 GMT

Do you remember that designer who told you there was simply no way you could use Calibri as the font for your website? Well, he was wrong. Using FLIR - Facelift Image Replacement (or FLIR), an alternative to sIFR that does not require Flash - you can use any darn font you wish. Quick side note - one of the most popular (highest trafficked) posts in November of 2008 was on Web design package CoffeeCup's Web Typography Pack which includes a sIFR Font Maker.

Getting started with FLIR takes just a few minutes. Download, unzip and upload, then choose and configure your fonts. Make the necessary modifications to CSS declarations and selectors and you're pretty much good to go. FLIR is probably best used for making modifications to headlines, subheads, etc. and not as the actual body copy itself.

Designers/developers will need Web servers with PHP and the GD library. There are some issues, but minor ones. The PHP GD library does not render details very well, but FLIR is easier to implement sIFR and does not require Flash to create or view.

Solutions like sIFR and FLIR may be tail chasing as CSS3 will support various webfonts (as do recent versions of Firefox and Safari).

__________

What's One Great Idea Worth?
Upgrade to a professional-level membership from Website Magazine and find out!