Soliloquy Blog

WordPress slider tips, Tutorials and Resources.
10 Sliders with Strong Typography

10 Sliders with Strong Typography

by Brenda Barron on December 10, 2018

Want to see some sliders with awesome typography? Strong imagery may be essential to a slider, but don’t underestimate the power of words. Well-designed typography can be the difference between a boring slider and one that makes conversions. Here’s what good typography can do.

  • Make a bolder statement than an image alone can
  • Call attention to important information
  • Highlight a call to action

We’ve collected a bunch of great examples so you can see exactly what we mean!

Blkout

Blkout's slider, with a large, bold, black-and-white design

This text is just awesome. The glitchy text set against a static monochrome background creates a cool and unique effect. Text animations need to be carefully implemented, and this is definitely a great example of it.

Existing While Black

Existing While Black's slider, showing a woman crossing a street behind very large font

Bigger is better, and this text that takes up most of the screen really makes a statement. It’s impossible not to take notice of this fullscreen slider. The text remains consistently sized between slides, which is good since it serves as your “Read More” link.

Hop Deco

Hop Deco's slider, with someone helping a little girl decorate a Christmas tree

Nothing complements good typography better than animations! The text is definitely the focal point of this slider, telling you about the brand and directing you towards the call to action. But the unique zoom animation and design are what really sets this slider apart.

Trampoline Park

Trampoline Park's slider, showing their large building on a dark background

The bold, slim font looks great here, and the big call to action on each slide is impossible to miss. And unlike many other designs, this slider makes sure the area the text is in isn’t cluttered by the background image. On each slide, the text is easily readable.

Rivian

Rivian's Slider, showing the interior of a nice car

This slider offers a good example of how to effectively use color in typography. The modern font is pretty strong on its own, but adding that splash of color to the header is what makes a visitor stop and look. Use consistent colors in your design, with secondary colors on graphics and text that you want to draw attention to!

Iglucraft

Iglucraft's slider, showing a hand-crafted cabin in from of a mountain

It’s always a good idea to find a less commonly used font with a unique design that represents your website. This header font is elegant and beautiful, and it makes a great pair with the other fonts on the page too! This charming little slider is definitely a great example of strong typography.

Clemens Hill

Clemens Hill's slider, showing a bottle of wine on a light, elegant background

The bolded but elegant serif text fits in really well with a site all about wine. You have your images on the left and a little blurb on the right, also with a beautiful typeface. The links and headers are set apart by being sans serif, so if you want to learn more, your eyes instantly find the call to action link.

Me and Mr. Darcy

Me and Mr. Darcy's slider, using a unique stylized font as a head for various articles

This isn’t a traditional slider, but it’s a cool idea to organize blog posts. The header fonts for each section are beautiful and pair well with the more readable body typeface. Even the images have unique font designs. And this slider includes a navigation block for each level so you’ll never get lost.

Fleur Moreau

Fleur Moreau's slider, showing a simple and minal wall decor: a small plant on a cube shelf

Beautiful and modern, this slider uses huge text to get its point across. Muted colors give contrast to the more vivid imagery, and plenty of animations ensure that this slider looks dynamic and interesting.

MakeReign

MakeReign's simple, elegant text lider, with a clean font in front of a nice grey background

If you’re creating a text slider, you’d better have a clean, beautiful font. MakeReign’s slider is simple, easy to read, and uses a modern font that just looks great. This is just what a text-based slider should look like.

Typography Can Make a Difference

When you’re creating a slider, make sure to include plenty of strong typography. Hunt down the perfect font, make sure it looks good with the ones on your website, and start crafting those attention-demanding slides. A picture is worth a thousand words, and choosing great images for your slider is important, but don’t forget to include well-designed text in your slider banners too!

Don’t forget to follow us on Facebook and Twitter for more WordPress tutorials!

Comments

    Russell Lundstrom

    December 15, 2018

    this is great. If you could do a tut on how to create a slider like Blkout, that would be very awesome!

    Reply

Leave a Reply

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

[i]
[i]