Tame Your Fonts: 21 Essential Web (Responsive) Typography Tutorials and Tools

Typography-Tutorials-14.jpg

They say the typography of a website matters big time. Today we’re gonna present you the most essential typography tutorials and tools to put up a great font combination and special effects using HTML5/CSS3. Most importantly, controlling the typography for responsive web design, we got that covered. They’re not just about the typography itself but more than combining them with the page/column layout to get a great result.

You May Also Like:

The Basic Web Typography Guidelines and Tools

The following two are more like a technical guide but you can easily get the idea, why not start off with the baseline/grid in mind. This can help you build a great typography that fits the layout and acceptable by majority of viewers.

Technical Web Typography: Guidelines and Techniques

Typography Tutorials

How To Create Great Web Typography in 10 Minutes

Typography Tutorials

TypeCastApp – Build Typography Made Super Easily

Typography Tutorials

TypeTester – Compare Screen Type

Typography Tutorials

WebType – Font Swapper to Easily Preview

Typography Tutorials

WhatTheFont

Typography Tutorials

Baseline Rhythm Calculator

Typography Tutorials

EM Calculator

Typography Tutorials

Typography Effects Tutorials with HTML5/CSS3

Create Attractive Web Typography with CSS3 and Lettering.js

Typography Tutorials

Typography Effects With CSS3 And jQuery

Typography Tutorials

WebTypographyfortheLonely – HTML5/JS Effect Showcase

Typography Tutorials

Interactive Typography Effects with Html5

Typography Tutorials

Typographic Effects in Canvas

Typography Tutorials

Control Typography in Responsive Design

Responsive Typography: The Basics

Typography Tutorials

Handling typography for responsive design

Typography Tutorials

Build a responsive site in a week: typography and grids

Typography Tutorials

Tools for Responsive Typography and Effects

Lettering.js

Typography Tutorials
A super great jQuery plugin to manipulate your typography element. Play around with it and you can just forget to use images again. And many of the following plugins are based on Lettering.js.

FitText

Typography Tutorials
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

SlabText

Typography Tutorials
SlabText splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.

ArcText.js

Typography Tutorials
Arctext.js is a jQuery plugin that let’s you do exactly that. Based on Lettering.js, it calculates the right rotation of each letter and distributes the letters equally across the imaginary arc of the given radius.

Typography Tutorials
Kerning enables you to manipulate singe letters in a word, in many different ways.
☺Medley Web Design Blog☺

Leave a Comment