Magazine for designers and web developers
01 Collect

10 Web Fonts You Might Not Know About But Should

Article by Sunny Bonnell in Design & Illustration -

With the typographical landscape for web rapidly expanding, it’s becoming easier for designers to integrate a vast arsenal of custom type choices for web/mobile design. However, there’s a common thread amongst designers obsessed with finding new fonts to utilize in their design - where do you find faces that haven’t been overtly used and abused? There is more pressure than ever to create a unique voice online and choosing the right web fonts are an integral part of the online experience.

Here are some excellent fonts you should keep in mind for your next web design project:

  • #1 Abolition

    #1 Abolition

    View web font

    Abolition is a condensed sans-serif display typeface that’s great for the industrial vibe. It’s a highly modified sans-serif version of Bourbon with some new surprises.

  • #2 Frontage

    #2 Frontage

    View web font

    This font is a versatile layered type system with no shortage of possibilities using a wide variety of fonts and colors. Create unique effects by adding the shadow font or use the capitals and bold cut for cool execution.

  • #3 Brothers

    #3 Brothers

    View web font

    Inspired by the circus, this bold and memorable font makes a statement that is just simply hard to ignore.

  • #4 Lust

    #4 Lust

    View web font

    A sexy, lusty serif inspired by a confident, self-reliant woman that shows just enough to keep her dreamy pursuant wanting more.

  • #5 Nexa & Nexa Slab

    #5 Nexa & Nexa Slab

    View Nexa | View Nexa Slab

    The family is characterized by excellent legibility, a well-finished geometric design, optimized kerning, etc. Nexa is most suitable for headlines of all sizes, but it does well in a variety of text lengths as well.

  • #6 Geogrotesque

    #6 Geogrotesque

    View web font

    A DIN Alternative - the type family has a geometric construction, but the rounded finish provides it a warm appearance.

  • #7 Livory

    #7 Livory

    View web font

    Need something that looks like it sits perfectly under an old weeping willow tree? Livory has an organic look with a warm, poetic touch. With its melted corners and individual serifs, Livory has a smooth and handcrafted appearance in bigger sizes.

  • #8 Zombie Sunrise

    #8 Zombie Sunrise

    View web font

    When you buy this font you receive for six free exclusive patterns that you can use in your Photoshop applications.

  • #9 Vaud

    #9 Vaud

    View web font

    Vaud is inspired by Helvetica, Akzidenz Grotesk, Univers and the original metal types from Switzerland, yet has more pronounced legibility. Each weight is designed to be highly readable on-screen.

  • #10 Salome

    #10 Salome

    View web font

    Salomé offers a lot of ligatures & alternate forms, including R and K swashes, an ampersand alternative and titling ligatures. It can be used with Font-Face.



    To give web designers a reliable tool for typography on the web, H&FJ recently launched a revolutionary web font library called Cloud.typography, which includes adaptations of some of their their most popular families, like Archer, Chronicle, Gotham, and Ideal Sans. They’re calling them ‘ScreenSmart’ fonts, and they have been completely rebuilt to display small text on the screen. Redesigned literally ‘in’ the browser, ScreenSmart fonts are fully-featured type families that offer outstanding quality on all the major platforms. A few

  • A few notable features

    Render Quality - Multipurpose web fonts work great at larger sizes, but don’t usually perform well for setting text at small sizes. Pixel grids disfigure letterforms, especially at the text sizes where we all do most of our reading. ScreenSmart fonts are specifically built in and for the screen, so the render quality is outstanding, even at nine pixels. The creation of each ScreenSmart font involved reshaping the glyphs to work with pixel grids at every size. Additionally, proportions were altered to favor legibility, weights were adjusted so each style is differenciated from other members of the family, and characters were appropriately spaced to improve clarity.

  • Browser Optimization - Cloud.typography delivers different font files to each browser which means the fonts use different engineering strategies to play to the strengths of the environment. Each character in a ScreenSmart font is equipped with a set of detailed instructions called “hints,” which tell its outlines how to adapt to pixel grids at different point sizes.

    Cloud.typography is compatible with all browsers that support webfonts, including Internet Explorer 6+, Google Chrome 6+, Firefox 3.5+, Safari 3.1+, Opera 10+, Mobile Safari for iOS 4.2+, Browser on Android 2.2+, Google Chrome for Android 18+, IE Mobile for Windows Phone 8, and Blackberry OS 7+ including PlayBook.

  • Learn more about H&FJ Cloud Typography here