Test Your Web Typography In A Browser With Type Nugget

Designing type for the web is easier now than ever before. Custom web fonts and CSS3 properties make the process almost completely hassle-free.

Testing is still a laborious task that often requires many revisions. And with a tool like Type Nugget you can test your fonts live in the browser and even generate the LESS/SASS or CSS code – without writing a single line yourself!s

The free app is currently in a live beta version. If you sign up for a free account, you can save your custom themes and create different projects for testing different font styles.

type nugget homepage

In the right toolbar you’ll find many options for adjusting page fonts based on headers, paragraphs, hyperlinks, and ordered/unordered lists. Each font type has its own section with properties for changing the font color, size, weight, line height, and letter spacing.

Naturally you can also change the font family too. You can pick from any font in the Google Webfonts library and locally installed fonts on your system. This is so much easier than designing in Photoshop because you get to see how the fonts render live in a web browser.

Anonymous Type Nugget users can edit and adjust fonts to their liking, but without an account, you’ll miss a lot of great features. Type Nugget users can save individual themes and build a library of different type styles for many web projects.

With a free account, you can use the big “generate code” button to get your font styles in pure CSS or a preprocessing language like SASS or LESS. You can even get your code minified if you want it ready for production.

web fonts choice type nugget

Type Nugget is still in beta but I’m amazed at how much it can do. This is the most powerful browser-based type tool I’ve ever seen. If you hate tinkering with web fonts in CSS then Type Nugget offers a free visual editor with a huge library of typefaces at your disposal.

And if you like what you see, then sign up for a free account while it’s still in beta to make sure you get all the newest updates. If you ever have suggestions for the team you can reach out to share minor bugs or new ideas for the project.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail