Web designers who embrace web typography, experiment with it, and try new things in all of their designs; and those who ignore it like the plague, opting to use standard, web-safe font stacks with little variation.
The resources could help you improve your website typography.
There are some tools for building unique typography, references and articles that can teach you typographic principles, and lots of inspiration and news to keep you updated of web typography.
Web Font Services
Kernest
The Kernest is a web font service that uses OFL, GPL, GUST, and Creative Commons fonts, those with commercial licenses as well.
View Kernest Details
Fonts Live from Ascender
Ascender giving you their own web font service, Fonts Live. Ascender have over 110 typefaces available.
View Fonts Live from Ascender Details
TypeFront
The TypeFont is a great option if the fonts you want to use are not currently available by any of the other web font services. There is a free plan for low-traffic sites, and paid plans also.
View TypeFront Details
Typekit
The Typekit offers fonts from a type sellers and foundries, including The League of Movable Type, FontFont, and Veer. Typekit offer advanced control options for styling your fonts, infinite scalability, and a colophon also that tells your audience what fonts your site is using. Typekit has reasonable price, ranging from free for partial access up to $100/year for high-traffic sites.
View Typekit Details
Google Font API
You can browse all fonts from Google Font Directory through Google Font API. You can use all type of font on you website under an open source license and served by Google servers.
View Google Font API Details
Typotheque Web Fonts
The Typotheque giving their own web font service to make their fonts available for @font-face implementations. The advantage is that there is just a one-time license cost that can cover both print and web applications.
View Typotheque Web Fonts Details
Typography Tools
WP-Typography
WP-Typography is a WordPress plugin which help to create your standard WP typography more attractive. This plugin supports hyphenation, spacing control, intelligent character replacement (including quote marks, dashes, ellipses and math symbols), and CSS hooks for styling specific things (including ampersands, acronyms and numbers).
View WP-Typography Details
Flipping Typical
The Flipping Typical shows you sample text in a good variety of fonts which you already have installed on your computer. It is a good way to compare a bunch of fonts, side-by-side, all at once. Some of the fonts shown are web-safe.
View Flipping Typical Details
Typetester
The Typetester allow you compare up to three fonts, side-by-side, with whatever sample text you want. You can specify the baseline font size, typeface, size, leading, tracking, alignment, word spacing, decoration, color and background color to get a very accurate result of what your fonts will look like on the actual website.
View Typetester Details
WhatTheFont
The WhatTheFont is providing an easy way to find out what a particular font is. Just upload your font image or specify a URL and WhatTheFont will tell you what font is being used. This is a good way to find fonts that have been used in images or Flash files.
View WhatTheFont Details
Blind Text Generator
This dummy text generator will let you create not just lorem ipsum, but also a number of other dummy text types. You can format that text right within the generator (click on Advanced Options), and then copy the CSS also at the same time.
View Blind Text Generator Details
HTML Ipsum
The HTML-Ipsum is a lorem ipsum text generator specifically for web design. Instead of just giving you chunks of text, HTML-Ipsum can give you pre-formatted text such as paragraphs, ordered lists, empty tables, forms, and navigation lists. Pre-formatted text like this is a useful way to save time when building website mockups and initial designs.
View HTML Ipsum Details
CSS Type Set
CSS Type Set allow you to style a block of text and then copy the CSS. It is a simple CSS generator that is best for styling one font at a time. It allow you control the typeface, size, spacing, leading, decoration, and color.
View CSS Type Set Details
Typographic Grid
The Typographic Grid helps you to keep that vertical rhythm for you. The Typographic Grid is also includes a vertical grid as a guide for positioning both typography and other elements.
Typographic Grid
Font Burner
The Font Burner allow you to embed fonts on your websites using sIFR, using a graphical interface. There are more than 1000 fonts available through Font Burner, and there is also a WordPress plugin available.
View Font Burner Details
Typechart
The Typechart tool is leting you browse pre-formatted, web-safe fonts, and view them as they will shown on both a Windows PC and a Mac. You can sort through the fonts included based on size, typeface, and emphasis.
View Typechart Details
CSS with Vertical Rhythm
This tool can help you build CSS for typography that has a consistent vertical rhythm. Just enter the font family, base font size, base line height, and target font sizes and compute to get CSS for a consistent vertical rhythm.
View CSS with Vertical Rhythm Details
Baseline
The Baseline tool is a grid and typography framework that includes files to reset browser defaults and build a basic typographic layout. It is a great option for designers who ever want to use a grid layout and also want some help with designing the website’s typography.
View Baseline Details
Baseline Rhythm Calculator
This is a great vertical rhythm calculator. It will show you what different font sizes look like next to each other when set up with your established vertical rhythm. It is a good way to make sure all the font sizes you are using will look perfect.
View Baseline Rhythm Calculator Details
Typograph
The tool name Typograph letting you experiment with different scales and other elements of vertical rhythm. This tool includes a variety of traditional scales (including Le Corbusier and Fibonacci) also as other layout options.
View Typograph Details
Font Matrix
This tool shows the fonts included with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite, all in a grid that makes it easy to see which fonts are to be found on which types of computers.
View Font Matrix Details
Typography Resources & Articles
On Web Typography
Jason Santa Maria’s this article is based on A List Apart is a very comprehensive look at pairing typefaces in your website designs. It is a topic that is not discussed often but it is paramount to building great typographic designs on the web.
View On Web Typography Details
Thinking with Type
This website is companion to the book of the same title by Ellen Lupton. This website offers plenty of basic information on typography. While a lot of it is focused on print typography, plenty of the information included can be applied to web typography.
View Thinking with Type Details
Revised Font Stack
In this article discussing expanding the common web-safe CSS font stacks by exploring other commonly-installed fonts. It is also explore the font stacks of some popular websites, along with recommendations for how they might improve their stacks.
View Revised Font Stack Details
Typographic Contrast and Flow
This is a awesome guide for the principles of flow and contrast in web typography from WebDesignerWall. It breaks down these principles into several sections, including size, typeface/classification, color, and weight.
View Typographic Contrast and Flow Details
10 Great Tips for Improving Your Web Typography
This is a list of ten simple things for improve the typography in your website designs. It includes information on font, size, scale and hierarchy, leading and more.
View 10 Great Tips for Improving Your Web Typography Details
Nice Web Type
Nice Web Type has lots of tons of information on web typography implementation. They have “notes” about everything from getting started with web typography to using CSS @font-face. They are discussing trends and new ideas on a regular basis, and have a page devoted to what they consider some of the best fonts out there.
View Nice Web Type Details
The Elements of Typographic Style Applied to the Web
This thorough reference guide is for anyone who wants to learn not only the basics of good web typography, but advanced techniques and principles as well. It is split into chapters and sub-chapters, including horizontal and vertical motion, blocks & paragraphs, pagination, size, and a lot more. It is a work in progress, so expect more information to appear in the future.
View The Elements of Typographic Style Applied to the Web Details
12 Examples of Paragraph Typography
Jon Tan giving you this collection of sample paragraph formats. This is a great starting point for anyone designing a text-heavy website. So many web designers overlook all the possibilities that come with paragraph styling, and opt for more traditional, conservative options. This article is proving that it is not difficult to step out of the box and do something interesting with the paragraphs in your designs.
View 12 Examples of Paragraph Typography Details
Typography Trends, News and Inspiration
Typography for Headlines
The Elements of Design has a great gallery of headline typography. They are running the gamut from simple to complex, in a good variety of typefaces and styles. It is a best place to go if you’re looking for inspiration. They also have pull quotes with 20+ examples gallery.
View Typography for Headlines Details
I love Typography
I love typography is a great blog devoted entirely to typography. It discusses both design and business topics, from a professional standpoint. They got huge amount of archive, and there is plenty of information on current and past news and trends.
View I love Typography Details
Typophile
The Typophile is a forum for typeface enthusiasts and typographers. If you really want to know what is happening in the world of typography, The Typophile is the best place to look. You can also get help here related to typography.
View Typophile Details
We love typography
We Love Typography is a great gallery of typography, lettering, signage and other type. Users can submit images of type, and it is a best place to go for typography inspiration for your next project.
View We love typography Details
Typesites
The Typesites is a blog that showcase of great web typography designs on a regular basis. The websites they feature are diverse, but all include inspiration use of type.
View Typesites Details
Behind the Scenes of Exquisite Web Typography
This article looking at the typography behind A List Apart, breaking down the fonts and styles used for different parts of the site.
View Behind the Scenes of Exquisite Web Typography Details
Typographica
Typographica offering font type reviews, commentary and typography book reviews. The Typographica type reviews are very informative if you are looking for learn about what makes a good typeface.
View Typographica Details
Related posts:
Twitter Updates
Trackbacks For This Post