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 by Erin E. Sullivan

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 by George Francis

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 by Thom Epps

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 by Noah Blon

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 by Aquent Gymnasium

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 by Adrian Roselli

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 by Andy Hullinger

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 by Stephen Lindberg

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 Creating 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 Stunning 3D Text Effects appeared first on Speckyboy Design Magazine.

But it seems like these effects have always worked better in print design. While web designers have had access to floating images around text, other bells and whistles have required hacks. That’s changing, thanks to modern CSS and JavaScript.

Now it’s possible to place text on custom paths that closely resemble those seen in print. Even better is that you can add animation and hover effects to further enhance the experience.

The possibilities are endless. To prove our point, here are eight CSS and JavaScript snippets that demonstrate custom text paths. As you’ll see, the results can be quite impressive!

The post 8 CSS & JavaScript Snippets for Custom Text Paths 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 by Jonathan Davis

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 by Hakan Kösekadam

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 by Joshua Kleckner

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 by Blake Bowen

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 by David Conner

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 by Dannie Vinther

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 by Priscila Cunha

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 by Emil Devantie Brockdorff

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 by Mike

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 by Tommy Hodgins

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.

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 by Gayane Gasparyan

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 by Pete Barr

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 by Claire Larsen

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! by Jamie Coulter

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 by Daybrush

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 by Sarah Fossheim

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 by Mohammad H Alijany

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 by cpsdqs

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 effectively. 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.

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.

CSS media queries have long been the go-to tool. But it’s getting more difficult to account for evolving screen resolutions. If a device fails to match the viewport range you’ve set, the results can be less than ideal.

That’s where CSS clamp() can make a positive impact. It doesn’t rely on predefined viewport sizes. Instead, it provides a range of values and allows the web browser to scale an element as needed.

clamp() doesn’t necessarily replace the need for media queries. But it may well reduce the number of styles we place within them.

The following are basic examples of how clamp() can be used to produce better responsive designs. Let’s get started!

What Is CSS clamp()?

The concept of clamp() can be a bit confusing. But stripped down to the basics, it provides a way to combine the min() and max() functions into a singular line.

So, before we go any further, it’s important to note that clamp() is a means of setting a minimum and maximum value for an element. That could be text, the sizing of a container, or just about anything else that needs to be responsive.

A typical line could look something like this: font-size: clamp(1.125rem, 2vw, 1.5rem);

Note the first and last values. In this case, 1.125rem is the minimum value, while 1.5rem serves as the maximum.

Still with us? Great! Now, about that rascal in the middle…

The middle number above (2vw) is our preferred value. MDN defines it as: “The preferred value is the expression whose value will be used as long as the result is between the minimum and maximum values.”

As such, we can think of it as the border between two countries. Move to the left, and you’re in Portugal, where the minimum value applies. Go to the right, and you’re in Spain, where the maximum will be used.

The preferred value can be a constant number or a mathematical expression. This allows for fine-grain control over how it’s calculated.

But back to our example. Taking a cue from MDN’s documentation, our font size will initially be set at 1.125rem.

However, once our preferred value of 2vw is greater than 1.125rem, our text will scale up to the maximum of 1.5rem.

In practice, small screens will see the minimum value, while big screens get the maximum. The preferred value merely sets the threshold.

A Few Basic Examples of clamp()

Now that we know a bit more about what clamp() does, let’s take a look at it in action. The following are examples that demonstrate the function’s basic capabilities.

Fluid Typography That Adjusts to Screen Size

Creating responsive styles for text can get complicated. Staying with the desktop sizing may look overwhelming on mobile. But applying new sizing for each CSS media query means more maintenance. And getting the scaling just right can be a pain.

Thankfully, fluid typography is an area where CSS clamp() excels. The function allows text to scale based on the parameters you’ve set. Best of all, a single line of code replaces what used to require multiple instances.

Here, we’ve set our body and h2 text to scale based on the viewport. Large viewports will see bigger fonts. Meanwhile, the text shrinks accordingly on smaller screens.

Our body text will display between the defined minimum and maximum sizes (1.125rem – 1.5rem, or 18px – 24px). The h2 text has a min/max of 2rem – 2.75rem (32px – 44px).

See the Pen CSS clamp() Demo – Heading & Body Text by Eric Karkovack

A Container That Adjusts for Large Viewports

When dealing with responsive containers, we can’t forget about large screens. 1080p (1920×1080) is now serving as something of a minimum resolution for desktop and laptop devices. Thus, it’s important to consider how layouts impact these users.

A container that stretches the full width of the viewport can be cumbersome – particularly if it includes text. Having too many characters per line makes the text harder to read on large screens. Whereas this configuration is more desirable on mobile.

This example uses clamp() to improve the user experience across viewports. Small screens, where our maximum value of 90vw is greater than our 1100px preferred value, will receive a wide container.

On large screens, the container will display at its preferred value. This should make for easier reading.

Also of note is our minimum value of 40vw. It only comes into play on exceptionally large viewports. The value could be increased if you want to see it triggered sooner.

See the Pen CSS clamp() Demo – Container Width by Eric Karkovack

clamp() Down on Your Responsive Styles

As CSS evolves, it provides us with more advanced tools. They often increase efficiency and push more of the “dirty work” to browsers. clamp() certainly fits this mold.

In this case, it means having less code to maintain. By reducing the number of styles we place into media queries, clamp() makes our job easier. In addition, it keeps our designs looking good across devices – even those with unique viewports.

Best of all, it’s supported in all modern browsers. Therefore, it’s something you can immediately add to your workflow.

To learn more, please check out the resources below!

Further CSS clamp() Resources

• clamp() by MDN
• min(), max(), and clamp() CSS Functions by Ahmad Shadeed
• min(), max(), and clamp(): three logical CSS functions to use today by Una Kravets
• Intrinsic design, theming, and rethinking how to design with WordPress by Justin Tadlock
• Modern Fluid Typography Using CSS Clamp by Adrian Bece

The post Better Responsive Design With CSS clamp() appeared first on Speckyboy Design Magazine.

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.

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.

Gender

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 evoking 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.

The 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.

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.