Remember, though, that being highly selective with its use is key to the success of the distortion, as users don’t typically like overly obtrusive effects. Tread carefully if you plan to make use of this tiny design trend.

Today, we have a collection of stunning CSS and JavaScript snippets for creating text distortion effects for your web design inspiration. Enjoy!

You might also like our collection of glitch effect Photoshop Actions.

The post 10 CSS & JavaScript Snippets for Creating Text Distortion Effects appeared first on Speckyboy Design Magazine.

While the number of available variable font packages is growing, the selection isn’t huge just yet. And then there’s the whole issue regarding lack of support in older browsers. But those limitations aren’t going to last much longer. Thus, it’s a good idea to study up now.

We’ve collected some fantastic variable font examples to help demonstrate what is possible. Just note that to actually see these examples in their full glory, you’ll need to use the latest version of Chrome, Edge, Firefox, Opera, or Safari.

Running Free by Laurence Penney

Glyphs are kind of a big deal these days, with the likes of Font Awesome and Dashicons being in such wide use. In this example, a variable font with a single glyph of an emoji horse was used to create a nifty animation. Through the use of CSS font-variation-settings, the author was able to ensure an ultra-smooth effect.

See the Pen Muybridge galloping horse by Laurence Penney

Animate Your (Font) Weight by Michelle Barker

One of the big advantages of having the entirety of a font’s styles in one file is that you can transition between them in a snap. In this case, we see a highly-detailed and mesmerizing animation between different weights of the IBM Plex Sans font.

See the Pen Variable font animation by Michelle Barker

Interactive Art by Mark Frömberg

Here’s an example of a variable font being used as part of a larger piece of online art. Instead of animating a single word or headline, this snippet mimics a poster – albeit an animated one. The transition from hollow characters to filled (and back again) is truly slick. The sequencing is spot on. Years ago, this might have taken hours of tedious work in Flash to accomplish.

See the Pen Variable Font Experiment No.2 by Mark Frömberg

Style Slider by Frida Nyvall

Perhaps no snippet in this collection better demonstrates what a variable font is than this one. Use the sliders at the bottom of the screen to add custom weight, stretch and sizing to the Venn VF font. Notice the ease with which the settings changes are displayed.

See the Pen Variable font demo by Frida Nyvall

Have It Your Way by Chris Coyier

At first glance, this example looks like a nicely formatted poem. But there’s more than just a basic title and text here. Click on the “Jigger the First Stanza” and “Rejigger Title” buttons to the right, and you’ll be in for a treat. Font styles change fluidly and instantaneously. And it’s a great demonstration of how individual characters can be targeted as well.

See the Pen Goblin Market with Variable Fonts by Chris Coyier

The Full Effect by Juan Fuentes

When you combine variable fonts, CSS3 and JavaScript, great things can happen. And you don’t need to look further than this example to see why. This attractive text has a delightful stretchy hover effect, which is cool on its own. But change the included settings panel, and you’ll get an even more in-depth sense of what is possible.

See the Pen Variable Fonts | Compressa by Juan Fuentes

So Slinky by Jérôme Sprenger Sèvegrand

Let’s close things out with something unique. This snippet uses the WHOA variable font to create an incredible 3D effect that shifts the view of this outline text based on your cursor position. Again, this is something that, a few years ago, would require some serious animation software to achieve. Now, the different perspectives are built right into the font. From there, it’s a matter of using some clever coding to put it in motion.

See the Pen Slinky Text – WHOA Variable font demo by Jérôme Sprenger Sèvegrand

A New Era in Typography

With variable fonts, web typography has become an even greater resource for creating a compelling UX. Thanks to their ability to instantly change styles and target specific characters through data splitting, a whole new level of special effects are possible.

As the examples above demonstrate, there is plenty of room for creativity. And what’s really exciting is that the fonts themselves have so many goodies baked right in.

That being said, we’re really just beginning to scratch the surface of what these fonts can do. It will be amazing to see what the future brings.

The post 7 Fantastic Examples of Variable Fonts in Action appeared first on Speckyboy Design Magazine.

Typically, these fonts are implemented via the Google Fonts API. Add a few code snippets to your website, call the fonts in your CSS, and call it a day. Easy, right? And the process can be even easier if you’re using a plugin or theme that lets you select fonts as you go.

But there are also compelling reasons to host Google Fonts locally on your web server. Privacy is one, as some jurisdictions have ruled that remote font hosting violates European GDPR laws.

Performance is another potential consideration. While there is some debate about local hosting vs. the Google Fonts API, the difference seems to be relatively small. The option of utilizing a content delivery network (CDN) is also a possibility.

If you’re looking to host Google Fonts locally, we’ll introduce you to an easy way to implement them. Seriously – you could be up and running within a few minutes!

First, Identify the Google Fonts You Want to Use

The first step in the process is to identify which Google Fonts you want to use in your project. Browse the official site and take note of the following:

• The font name;
• The style(s) you want to use;
• The language(s) you need;

Now, you could download your selections directly from Google Fonts. And while there’s nothing wrong with this method, it can be a bit cumbersome.

To use the fonts on your website, you’d have to also call the locally-hosted files via @font-face in your CSS. That involves looking at Google’s source code for each font, then choosing the correct character set and changing the src attribute to match where your fonts are stored.

For example, if we want to use Roboto’s “light” style, the CSS looks like this (comments added/edited for clarity):

/* latin - is this the only character set we need? */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 100;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOkCnqEu92Fr1MmgVxIIzI.woff2) format('woff2'); /* Change to match your local font location */
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; /* This isn't needed at all */
}

Perhaps it’s not the worst thing in the world. But if you have several fonts, each with multiple styles, this can become very tedious.

Add Fonts Using Google Webfonts Helper

Hosting your Google Fonts locally doesn’t have to be so complex. The google-webfonts-helper is a tool that makes the process incredibly smooth. It does all of the heavy lifting for you.

Before we start, take note: there may be version differences between google-webfonts-helper and Google Fonts itself. Google Fonts are improved over time. Not using the API means not always having the latest versions.

To get started, search for the font(s) you want to use. Note that you can only work with one font at a time. The steps below will need to be repeated for each additional font.

In our case, we’ll find one of Google’s most popular fonts, Roboto, from the list.

Next, it’s time to select the character set (charset) and styles we need.

Based on our character and style selections, google-webfonts-helper generates the necessary CSS. By default, the code aims to support as many browsers as possible. However, we can also choose to focus on modern browsers as well.

It even allows us to edit the base directory where we want to store the font files. This will be instantly reflected in the CSS.

With all of our settings now applied, a .ZIP archive is available to download. We’ll unzip the archive to the chosen destination and upload it to our web server.

Finally, we’ll paste the provided @font-face code into our CSS. Making note of the font-family attribute, we can add these fonts to whichever CSS selectors we’d like.

Serving Google Fonts Locally

With a few simple steps (and an assist from google-webfonts-helper), you can forego the Google Fonts API and host fonts locally. It not only improves user privacy but also helps to avoid potential complications from API downtime or performance bottlenecks.

That being said, locally hosted fonts do mean more work for your web server. Thus, it’s still important to utilize caching and other optimizations. These factors should be considered before you take the plunge.

Regardless of how you use Google Fonts, it’s nice to know that there are multiple ways of doing so. This allows you to choose the best method for your needs. And hosting them locally may be the right way to go.

The post The Easy Way to Host Google Fonts Locally appeared first on Speckyboy Design Magazine.

And now, we’ve come to the next big thing in typography: Variable fonts.

What Is a Variable Font and Why Is It Different?

Variable fonts are an extension of the OpenType specification. It enables a single font file to contain all manner of style variations.

Traditionally, we’ve needed a separate font file for each and every style variation. For example, take the Open Sans Google Font. There are currently 10 different styles available, each requiring the use of its own respective file:

While we’re certainly used to this approach, it’s not the most efficient or convenient way to do things. For web designers, it makes us really scrutinize whether or not to use a particular style. Since each new file we call can affect page performance, we have to weigh the costs and benefits every time.

With variable fonts, we don’t need to relinquish specific styles to save on load time. Instead, we have access to everything in just one file. You almost wonder why we didn’t have them years ago.

But it’s also worth noting that there are other advantages. For one, these fonts can be used in CSS transitions, allowing for smooth animations between styles. They also enable designers to create their own custom styles – making them great for unique branding purposes.

Things to Keep in Mind

While variable fonts are an exciting development, they’re not perfect for every use just yet. Before you dive in, think about the following:

Limited Browser Support
Variable fonts are supported in the latest versions of Chrome, Edge, Firefox and Safari. If that makes up the bulk of your target audience, great. If you still need to support older browsers, you’ll need a fallback of some sort.

Relatively Small Selection (For Now)
Since we’re at the beginning of the variable font revolution, there aren’t a ton of available options out there. But the spec has support from the likes of Google, Adobe, Microsoft and Apple – so it’s only a matter of time before we are inundated with choices.

The good news here is that, for a fairly new technology, there are surprisingly few downsides. It doesn’t appear that there will be any major roadblocks for widespread adoption to take place.

Resources

The design community is undoubtedly excited by the potential of variable fonts. Therefore, you’ll find lots of useful tutorials to get you started. In addition, there are already a few places where you can find fonts to start experimenting with.

Articles and Tutorials

Font Downloads and Tools

Time to Experiment

Variable fonts are one of the most exciting developments web typography has seen. They stand to both make our jobs easier and, even better, let us maximize our creativity. So, it makes sense to start experimenting now in order to see what they’re capable of.

What aspect of variable fonts excites you most? Have a favorite font? Leave a comment and let us know!

The post Getting Started with Variable Fonts: Tips and Resources appeared first on Speckyboy Design Magazine.