Typography is one of the most important things in a website. It delivers the feel and emotion of your brand, working with other elements of you web page. It’s critical to treat it as an essential part of the user experience, so in this post i`ve gathered some helpful web type tools for dealing with font sizes, line height, padding and hierarchy.
Typographic
Typographic is responsive typography made easy. Pick a few font stacks, set a few settings, and you’ve got beautiful responsive typography – it’s that easy.
Gutenberg
Flexible and simple–to–use web typography starter kit for web designers and developers. It’s a small step towards a better typography on the web. Beautiful typographic styles can be made by setting base type size, line-height (leading) and measure (max-width).
Typi
A sass mixin to make responsive typography easy.
Typebase
Typebase.css is a minimal, customizable typography stylesheet. It has both less and sass versions so it can easily be modified and merged into modern web projects. It provides all the necessary scaffolding for good typography without adding any aesthetics. It is built to be modified as projects evolve and grow, and plays nice with normalize.css.
Typeplate
Typeplate is a “typographic starter kit”. It doesn’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped–down Sass library concerned with the appropriate technical implementation of design patterns–not how they look.
Typesettings
Typesettings.css is the typography boilerplate for your minimal website or blog project. All typographic styles are inspired by traditional graphic design fundamentals—the boring stuff that you learn in Typography 101.
Rucksack
You can produce the “automagical” fluid typography thanks to a new, responsive property on the font size. You can get a start is as easy to specify responsive as a font size.
FlowType
Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size and subsequently the line-height based on a specific element’s width. This allows for a perfect character count per line at any screen width.
Lining.js
An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.
Letteringjs
Web type is exploding all over the web but CSS currently doesn’t offer complete down-to-the-letter control. So we created a jQuery plugin to give you that control.
Kerning.js
CSS, meet kerning. Kerning, meet CSS. Kern, style, transform, and scale your web type with real CSS rules, automatically.
slabText
Put simply, the script 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 pixel 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.
Responsive Measures
Reading is one of the most basic things we do on the web. CSS gives us control over font-size and line-height but we don’t have a good way to control the measure.
Blast.js
It separates text in order to facilitate typographic manipulation. It has four delimiters built in: character, word, sentence, and element. Alternatively, Blast can match custom regular expressions and phrases.
Fittextjs
It 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.
Normalize-OpenType.css
OpenType features make it possible for type designers to include language requirements, and typographic niceties—ligatures, alternate figures, small caps—within a font. These design decisions are one reason certain type families are much more useful and versatile than others, yet the features they include are usually ignored on the web.
Type Genius
This is a great, simple tool to find the perfect font combo for your next project.
Google Font Combination
There are over 650 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites. Part of the 25×52 initiative, this collaborative, ongoing project offers inspiration for using Google’s font library.
Type Scale
Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.
Free Book : Practical Typography
This is a bold claim, but I stand behind it: if you learn and follow these five typography rules, you will be a better typographer than 95% of professional writers and 70% of professional designers.
