I've been finding a lot of simple, yet valuable tools online lately. They each work in their own way to get the finer details into focus for designing websites, app or even typefaces. Some, for details that are often missed.

Type-Scale

A visual type scale for creating a typographic hierarchy preview.

http://type-scale.com/

Screen Shot 2015-10-06 at 4.42.34 PM.png

Typecast by Monotype

Use Typecast to create visual and semantic designs. Typecast works just like the web, with an infinite canvas. Design a working prototype using our simple visual controls then export production-ready HTML & CSS or share by URL. Test, share and export a style guide.

https://typecast.com/

Basehold by Dan Eden and Michael Wright

A quick, painless, Javascript-free baseline overlay.

Apply a consistent vertical rhythm in your type on the web with a baseline preview and settings.

http://basehold.it/

Image credit: https://kyledamken.wordpress.com/2014/05/16/new-terms-from-treehouse-css-foundations-part-3-background-and-borders-and-web-typography/ — Image credit: https://kyledamken.wordpress.com/2014/05/16/new-terms-from-treehouse-css-foundations-part-3-background-and-borders-and-web-typography/

Stringmaker by Nina Stoessinger

Stringmaker is a little online tool for generation of test strings that are useful in type design processes, most notably spacing and kerning. Stringmaker can be used to generate basic strings of characters that can then be copy-pasted into font editors or layout applications to test typefaces in progress.

http://ninastoessinger.com/stringmaker

Bourbon by Thoughtbot, Inc.

Sass mixin library which includes scaffold styles for typography output. Bitters are scaffold styles, variables and structure for Bourbon projects. Refills are Components and patterns built with Bourbon and Neat. They include type system definition.

All type is based on $base-font-sizewhich is set to 1em (16px) by default. The spacing around type is based on $base-line-height to keep a semi-baseline grid. All sizes are scaled up or down by a factor of 0.25.

http://bourbon.io/

Lettering.js

A jQuery plugin for radical web typography that expands styling on the web. Some examples of what can easily be done are: Kerning, Editorial Design, Manageable Code, Complete Control. They have a pretty cool gallery of examples on their site, too.

http://letteringjs.com/

Typesample

Type Sample is a tool for identifying and sampling webfonts.

I found this tool while researching a typeface designer who has a pro account using this service to try out his own typefaces as he is designing. I thought it was an interesting use case, considering its simplicity. It's also an easy way for him to display their use in many contexts.

You can use this on any website using a bookmarklet, editing and/or saving a sample. Give it a try.

http://www.typesample.com/