Discover the best fonts websites created by professional designers. Get inspired and start planning your perfect fonts web design today!

Design Direction 008
Clone and Re-use these 5 unique text effects. 

How To Use Video
https://www.youtube.com/watch?v=nWuhiJK7-Gw

THANK YOU. 
Here's to 2020.

Joseph Berry® - Text Effects

Joseph Berry Text Effects

If you watch the tutorial, you'll notice that the best performance and sharpness of the lettering can only be achieved with an SVG.
That's actually the way Apple uses it as well. The disadvantage is that you have to export an extra SVG image for your own wording.

Animating text elements with scale does not work, because Chrome renders the font blurry 😟

Effect works well on mobiel too!

Apple.com Zoom In Typo Animation

Apple.com Zoom In Typo Scroll Animation

Memberstack

It's a cloneable FAQ section! There's not much to describe.

Cloneable FAQ

free-faq

Experimental site that demos z-axis scroll interactions using div blocks. Images and fonts blur when moved forwards or backwards on the z-axis but div blocks don't! Thanks for looking! :-) Jan 2022: z-axis transforms and perspective now a bit broken :-(

Quanto Font

Quanto

Recreation of: https://webflow.com/website/Open-Studio

1. To change the background-image go into the embed-code (inside the designer) and search and change the URL of the following:

bg = loadImage("https://i.postimg.cc/DwTMdBjn/Download.png")

2. To change the text that is being displayed go into the embed code (inside the designer) and search and change the following string saying "Get in touch" to whatever you wish.

  points = font.textToPoints('Get in touch', .....
}

Font-Distortion Effect on Hover

Font-Distortion

Hey designers 👋

We're super excited to announce FontInLogo.com with you today! 🤩Demystify famous brands font with FontInLogo.

FontInLogo helps you search and find a World Brands (and other) Logo with their font details.

A tool for everyone who tried to design a logo 

The idea of FontInLogo came up from our dealing team(@ azwedo.com) lecturing about the importance of well-known fonts. We started collecting data and ended up with a platform that lets you search brands and find out what font they are using. Fun right?

The platform is FREE to search for any Logo and find any Font used by world brands.

🥳Yes, anyone can join the FontInLogo community
So whether you’re new to design or consider yourself a pro — your contribution to submit a logo font(that’s not in our list) is welcome here.

We've built the platform from Zero to Hero in just 7 days, this is becoming our routine of building valuable products

Give it a try - Can't wait to see what you think!

Fontinlogo.com

Font in Logo

Font In Logo

Flow Keeper is the perfect website for Webflow designers and no-code developers who want to easily locate and sort over 1500+ tools, inspiration, typography and more resources.

Any feedback would be appreciated. Thank you!

Flow Keeper

Flow Keeper · 1500+ resources for Webflow

method zero

Method Zero by Pinkman is launching a new product where the guys will offer 3(!) design concepts to choose from and will build you up to a 6-block site in just 7 days and $1.5k.

Lite Method

Method Zero | Lite

Add a fun animated wave inside text using a small snippet of CSS. I used Alvaro Trigo's Codepen (https://codepen.io/alvarotrigo/pen/PoKMyzO) and was inspired by Van Schneider's Blog (https://vanschneider.com/blog/).

Sign up for the lesson: www.webflowtips.com/b/how-to-animate-a-wave-inside-text

If you have any questions feel free to comment.

P.S 🙂 🙌 - Like or follow if this was useful for you.

27 of 50

Wave animation inside text

Wave Text Animation

Master Flowmaker

Big Font Slider

Inspired by @ultimateuiux 

080 - 100 days of @webflow interactions

#80 Big Font Slider

The weight, color, scale, and rotation of the divs react with your mouse positioning.

Another one in my journey of learning code, particularly JS!

⚠️ YesCode: Code-heavy project! ⚠️

My take on SuperHi's reactive variable font tutorial:
https://library.superhi.com/posts/how-to-make-reactive-type-as-seen-on-the-airbnb-cereal-site

Which was inspired by Airbnb's page:
https://airbnb.design/cereal/scale/weight

Feel free to clone and enjoy!

Reactive Variable Font - Javascript

Reactive Variable Flower - Javascript

Preset to give you a starting point for your next website. Build in the "Perfect fourth" font scale.

Free to use, with love from Okayokay.dk

Perfect Fourth Font-Scale Preset

Perfect Fourth (Font-scale) Preset

A minimal two page  portfolio with Work, About and Email link as the primary nav. Just focus on the work highlights and key achievement to sell your service and expertise.

The CSS is not the best. Sorry.

Rey's Portfolio Project

Minimal Dark Portfolio Template

Devanesa is a font family based on the fascia of the school in my mother's village. Completely free for personal and commercial use, it tries t bring awareness about the seriousness of depopulation in the rural area of Spain.

TFG final

Devanesa: a font designed to bring awareness about depopulation in Spain

Of Matters's Workspace

Post Italic is an exploration and experimental graphic design resources for designers, studios and agencies. The catalogue include Fonts, Templates, Illustrations, Brand Guidelines and more.

Post Italic Type/Foundry

We’ve got something important to tell you about fonts and we think about it. And.. it’s not great

fuckhelvetica

F*ck helvetica

Dizzy Number

This IX is to celebrate we are half-way in our 100days @webflow IX challenge. It has been really hard to keep this pace. We even thought quitting on two occasions. But this will get to 100.

050 - 100 days of @webflow interactions