When the communication is in print or online, the non-verbal cues are a bit different. In the voice-less mediums, we have layouts, colors, and images to support our directives. And, of course, there’s typography.

It’s a subtle overture, but the typefaces and font styles we use may actually carry subliminal connotations. Designers can play on our subconscious responses to different styles of typography to help support the main theme of any project.

Font Readability

There are a lot of fancy fonts out there that may be tempting. But if they sacrifice readability, it’s almost never worth it. People are far more likely to be accepting of a message that is stated clearly in both words and typeface. This is especially important if you are asking people to do something.

One study shows that, in a test group, people were more likely to make a decision when the message was easier to read. Following that philosophy, creating call-to-actions using highly readable fonts should encourage the most engagement.

Of course, this article suggests that in some cases you might want something a little less accessible, for example, if you want people to spend more at a restaurant.

For many people, if something is difficult to read, the perception is that it is more challenging to do, yet in the food service world, that may mean they won’t mind paying higher prices.

Masculine or Feminine Fonts?

Like many things, even fonts can be classified as masculine and feminine. Feminine fonts can be described as fine, serifed, sleek, and elegant, and masculine fonts can be characterized as being blocky and bold.

When you analyze various collections of masculine or feminine fonts, you find that these generalizations largely hold true.

This insight can be used to help effectively target specific genders in marketing campaigns. Websites or advertisements that are meant to appeal to the male or female demographic can strategically utilize fonts to support that goal.

More elegant curving fonts may serve products intended for women, while items for men could benefit from bolder, more angular typefaces.

For the most part, corporate typography tends to lean toward the more masculine fonts, as they seem to indicate a greater sense of organization and professionalism. And not surprisingly, feminine fonts are still typically the most useful for feeling pathos.

I think there’s a joke about stereotypes in there somewhere, but at the risk of inciting a riot, I’m just gonna leave it alone.

Serif or Sans-Serif?

The oldest debate in the world of fonts has been whether to serif or not to serif. The difference is in the tiny little brush strokes at the end of a letter.

There are plenty theoretical arguments in favor of both styles, but ultimately, there doesn’t deem to be any scientific evidence that endorses the use of one over the other.

Although, it does appear that most users prefer sans serif fonts for websites and email but prefer serif fonts in business documents. That means that Times New Roman might still be the standard for resumes, but Arial is better as the default for your inbox.

[Image Source]

There’s still a lot we don’t really know about the typeface. Can the font you use make your work seem more authoritative? Perhaps there is no significant difference between the serif Georgia (my all-time favorite font) and sans serif Tahoma.

But when you go a little broader and compare the gravitas of Helvetica with, say, the perpetual butt of font jokes, Comic Sans, there’s a major disparity.

Choose Your Font

Font choice can be used to make as much of an impression as the words that comprise the copy. Websites or businesses that are creative or design-based may benefit from more artistic fonts. While institutions that require trust and credibility may want to look for more structured typefaces.

Some situations naturally lend themselves to using a specific genre of typography. In the end, though, deciding on the best font for your purpose and medium largely comes down to a matter of preference and pre-disposition.

As long as your choices are readable, purposeful, and appropriate for the circumstances, most decisions won’t be wrong.

Remember, you don’t have to reinvent the wheel; you just need to use the existing model to propel you forward.

The post The Subliminal Connotations of Our Font Choices 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

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

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

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

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

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

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

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.

This little piece of punctuation is so highly regarded, that some folks have become Gatekeepers of the Apostrophe, guarding this misused, and descriptive part of punctuation, with a vengeance. Educating the masses against using apostrophes in ways that are not conducive to good grammar has become a passionate life’s work for punctuation aficionados.

Pop Culture Misuse

To grammar specialists, one of the most prominent examples of the misuse of an apostrophe include inappropriate usage in place of letters. For instance, the terms: you ‘n’ me, rock ‘n’ roll, Dee ‘n’ Dum, etc. will drive an apostrophe protector wild.

Normally, the apostrophe should not be used in the place of letters, in this way; nor should they ever be used upside down and backwards, as with an apostrophe that takes the place of a beginning letter such as the "a" in the word "and."

However, if the shortening is used for satire or dialectal or archaic purposes, the apostrophe may still be used to mark it:

The backward apostrophe seems to cause the most consternation. Here’s a simple graphic trying to clear up the misunderstanding (courtesy of Linotype).

The Proper Use of the Apostrophe

Still, the apostrophe is probably the least understood of all the punctuation marks and is probably used incorrectly more often than any other element of modern punctuation. There are several constant misuses of the apostrophe that really are just plain bad grammar. Part of this is the confusion about what the correct use actually is.

Correct usage includes:

• Forming possessive nouns.
• Showing omission of letters between two words.
• Typography plural usage with lowercase letters.

Let’s take a look at each of these categories one at a time.

Possessive Nouns

In order to see if a possessive needs an apostrophe, the easiest way is to rephrase your sentence. For example: If you want to say the musician’s guitar, rephrase it this way: the guitar of the musician. Because the noun after "of" is a living entity, you do need an apostrophe.

If the noun after the "of" is inanimate, then there is no possession and the apostrophe is not needed. Example: The lid of the jar: the jar lid.
See? No apostrophe.

Omission of Letters

This is the use of an Apostrophe for a contraction. Contractions are words where one or more letters have been left out. An apostrophe takes the place of this letter(s). Contractions are usually used in informal speech and/or writing.

Common usage using contractions include "don’t" for "do not" or "can’t" for "cannot".

Typography: Plural with Lowercase Letters

When separating and helping to understand certain phrasing, the apostrophe can become a visual aid in making type more readable, like 1960’s, p’s & q’s.

Common Apostrophe Mistakes

A few common mistakes include the frequent incorrect use of "it’s". Remember, the apostrophe is only used as a contraction for "it is.", The possessive use of "its" never uses an apostrophe.

Another incorrect use is "who’s" for possessive. Who’s means "who is," such as "who’s this?" For the possessive, the correct term is "whose cat is this?".

For more mistakes, visit this awesome website: Apostrophe Abuse.

Conclusion

So, learn these simple rules and soon you will also cry: Apostrophe Gatekeepers, Unite!

The post Everything You Need to Know About Apostrophes appeared first on Speckyboy Design Magazine.

Modern CSS and JavaScript techniques are capable of so much more. Individual letters can dance across the screen in highly-sequenced animations. Special effects can add 3D-like depth, while masking introduces textures to the presentation.

If you’re looking to grab a user’s attention – you’ve come to the right place. We’ve put together a collection of CSS and JavaScript snippets that will bring your words to life.

The following snippets run the gamut with regard to complexity and potential use cases. And they’re all sure to stand out. Here we go!

Falling Words CSS Effects

Here’s one way to dissect a paragraph. This JavaScript-powered animation takes words and piles them up at the bottom of the screen. You can also drag and toss them about. This effect could be a great way to enhance an old-school tag cloud.

See the Pen Falling Words by Gayane Gasparyan

Jello Stretchy Variable Font

Sometimes a special effect can add context to a word. This squishy take on “Jello” is a perfect example. It jiggles – just like the popular dessert. A variable font is used along with SVG to create this bouncy masterpiece.

See the Pen Jello Stretchy Variable Font by Pete Barr

Montserrat Text Animation

Stylized text works great for logos and titles. But when you add movement, it takes things to a whole other level. Here we have a Google font that has been brought to life with some colorful animation.

See the Pen Text Animation:Montserrat by Claire Larsen

Move to Mars!

Even if you’re not ready to move to the red planet, this animation is otherworldly. The load sequence of the elements is an attention-getter, for sure. And it also fits perfectly with the retro aesthetic of the presentation. We might just book a flight.

See the Pen Move to Mars! A CSS only booking form by Jamie Coulter

Kinetic Typing Animation

Why settle for a boring old resume when you can do something unique? That’s the premise of this developer’s animated skills. It makes excellent use of typography, along with a simple color scheme.

See the Pen Scene.js Kinetic Typing Animation by Daybrush

Rainbow Text Hover Animation

Here’s proof that you don’t need to go overboard with movement. A CSS conic gradient was used to create the delightful “rainbow” effect on this text. Hovering transforms it to use a singular color.

See the Pen Rainbow text hover animation by Sarah Fossheim

Simple Neon Text Effect

Add this snippet to the “less is more” category. A simple neon text effect brings contrast here, but the little details make it even better. The intermittent dimming of the text adds both fun and realism.

See the Pen NEON TEXT by Mohammad H Alijany

NITW Text Animation

There’s so much to love about this presentation. It’s simple, fun, and subtle. The movement of individual letters is noticeable – but not distracting. And there’s a television-like quality to its look. Plus, the interactive elements serve to enhance the experience.

See the Pen NITW Text Animation by cpsdqs

More Than Words Alone Can Say

The ability to dress up text with code opens the door to creativity. Under the right circumstances, movement and interactivity are welcome additions to a website.

And sometimes, it’s the simplest things that make the most significant difference. Sure, it’s possible to create cinematic effects. But subtlety can also stand out. The great thing is that you get to decide what works best for your messaging.

The post 8 CSS & JavaScript Snippets for Animating Words appeared first on Speckyboy Design Magazine.

Without needing to install anything, all you have to do is bookmark, and save them for that day when required.

From assessing your website’s accessibility to generating sophisticated flexbox or grid layouts, refining typography, choosing the perfect color scheme, copying and pasting CSS animations, to beautifying code screenshots, this collection covers a broad range of web design needs.

No matter what kind of CSS time-saver you’re searching for, you’ll likely find it here. Keep these tools at your fingertips to make your CSS workflow quicker and that little bit easier.

The post 100 Tiny CSS Tools & Apps for Web Designers appeared first on Speckyboy Design Magazine.

Modern CSS has a way of making things easier. And the drop cap is no exception. It’s now possible to create an attractive and functional element.

No wonder web designers are flocking to them. They add a professional and elegant touch to blog posts and long-form content. Drop caps are capable of more than you might think. Here are eight unique implementations that show what’s possible.

Beautiful Book Layout with Drop Cap

Let’s start with a nod to the drop cap’s lineage. This snippet recreates a book layout – complete with beautiful typography. The drop cap uses a CSS float, along with the :first-letter pseudo-element, to position the letter.

See the Pen Book Layout by Erin E. Sullivan

CSS Houdini – Simple Generative Drop Caps

Here’s a fun example of web technologies dressing up a single character. Each time you refresh the page, the background of this drop cap changes. This generative effect is powered by CSS Houdini. Let’s see a printed page beat this one.

See the Pen CSS Houdini – Simple Generative Drop Caps! ✨ by George Francis

CSS Drop Cap Numbers

Drop caps aren’t only for paragraph text. They can also add a dimension to other HTML content. Here, a colorful character dresses up an ordered list element. You might use a similar effect to make multi-step instructions easier to follow.

See the Pen DropCap Nubers by Thom Epps

Huge Drop Cap CSS

Drop caps often fit within the first few lines of a paragraph. But this snippet aims to go bigger. A giant red character towers above the rest of the text. And it also serves as a background. It’s an attention-getting look. But some accessibility tweaks would help with legibility.

See the Pen Big Drop Cap by Noah Blon

Beautiful & Accessible CSS Drop Caps

How do drop caps impact accessibility? A poor implementation could make it harder for users of screen readers. These examples demonstrate a couple of ways to keep the characters accessible. One uses a pseudo-element, while the other hides a copy of the decorative element.

See the Pen Creating Beautiful and Accessible Drop Caps (Completed) by Aquent Gymnasium

Accessible Drop Cap Examples

Keeping with the theme of accessibility, here are three drop-cap examples. In this case, author Adrian Roselli recommends the third implementation. It’s the only one that is CSS-only. There’s also a companion article that digs into the options.

See the Pen Accessible Drop Caps by Adrian Roselli

Styling an Ornate Letter Drop Cap

Positioning a drop cap can be a challenge. For example, getting the character to look good with paragraphs of various lengths is tedious. This example uses CSS transforms to account for the paragraph’s line height. The idea here is to create more predictable results.

See the Pen Styling an Initial Letter “Drop Cap” by Andy Hullinger

Drop Cap Ordered List Grid

Here’s a simple CSS snippet that makes ordered list items stand out. First, it uses the CSS counter() function to enumerate each item. Then, it uses CSS pseudo-elements to add bold styling to the digit. The use of CSS Grid ensures that the presentation is responsive.

See the Pen dropcap-grid ol by Stephen Lindberg

Dropping Some CSS Style Into Your Text

It’s easy to see why drop caps have become commonplace. First, they add creative flair to plain text. Plus, they can help make long passages of text more intuitive. They can also serve as an extension of your brand.

And CSS offers multiple options for adding drop caps to your layout. The examples above demonstrate what’s possible. You can create beautiful characters that maintain accessibility. What’s not to love?

The post 8 CSS Snippets for Creating Stylish Drop Caps appeared first on Speckyboy Design Magazine.

They also serve as a cultural marker of sorts, helping us define an era. For example, Star Wars has come to define the late 1970s and early 1980s. These days, the title of Stranger Things has forged its own signature.

Thus, it’s no wonder that web designers use title sequences as a proving ground. By recreating their favorites in CSS and JavaScript, they’re sharpening their skills and paying tribute.

Let’s have a look at eight famous titles that designers felt worthy of imitation. Some are spot-on facsimiles, while others use a bit more artistic license. But they’re all worth celebrating in our book.

The post 8 CSS & JavaScript Snippets for Recreating Iconic Titles appeared first on Speckyboy Design Magazine.

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 Text Distortion Effects appeared first on Speckyboy Design Magazine.

The great thing is that a wide variety of 3D effects can be created using CSS and JavaScript. When thoughtfully implemented, this enables text to stay accessible and responsive. It’s a far cry from the days when such effects were only available through the use of images.

Today, we’ll take a look at some snippets that feature beautiful 3D text effects. They run the gamut from calm and classy to outrageously animated. There’s something here for just about every need.

The post 8 CSS & JavaScript Snippets for Creating 3D Text Effects appeared first on Speckyboy Design Magazine.

While CSS media queries can help us adjust text to the needs of mobile devices, there are other exciting ways that developers are taking up this challenge. Let’s have a look through some of the more interesting techniques for utilizing responsive text.

Responsive LESS Mixin

If you’re using the LESS CSS preprocessor, this mixin will automatically generate code that will nicely scale down text-based on-screen resolution.

See the Pen Responsive Text Mixin by Jonathan Davis

Driving that VW

I’ve been using CSS for quite awhile, but I never knew about the units for sizing elements according to their viewport. In this example, the vw unit is used to automatically size text according to the viewport’s width. And it’s actually supported (at least partially), all the way back to IE 11. Color me surprised!

See the Pen A responsive text by Hakan Kösekadam

Single Line Text With a Better Vue

There are times when, because you’re a designer, you really want the text to stay on a single line – regardless of screen size. You’ll find several options for this type of functionality, including this example that uses Vue.js.

See the Pen vue-responsive-text by Joshua Kleckner

Responsive With Flair

Here’s an example that isn’t so much about the size of the text but rather rearranging it in a fun and attractive way. Changing the viewport size sets off an animation as the text conforms to the new container size.

See the Pen Responsive text animations by Blake Bowen

Staying Within the Lines

The ability to maintain consistent vertical spacing throughout multiple devices is an excellent thing for UX. The example below uses a SASS mixin to do just that, with a notepaper background to prove the point.

See the Pen Responsive Text by David Conner

Controlling Your Properties

CSS custom properties (aka “variables”) are the latest “must-have” feature that is making its way into our development toolbox. They work similar to a variable in PHP or JavaScript, as they can be called anytime and save you from a ton of repetition. Here’s an example that uses variables, along with the CSS calc function to automatically resize text.

See the Pen Responsive fonts with CSS Variables by Dannie Vinther

Responsive Text Slider

A text-based slider is so nice because it’s an incredibly lightweight way to call attention to content. This responsive example uses pure CSS along with Bootstrap to create something attractive and functional.

See the Pen Responsive text slider with Bootstrap by Priscila Cunha

Fitting In

While we previously looked at an example that kept text on the same line across screen sizes, this one differs because it will move items to a new line when necessary. However, it will still ensure that text maintains a consistent size. So it’s a bit of the best of both worlds.

See the Pen Responsive Text (Auto-scale text) by Emil Devantie Brockdorff

Smooth and Sassy

We’ve already looked at a LESS mixin, so we have to give Sass some love as well. This one provides a very smooth transition in text size as the viewport changes.

See the Pen Responsive Text Mixin by mike

Character Counts

What if you want to make your text responsive based upon several characters in a line? Here’s an example that uses CSS element queries to make it happen. This provides a nice intro to the power of an up-and-coming feature in CSS.

See the Pen Responsive Text Length by Tommy Hodgins

Taking Better Control of Text

As we’ve found, you can take several different approaches to implement responsive text into your design. What’s nice is that so many methods are essentially automatic – meaning that you don’t have to worry about making your own calculations for smaller screens. It saves time and works.

The newer CSS specifications like element queries and custom properties give us finer control over how our text and design elements behave. Our text is becoming the benefactor of these advancements and will result in a more readable mobile web.

The post 10 CSS Code Snippets for Responsive Text Techniques appeared first on Speckyboy Design Magazine.