Each month we take our popular Rising Stars newsletter and convert the samples into webfont versions, noting the best ways to exploit the fonts’ features or find work arounds for the best results in common browsers.
Quarzo by Manuel Corradine (interviewed for December’s Creative Characters newsletter) is an interesting case for web typographers. This connecting script is loaded with swashed capitals and ornamental loops and swirls that link up with beginning and ending letters. Like most fonts with lots of alternative characters and extra non-alphabetical features, these are activated using OpenType programming, but still not consistently supported by modern browsers. The difference with Quarzo is that its alternate and ornamental glyphs have all been assigned a custom unicode reference, unique to this font, meaning it’s possible to use an html entity in place of the regular letter. For example, the word Quarzo in the sample looks like this in the HTML:
The first code is the swash “Q”, the second is the long tail linked to the lowercase “o”. To discover unicode references in the private use area requires a tool for viewing a font’s character set, as well as a desktop version of the font. Adobe Illustrator and InDesign both have good glyph palettes (hover over a particular glyph to get its unicode reference), while Photoshop is conspicuous for its lack of a good glyph palette. Most half-way decent font managers (Font Explorer, Suitcase Fusion, Fontcase for example) provide access information for every glyph in a font.
The major problem with this approach is that this text won’t be readable by search engines or screen-readers, two of the principal reasons for using web fonts in the first place, as well as being a bit cumbersome to implement and totally non-dynamic. It is, however, good for creating scalable graphics, making it appropriate for logos, mastheads and similar static text instances.
Trend is Latinotype’s contribution to the genre of display typefaces known as chromatic type — typefaces designed for layering and 3D effects. We already published an in-depth guide to working with chromatic type, with a load of other examples. The only thing we’d add here would be to emphasize the importance of the line-height settings: be sure use the font’s native, built-in line-height settings, otherwise positioning the layers will require different co-ordinates for each line due to the 3D versions having an overall taller glyph.
Trend also includes an ornaments font with keywords (in English), icons and swirly curlicues. Some of these are only accessible through a glyph palette (and aren’t encoded like Quarzo, above, unfortunately) or OpenType features, so the choice is more limited for web typographers.
More type layering possibilities from Yellow Design Studio (whose Skitch and Anodyne also featured in our article on layering type), Thirsty Rough is the grunge companion to Yellow Design’s popular Thirsty Script. Rough includes three versions of increasing degradation in three weights from Light to Black, plus Shadow fonts for each weight. Use these highly detailed grunge fonts sparingly however, and try to subset wherever possible; all that detail means many more vector points and therefore calculations for your computer’s processor, which has a noticeable effect on your website’s loading times. These articles have more information on subsetting and using grunge fonts.
Halis Grotesque belongs to the same category of stylish Art Deco-inspired text and display typefaces that already includes Brandon Grotesque and Avenir. Halis Grotesque is less geometric than either of those two, and features a somewhat taller x-height. It will work great in longer text settings, and add a chunkier feel to headlines for those occasions when Brandon’s tall ascenders appear too airy.
Of special interest to web typographers: The complete Halis family includes separate small caps fonts for each weight!