'Net Features : typography

Lettering.js Ensures Truly Fontastic Web Designs

Michael Garrity — Thu, 09 May 2013 18:45:00 GMT

A good font can make all of the difference between an attractive website that effectively communicates its message to visitors and one that, well, doesn’t do that.

Unfortunately, at present, CSS doesn’t offer a complete down-to-the-letter control option that allows designers to tweak individual aspects And that’s why a jQuery plugin like Lettering.js can go a long way in improving the look, feel and, most importantly, readability of your website.

Lettering.js works by splitting the textual content of a letter element into distinct individual spans (using ordinal .char# classes). This allows designers to style each letter individually, thus giving them considerably more control over the typography on their websites, and how visitors will view their messages.

The plugin was developed by the Paravel development team, and is currently employed by a number of notable websites, including Crayola. It is also available on GitHub.

Typography App Eases Design Process

Allison Howen — Mon, 04 Feb 2013 15:05:00 GMT

A new browser-based tool is helping the design community save some time and create better quality Web typography.

Typeface provider Monotype Imaging Holdings has commercially launched the Typecast application, which allows Web designers to combine, compare and style Web fonts quickly without performing screen captures in third-party applications or through hand coding. In fact, users can visually style text directly within the browser, which offers a broader scope for creative experimentation, better typographic control and a simplified workflow.

As designers work, Typecast generates production-ready HTML and CSS code. Then, when designers are ready to start building their sites, they can export the HTML and CSS as well as generate embedded code that will serve their project’s typefaces to their site.

“Good typography is transforming the Web, and the engine behind that is Web fonts,” said Chris Roberts, vice president and general manager of Monotype’s e-commerce group. “With Typecast, designers now have a simple yet powerful design tool that opens up a whole new level of productivity and creative expression. We’re very excited that it’s now part of our complete Web font offering.”

Designers can set styles such as font size, line spacing and coloring, and apply OpenType features such as ligatures, small caps, fractions, lining and old style figures, and swash characters. Moreover, designers are able to try fonts on full-length project content, not just short snippets. By using side-by-side comparison and testing, designers can quickly view how fonts look, and styles can be adjusted across entire projects with just a few clicks.

“The Typecast application simply takes the pain out of working with Web fonts,” said Paul McKeever, director of Typecast. “We’ve simplified workflow to bring joy to Web design and allow designers to spend more time on creative experimentation. They can iterate as quickly as they ideate and more easily create accessible, readable content for any sized screen on any device.”

The Typecast application is available at four subscription levels, with prices starting at $29 per month. Additionally, all plans include a free standard subscription to Fonts.com Web Fonts, which enables Typecast subscribers to use more than 20,000 Web fonts on their live sites. Furthermore, the Typecast application is available as a free trial for 14 days.

It is also important to note that the Typecast application allows designers to experiment with fonts from Typekit, Fontdeck, Webtype and Google Web Fonts as well as Monotype’s Fonts.com Web Fonts.

Five Fantastic Web Font Services

Allison Howen — Thu, 06 Dec 2012 19:25:00 GMT

The evolution of the Internet has taught developers that the key to creating a successful website is to build for better usability.

This means that a website should be optimized so that visitors can easily navigate it without having to hunt for what they need. This is why simplicity has become one of the hottest design trends during the last year, because a site without a lot of clutter helps ease navigational issues. While there are many technologies available that can assist developers in making navigational elements more user-friendly, one of the best ways to improve navigation is with typography.

In fact, an innovative use of typography can help developers highlight specific areas of a site. This is because variations of font, such as colors, placement and size, help developers showcase the hierarchy of content on a Web page. And luckily, developers aren’t restricted to using a limited amount of fonts for online projects anymore because the Web is full of resources offering a plethora of fonts that are available for online use, including the five services that can be found below:

Google Web Fonts

Since there is rarely ever an industry that Google doesn’t dabble in, it is no surprise that Google offers typography options. In fact, Google’s service makes customizable open source fonts available to developers. Users have the ability to browse font families and add their favorites into their own Collection. Then, users can refine their collection and have the option to view their favorite styles in a sample layout. The service is free and fonts are easy to implement onto a website.

Typekit

This platform provides developers with a subscription-based library of Web fonts. Currently, the company has more than 250,000 customers, including The New York Times and Twitter. Typekit gives users the ability to preview fonts on numerous browsers and operating systems. Furthermore, users have the option of extending their Typekit account to gain access to additional fonts from participating foundries. Although a trial of the service is free, subscription plans start at $24.99 a year.

Fontdeck

This Web typeface provider offers developers a catalogue that contains thousands of fonts that are enhanced for on-screen use. Fontdeck hosts all font files so that the company can handle browser complications to ensure fonts are reliable. Developers simply need to add a few lines of CSS to implement the fonts, and they only pay for fonts that are live. While each font is priced individually and users pay annually per website, the company states that the typical price is $7.50 a year for each font.

Webtype

This typography service offers high-quality, Web-optimized fonts. Implementation of fonts is easy because users simply need to copy and paste a chunk of code into their site’s HTML. The service hosts all fonts to ensure that all typefaces are automatically upgraded and display correctly on every browser. Webtype offers 30-day free trials for all fonts, with plans starting at $40 per year for sites that receive less than 250,000 page views.

Fontspring

Unlike the aforementioned services, Fontspring offers downloadable fonts for self-hosting. Users simply need to purchase a font type and then they can use the fonts on as many projects as desired with no annual fee. Moreover, this service also offers app fonts, which can be used within mobile applications.

What is your favorite Web font service? Let us know in the comment section below.