Typography

From Things and Stuff Wiki
Revision as of 14:04, 30 December 2012 by Milk (talk | contribs) (→‎Slab serif)
Jump to navigation Jump to search


Basics

Articles

Video

Forum

ANSI

Unicode

mirroring char in brackets: (‮‮test (

Fonts

Tools

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

Web

Historic

Proprietary

Free

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

Large repos

Smaller collections

Sans-serif

heading;

Serif

Slab serif

Trocchi??

Terminal

  • proggy_fonts - Monospaced Bitmap Programming Fonts. Each font only comes in one size that it looks good at. The ttf fonts should also be used at their intended point size as they are basically conversions of the pixel based bitmap versions. The fonts were optimized while coding in C or C++... for this reason, characters like the '*' were placed vertically centered, as '*' usually means dereference or multiply, but never 'to the power of' like in Fortran.
  • Silkscreen is a four member type family for your Web graphics created by Jason Kottke. Silkscreen, with both Mac and Windows versions, is free for personal and corporate use. There is more information about Silkscreen, including terms of use, in the FAQ below.

Modernist/techno

Other

Microsoft

Personal

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;
}

License

Repos, etc.

Tools

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

Kerning

Webfont icons

Guides

Sets

You should be using a generator tool or service to save on font file size for production.

  • 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. OpenType file for mockups or drop in the @font-face code into your CSS. Designed to work on web sites at sizes down to 18 pixels, but best at higher than 24 pixels.
  • iconmonstr - Free simple icons for your next project.
  • Meteocons is a set of weather icons, it containing 40+ icons available in PSD, CSH, EPS, SVG, Desktop font and Web font. All icon and updates are free and always will be.
  • Typicons are free-to-use vector icons embedded in a webfont kit for easy use in your UI, whether it be on the web or in a native application.
  • The Noun Project is building a global visual language that everyone can understand. We want to enable our users to visually communicate anything to anyone.
  • Batch - A lovingly designed and crafted suite of 300+ icons for web and user interface design. Each icon in the Batch PSD is a single shape layer, meaning they can be scaled up—or down—without loss of quality. The download includes the Batch PSD, SVGs (128x128) and PNGs (16x16, 32x32, 64x64).

$;

Generators

  • Fontello - icon fonts generator
  • IcoMoon - Crowse and select icons to download them or make a font. You can import SVG images or fonts

See also HTML/CSS#Buttons

Support

Crossbrowser

Examples

Responsive

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

jQuery

FitText

  • 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' })

jquery.textFit

Units

Set p size first or use 100% for the usual browser default (16px). 

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=7025"