Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
</head>
<body>
​
<h1>A collection of great monospaced typefaces</h1>
​
<script id="template" type="text/x-handlebars-template">
{{#each}}
<typeface>
<typeface-name>{{name}}</typeface-name>
<typeface-links>
{{#each links}}
<typeface-link>
<a href="{{this}}">{{plusOne @index}}</a>
</typeface-link>{{/each}}
</typeface-links>
<typeface-fonts>{{fonts}}</typeface-fonts>
<typeface-body>{{notes}}</typeface-notes>
​
</typeface>
{{/each}}
</script>
​
<div id="outlet"></div>
​
<script>
    // {
    //  name: ''
    //  fonts: '',
    //  links: ['']
    // },
var typefaces = [
{
    name: 'Monosten A',
    links: ['http://www.colophon-foundry.org/fonts/monosten/a']
}, {
    name: 'Apercu Mono',
    fonts: '1 weight, no bold nor italic',
    links: ['http://www.colophon-foundry.org/fonts/apercu/mono']
}, {
    name: 'Archive Mono',
    fonts: '1',
    links: ['http://www.colophon-foundry.org/fonts/archive/mono']
}, {
    name: 'Anonymous Pro',
    links: ['http://www.marksimonson.com/fonts/view/anonymous-pro'],
    fonts: '2 weights with bold and italic'
}, {
    name: 'Botanika',
    links: ['https://www.suitcasetype.com/botanika/styles'],
    fonts: '3 weights with bold and italic'
}, {
    name: 'Consolas',
    links: []
}, {
    name: 'Courier Prime',
    links: ['http://quoteunquoteapps.com/courierprime/'],
    fonts: '2 weights, bold and italic',
}, {
    name: 'DejaVu Sans Mono',
    links: []
}, {
    name: 'Dispatch Mono',
    links: ['http://www.webtype.com/font/dispatch-mono-family/'],
    fonts: '2 weights, bold and italic.',
    notes: 'Dispatch Mono is a distinctly angular monospaced typeface and an outgrowth of Cyrus Highsmith’s Dispatch family. Building on the original idea of Dispatch as an industrial, foursquare slab-serif for text and display, Dispatch Mono stands up on its own, reinforcing the repetitive, geometric forms of Dispatch and adding references to typewriter fonts and computer code. Dispatch Mono features an extra large x-height, similar to our Reading Edge series of typefaces, that, along with the generous spacing, make it suitable for very small type on screen down to 9px. Font Bureau, 2012',
    foundry: ''
}, {
    name: 'Droid Sans Mono',
    links: []
},{
    name: 'Fantasque Sans Mono',
    links: ['https://github.com/belluzj/fantasque-sans']
}, {
    name: 'Fira mono',
    links: [
    'http://www.carrois.com/fira-3-1/',
    'http://www.fontsquirrel.com/fonts/fira-mono'
    ],
    notes: '',
    foundry: ''
}, {
    name: 'Founders grotesk mono',
    links: [],
    notes: '',
    foundry: ''
}, {
    name: 'Incolsolata',
    links: []
}, {
    name: 'Input',
    links: ['http://input.fontbureau.com/'],
    notes: '',
    foundry: ''
}, {
    name: 'Lucida Console',
    links: []
}, {
    name: 'Letter Gothic Std',
    links: []
}, {
    name: 'Monaco',
    links: []
}, {
    name: 'Monosten',
    links: ['http://www.colophon-foundry.org/fonts/monosten/a'],
    notes: '',
    foundry: ''
}, {
    name: 'M+ 1m',
    links: []
}, {
    name: 'Mensch',
    links: []
}, {
    name: 'Menlo',
    links: []
}, {
    name: 'Maison mono',
    links: [],
    notes: '',
    foundry: ''
}, {
    name: 'Nitti',
    links: ['http://www.boldmonday.com/en/nitti/', 'http://www.webtype.com/font/nitti-family/'],
    notes: '',
    foundry: ''
}, {
    name: 'OfficeSansMono',
    links: [],
    notes: '',
    foundry: ''
}, {
    name: 'Pressura Mono',
    links: [],
    notes: '',
    foundry: ''
}, {
    name: 'Range Mono',
    links: ['https://okgriffin.com/range-mono/'],
    notes: '',
    foundry: ''
}, {
    name: 'Replica mono',
    links: [],
    fonts: 'Only regular.',
    notes: '',
    foundry: ''
}, {
    name: 'Source Code Pro',
    links: [],
    notes: 'By Adobe.'
}, {
    name: 'Triplicate',
    links: ['http://practicaltypography.com/triplicate.html', 'http://mbtype.com/pdf/triplicate-type-specimen.pdf'],
    notes: 'By Matthew Butterick. Previously called Alix FB.'
}];
</script>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
oskarpro
0viewers