Typography

From Things and Stuff Wiki
Revision as of 19:31, 11 September 2012 by Milk (talk | contribs) (→‎Sans-serif)
Jump to navigation Jump to search


Basics

Articles

Video

Forum

Fonts

Historic

Tools

  • font-manager - A font management application for the GNOME desktop

Web

Free

Places with lots of free (and other) fonts. To be categorised.

Large repos

Smaller collections

Sans-serif

heading;

Serif

Slab serif

Terminal

Modernist/techno

Other

Microsoft

Web fonts

@font-face {
  font-family: 'Font Name';
  src: url('library/fonts/font-name.eot');
  src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
  url('library/fonts/font-name.woff') format('woff'),
  url('library/fonts/font-name.ttf') format('truetype'),
  url('library/fonts/font-name.svg#font-name') format('svg');
  font-weight: normal;
  font-style: normal;
}

Repos, etc.

Tools

  • Fontue is a Rack-based, open-source, web font server built for Kernest.com

Kerning

Webfont icons

Guides

Sets

  • Modern Pictograms is a typeface for interface designers and programmers. Designed in early 2011 for the Flatfile Wordpress theme, the pictograms stay sharp when used large or small. Install the OpenType file for Photoshop mockups and drop in the @font-face code into your CSS to embed them right in your Web page. Designed to work on web sites at sizes down to 18 pixels, but best at higher than 24 pixels.

Examples

Responsive

vw, vh, vmin: ie and chrome, fallback with fittext.js

jQuery

  • FitText - Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
$("#responsive_headline").fitText();

$("#responsive_headline").fitText(1.2); // Turn the compressor up   (text shrinks more aggressively)
$("#responsive_headline").fitText(0.8); // Turn the compressor down (text shrinks less aggressively)

$("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })

Units

font-size: 62.5%;
  set 1em equal to 10px

The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that.

Scale

  • traditional scale (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72)
  • Fibonacci sequence (e.g. 16 – 24 – 40 – 64 – 104)

copy font size

  • x1.5 line height
  • x27.8 line length

Kerning

Software

Management

Creating

Symbols

ASCII

JS

Software

  • FontForge - An outline font editor that lets you create your own postscript, truetype, opentype, cid-keyed, multi-master, cff, svg and bitmap (bdf, FON, NFNT) fonts, or edit existing ones. Also lets you convert one format to another.

Testing

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=Typography&oldid=4475"