Inspiration for Letter Effects
In Playground, by Manoela Ilic
A set of inspirational letter animations for display typography effects powered by anime.js.
typography
Fancy SVG Letter Animation
In Playground, by Manoela Ilic
An experimental SVG letter animation based on the Dribbble shot “Shading Letters in Illustrator” by Jake Bartlett. Powered by Julian Garnier’s anime.js.
Creative SVG Letter Animations
In Playground, by Luis Goncalves
An experimental plugin for animating SVG letters using Segment. The idea is to animate the path strokes of an interesting display font in a creative way.
Inspiration for Text Styles and Hover Effects
In Playground, by Manoela Ilic
A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.
How to Create (Animated) Text Fills
A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.
Techniques for Creating Textured Text
In Tutorials, by Sara Soueidan
In this article we’ll explore all the current techniques for creating image or texture filled text and show you how to apply them.
Techniques for Responsive Typography
In Articles, by Sara Soueidan
When it comes to responsive type on the web, there’s more to do than just resizing the text’s container and having the text reflow inside of it. This in-depth article covers various techniques for making text responsive.
Animated Opening Type
In Tutorials, by Diego Pardo
A tutorial on how to create an interesting animated 3D opening type effect with pseudo-elements, CSS transforms and transitions. The idea is based on Edenspiekermann’s Open Type project and it’s a very creative way to display and play with letters.
Text Opening Sequence with CSS Animations
In Playground, by Manoela Ilic
A simple and fun text opening sequence effect with blurry letters using CSS animations.
A Creative Year: Distinctive Web Designs of 2012
In Articles, by Manoela Ilic
An inspirational collection of the most impressive and distinctive web designs from the year 2012.
Mobile Design Typography is Vitally Important … and Challenging
In Articles, by Carrie Cousins
One of the emerging challenges for web designers is creating web typography that works in the mobile environment as well. But it can be difficult, and there are many things to consider. The keys are to focus on readability, contrast, space and responsiveness.
Heading Set Styling with CSS
In Tutorials, by Kitty Giraudel
In this tutorial we will create a couple of heading styles to get your creative juices flowing for your next project. Make heading styles work by applying the right combinations of colors, fonts and decoration.
Make a Statement with Type
In Articles, by Carrie Cousins
Font choices can have an impact on how your message is communicated and how people feel about the words on the page.
Creative Web Typography Styles
In Tutorials, by Manoela Ilic
Let’s create some interesting web typography effects with several CSS techniques and the help of lettering.js.
I Love Script Fonts (Here’s Why)
In Articles, by Carrie Cousins
Script fonts, when used in moderation, can add extra flair and an unexpected twist to design projects.
Line That Up: Proper Alignment in Web Design
In Articles, by Carrie Cousins
Proper alignment techniques for text and other elements can add punch and readability to your website.
How Web Design Has Changed Print
In Articles, by Carrie Cousins
Not only do web designers learn from their print peers, but print design has evolved a great deal thanks to web design.
Making Room to Breathe: Wrapping Text Around Elements
In Articles, by Carrie Cousins
Text wrap can be a useful tool when embedding images into blocks of text and when used properly can add to your site’s readability.
