Type Nugget: Good Typography is About Finding the Right Playground

This is a golden era for web typography – in relative terms at least.

After spending most of two decades working within the tiny design sandpit of Times, Helvetica, Arial and Courier, we now have the facility to embed almost any font we like on a page or app (without needing a flashy hack either).

Have our tools caught up? Probably not.

While online type services offer thousands of free embeddable fonts, experimenting with those fonts in Sketch, Illustrator, Photoshop or even XD is hardly seamless.

And good typography is so often about trial and error. While sound typographic principles will always help to guide you, lots of fantastic type combinations shouldn’t work so well in theory.

So here’s a promising new free tool to help your typographical tweaking.

Type Nugget

Type Nugget is a handy web app designed to be that place to play and experiment. It brings together an extensive external font list with robust CSS controls to let you tune your way to attractive type. This is a compl

The UI

The Type Nugget UI is divided into left and right halves – live preview on the left, controls the right. There are five fairly sensible categories for your type styling, nicely organized into an accordian menu.

1. Global type styles: Including background color
2. Headings: H1 - H6
3. Paragraphs: Base text, Strong, Emphasis
4. Links: Hover, Active, Visited
5. Lists: Order lists, Unordered lists & List items

Each accordian panel offers all the relevant CSS text properties you’d want to have access to including font-style to letter-spacing to text-align to text-transform.

Importing External Fonts

For me, the most interesting part of Type Nugget is being able to play with fonts. Adding fonts to your collection is easy. Hit the ‘Font-family’ dropdown to open the ‘Select Theme Fonts’ option.

This launches a scrolling modal window that lets you browse hundreds of fonts and collect the ones you like. As far as I can tell, Type Nugget currently only offers Google Fonts – though there’s nothing stopping them from adding other font services in future. Your fonts collect at the top.

Continue reading %Type Nugget: Good Typography is About Finding the Right Playground%

by Alex Walker via SitePoint