By Eric Karkovack, TutsPlus
Beautiful web fonts aren’t particularly difficult to find. A quick search will undoubtedly turn up a number of attractive typefaces that will complement your website’s look and messaging.
However, many of these fonts tend to have very specific use cases. For instance, a wide font may be perfect for header text but would work poorly in the body of your page. And certain decorative fonts are only appropriate for limited use–perhaps no more than a full-sized word or two within a design element.
With that in mind, we’d like to introduce you to a selection of the best web fonts that offer a bit more versatility. They go beyond standard looks, yet are still able to be read at small sizes. Each one is available with your subscription to Envato Elements, home to an ever-growing library of 2,500+ web fonts and a whole lot more.
First, let’s take a look at some areas where these fonts can really shine. Then, we’ll cover the basics of how to implement them into your website.
Small Fonts, Big Possibilities
A well-designed website is all about the details. And while it’s often the big, over-the-top design elements that grab our immediate attention, the little things certainly shouldn’t be forgotten. It’s here where users are compelled to stick around for a while.
The fonts in this showcase can help in both the big stuff (headlines, hero areas) and the not-so-big (buttons, blockquotes, sub-headings). This is good news for designers, as it offers the potential for more consistency in our projects.
That means, for example, you can add more stylish accents that reflect your brand across various areas of a website. A fancy font becomes something you are just as likely to use in your site’s footer as it is in the header.
Of course, legibility is still of utmost importance. So, be sure to test your designs and make adjustments as necessary.
How to Use a Custom Web Font
You can implement a custom web font into your site with just a few easy steps. But you’ll want to note that it does require a little bit of CSS to get going.
First, you’ll want to make sure that any fonts you download include a version specifically created for the web. Envato Elements makes this process easy with handy filtering options on the sidebar. For instance, finding all of the fonts that are designed for use at smaller sizes and include a web version only takes a couple of clicks.
Now, on to the steps:
1. Find a font you like and download it to your device.
2. Unzip the font package you’ve downloaded (remember to look for any web-specific fonts) and place the files into a folder within the root directory of your website. In our case, we’ll just call it “fonts”.
3. Upload the fonts to your web server, maintaining the directory structure you just created above.
4. Next, add each font using the CSS @font-face property, like so:
@font-face {
font-family: ‘Fiona Regular’; /* Change to your font’s name. */
src: url(‘fonts/Fiona-Regular.woff’); /* Change to match your font file’s location. */
}
5. From there, you can call your font anywhere within your site’s CSS file. For example, if you’d like to use it with your H1 tag, you might add something like this:
h1 {
font-family: ‘Fiona Regular’; /* Change to your font’s name. */
}
If you run into any problems, use your browser’s inspection tools to verify that the font is installed correctly.
Download These Versatile Web Fonts
We’ve covered the what, why and how. Now, it’s time to discover some fonts! Here’s a unique selection you can use to enhance your web projects. And since we’re focusing on smaller sizes, we’ll also sprinkle in some ideas as to where each may work best.
Fiona – An Elegant Typeface
Fiona offers up a classic, elegant style that can be used just about anywhere. It would be a perfect fit for sub-headlines within the content or even a sidebar.
Millefleur | Sans Serif Font Duo
This selection is actually a package of two separate-but-related fonts: Mille and Fleur. Mille is a traditional, easy-to-read bold font while Fleur brings some uniquely-styled letterforms. Put them together and you have a great combination of headings and subheadings.
Numhead Typeface
Numhead offers a techno-industrial look in three weights (light, regular and bold). Each one is crystal-clear, giving you the freedom to use the font all over. You might even consider utilizing it in short passages of body text that you want to emphasize.
Bw Modelica Condensed font family
Talk about versatile, Bw Modelica Condensed is built to be utilized virtually everywhere. The font comes in four widths, each with eight weight variants. It’s everything you need to mix and match with headlines, logos and even body text.
Borderland Font
While handwritten fonts are very popular these days, they can also be difficult to read. That’s not the case with Borderland, as each letterform is clear and legible. This one has the potential to be used for all manner of design accents.
Riley – A Modern Typeface
With a detailed, vintage look, Riley will provide your project with a touch of class. And the unique style of its punctuation lends itself to being used for quotes and other standout elements.
Little Hearts Font
Little Hearts is a fun, casual typeface that is perfect for sites focused on crafts or kids. The included glyphs bring it to a whole new level, with playful illustrations that can be used to decorate areas big and small.
Solente
This art-deco slab font is reminiscent of those used in the early 20th century. The ligatures are incredibly detailed, and the package also includes a set of alternates. Still, it might be most effective on short bits of text like sub-headlines or call-to-action buttons.
Manurewah
An ultra-modern, square typeface, Manurewah offers both a sophisticated and futuristic look. And, the use of capital and lowercase letters also allows for some distinctive combinations. You might use an all-caps look for large, single-word titles, with mixed-case text used for better legibility on lengthier passages.
Rodian Serif
Featuring a sharp, clean look, Rodian Serif is a great choice for attracting attention. You’ll find two styles and multiple font weights. Of particular interest is the stencil variant. It stands out as very unique, yet it also maintains legibility. Use it anywhere that you need to add an extra bit of personality.
Small or Mighty
Unique fonts that can stand up to use at both larger and smaller sizes are rare. Quite often, you’re limited to utilizing a more decorative font on the former, while settling for something a bit more ordinary on the latter.
However, our collection of the best web fonts for the job which we’ve shown here remove much of this compromise. While each font may have its own specific limitations, each one also has a wider range of potential uses. This opens up the door to a whole new world of design possibilities.
Feel free to experiment with the fonts above and see how they can dress up your website!
