Typography
See also Data#Encoding
Formats
- https://github.com/robey/font-problems - a command-line tool for reading and writing console bitmap fonts. These are fonts described by a rectangular pixel matrix, used for small hardware projects like light-up signs or low-resolution terminals.
PSF
- https://en.wikipedia.org/wiki/PC_Screen_Font - a bitmap font format currently employed by the Linux kernel for console fonts. Documentation of the PSF file format can be found within the source code of the Linux Kernel.
- NAFE - not a consolefont editor, but a toolset to translate psf format consolefonts into text files and text files into psf files. the advantage is that you can edit the font in the text file easily with any text editor (not provided by nafe)
BDF
- https://en.wikipedia.org/wiki/Glyph_Bitmap_Distribution_Format - BDF, by Adobe is a file format for storing bitmap fonts. The content takes the form of a text file intended to be human- and computer-readable. BDF is typically used in Unix X Window environments. It has largely been replaced by the PCF font format which is somewhat more efficient, and by scalable fonts such as OpenType and TrueType fonts.
PCF
TrueType
OpenType
Basics
to resort
- HTML5 Rocks: Quick Guide to implement webfonts via @font-face - HTML5 Rocks - Aug. 2, 2010
- The history of a model for fonts on the Web - w3c talk
- Wikipedia: Web Open Font Format
- @font-face generator - Font Squirrel service for converting to webfonts
- sfnt2woff - convert existing TrueType/OpenType fonts to WOFF format
- Microsoft: The New Web Typography - -font-feature-settings
Articles
- Web Design is 95% Typography - iA, Oct 2006
- Typographic Design Patterns and Best Practices
- http://coding.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/
- 50 Helpful Typography Tools And Resources - May 6th, 2010
- The Perfect Paragraph - Nov 29th, 2011
- One More Time: Typography Is The Foundation Of Web Design - July 24th, 2012
- http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/
- http://www.smashingmagazine.com/2010/11/04/best-practices-of-combining-typefaces/
- http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography
Video
Forum
Type
- http://en.wikipedia.org/wiki/Roman_type
- http://en.wikipedia.org/wiki/Italic_type
- http://en.wikipedia.org/wiki/Oblique_type
Antiqua
Serif
- https://en.wikipedia.org/wiki/Georgia_(typeface) - similar to timew new roman but with wider serifs
- https://en.wikipedia.org/wiki/Computer_Modern - Donald Knuth, TeX
- Calluna - exljbris
- "PT Serif"
- http://en.wikipedia.org/wiki/Bodoni - modern
Baskerville
- http://en.wikipedia.org/wiki/Baskerville is a transitional serif typeface designed in 1757. 'winner' of NYT gravitas test
- http://fontslate.info/typefaces/baskerville.html
- http://klepas.org/openbaskerville/
- http://www.fontspace.com/open-baskerville-project/open-baskerville
- http://www.impallari.com/projects/overview/libre-baskerville
- http://www.google.com/fonts/specimen/Libre+Baskerville3
- http://www.fontsquirrel.com/fonts/libre-baskerville
Sans-serif
- Roboto - Google’s signature family of fonts, the default font on Android and ChromeOS, and the recommended font for Google’s visual language, Material Design.
- http://en.wikipedia.org/wiki/Helvetica - Grotesque sans serif classic
- Smelvetica - Helvetica the way it was intended to be. - a font for a more civilized time. Identifiable by its infamous sunken t, smelvetica ensures that your brand and message will always be eye catching, and unique. [10]
- B612 - a highly legible open source font family designed and tested to be used on aircraft cockpit screens. [14]
Humanist
- http://en.wikipedia.org/wiki/Lucida_Grande - Almost all glyphs in Lucida Grande (and Lucida Grande Bold) look identical to their matching counterparts in Lucida Sans (and Lucida Sans Demibold) as well as Lucida Sans Unicode
- http://en.wikipedia.org/wiki/Segoe - used by Microsoft
- Inter UI - a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens. The family features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates that adjusts punctuation depending on the shape of surrounding glyphs, slashed zero for when you need to disambiguate "0" from "o", tabular numbers, etc. [17]
Heading
- http://www.fontsquirrel.com/fonts/muli
- Trade Gothic Bold"
Slab serif
Monospace
- Inconsolata is a monospace font, designed for code listings and the like, in print. First and foremost, Inconsolata is a humanist sans design. I strove for the clarity and clean lines of Adrian Frutiger's Avenir (the lowercase "a", in particular, pays homage to this wonderful design), but also looked to Morris Fuller Benton's Franklin Gothic family for guidance on some of my favorite glyphs, such as lowercase "g" and "S", and, most especially, the numerals. Designing a monospace font poses unique challenges. I have carefully studied many other monospaced fonts to see how they solve these problems. Many of the available monospace fonts are adaptations of existing proportionally-spaced fonts, but some, such as Letter Gothic, draw strength from being their own designs. I hope Inconsolata upholds that tradition.
- http://en.wikipedia.org/wiki/Inconsolata
- slightly too wide?
- https://en.wikipedia.org/wiki/Menlo_(typeface) - a monospaced sans-serif typeface designed by Jim Lyles. The face first shipped with Mac OS X Snow Leopard. Menlo is based upon the Open Source font Bitstream Vera and the public domain font Deja Vu.
- http://larsenwork.com/monoid - Monoid is customizable and optimized for coding with bitmap-like sharpness at 12px/9pt even on low res displays.
- https://github.com/rbanffy/3270font - A 3270 font in a modern format
Bitmap
- https://bitbucket.org/ZyX_I/bitmap-font-patcher - Font patcher for powerline that patches BDF and PSF fonts
- Terminus Font is a clean, fixed width bitmap font, designed for long (8 and more hours per day) work with computers. Version 4.38 contains 879 characters, covers about 120 language sets and supports ISO8859-1/2/5/7/9/13/15/16, Paratype-PT154/PT254, KOI8-R/U/E/F, Esperanto, many IBM, Windows and Macintosh code pages, as well as the IBM VGA, vt100 and xterm pseudographic characters. The sizes present are 6x12, 8x14, 8x16, 10x18, 10x20, 11x22, 12x24, 14x28 and 16x32. The styles are normal and bold (except for 6x12), plus EGA/VGA-bold for 8x14 and 8x16.
- https://github.com/sunaku/tamzen-font - Bitmap programming font based on Tamsyn
- https://sourceforge.net/projects/termsyn/ - Clean, monospaced bitmap font based on Terminus and Tamsyn.
- Gohufont is a monospace bitmap font well suited for programming and terminal use. It is intended to be very legible and offers very discernable glyphs for all characters, including signs and symbols. The small 11 px version is perfect for laptops and netbooks as it enables to fit more text into their small screens. The 14 px is ideal for desktop screens where you sit farther away from it and the 11 px would be too small.
- ProFont is a small bitmap font which is absolutely great for programming. It was made for Macintosh computers, but now it's also available for Windows and Linux/UNIX X Windows.
- bold letters touch (or merge..)
- 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.
- tom-thumb.bdf - A very tiny, monospace, bitmap font
- MonteCarlo is a bitmap font suitable for code editors. All the characters have the same width, which is ideal for alignment. It is loosely derived from the look of the Monaco screen font that was available on the old MacOS systems. Some changes have been made to make it easier to differentiate certain symbols.
- The M+ OUTLINE FONTS are distributed with proportional Latin (4 variations), fixed-halfwidth Latin (3 variations) and fixed-fullwidth Japanese (2 Kana variations) character set. 7 weights from Thin to Black are included, but fixed-halfwidth Latin with 5 weights from Thin to Bold.
- http://artwizaleczapka.sourceforge.net/ - inc. lime
- https://github.com/phallus/fonts - Personal mod of lime with better kerning, more distinguished characters, and powerline/icon support.
- https://github.com/benwr/glean - beased on neep
- https://github.com/josuah/miniwi - smaaall
- unscii - a set of bitmapped Unicode fonts based on classic system fonts. Unscii attempts to support character cell art well while also being suitable for terminal and programming use. [26] [27]
- Unicode VGA - a Unicode VGA font for X11 and console. It is primarily intended to be the single source of fonts for console and for XDosEmu. The font (u_vga16) is distributed in BDF format, and can be used in X11 as is. For use on console, the bdf2psf.pl script is included, which performs (BDF+SFM)->PSF conversion, using .sfm file as encoding table.
- Char8.js - 8-bit Unicode Character Generator. General purpose 8-bit characters for the 21st century.
- http://asdasd.rpg.fi/~svo/glasstty/ - Hacking with Style: TrueType VT220 Font
- https://github.com/turquoise-hexagon/cherry - yet another bitmap font, made for latin 1
Modernist/techno
- http://www.dafont.com/symtext.font?fpp=50&sort=date
- http://www.dafont.com/stitches.font
- http://www.dafont.com/imagine-font.font
- http://www.dafont.com/blox.font
- http://www.dafont.com/hexagon.font
- http://www.dafont.com/particulator.font
- http://www.dafont.com/grapple-brk.font
- http://www.dafont.com/simpletype.font
- http://www.dafont.com/supreme-fontaliciou.font
- http://www.dafont.com/demon-cubic-block-f.font
- http://www.dafont.com/quadro.font
- http://www.dafont.com/square-one.font
- http://www.dafont.com/smprvl.font
- The Mystery Font That Took Over New York - The New York Times - Choc is far from the most popular typeface on the storefronts of New York, but it can still be found everywhere and in every borough. It’s strewn on fabric awnings and etched in frosted glass. It gleams in bright magenta or platinum lighting. It’s used for beauty salons, Mexican restaurants, laundromats, bagel shops, numerous sushi bars. It may be distorted, stacked vertically, or shoehorned into a cluster of other typefaces. But even here Choc remains clear and articulate, its voice deep and friendly, its accent foreign, perhaps, yet endearing. [29]
- http://www.2ality.com/2012/12/new-samuel.html - morse code inspired
- Optician Sans - A free font based on the historical eye charts and optotypes used by opticians world wide. [30]
Cursive
Arabic
Other
- http://www.tug.dk/FontCatalogue/ - LaTeX fonts
- http://www.pgdp.net/c/faq/font_sample.php?compare=Arial - OCR proofreading
- http://www.cbrd.co.uk/fonts/ - transport
Comic
- https://en.wikipedia.org/wiki/Comic_Sans - a sans-serif casual script typeface designed by Vincent Connare and released in 1994 by Microsoft Corporation. It is a casual, non-connecting script inspired by comic book lettering, intended for use in informal documents and children's materials. The typeface has been supplied with Microsoft Windows since the introduction of Windows 95, initially as a supplemental font in the Windows Plus Pack and later in Microsoft Comic Chat. Describing it, Microsoft has explained that "this casual but legible face has proved very popular with a wide variety of people." The typeface's widespread use, often in situations for which it was not intended, has been criticized.
- Get Comic Neue - Comic Sans wasn’t designed to be the world’s most ubiquitous casual typeface1. Comic Neue aspires to be the casual script choice for everyone including the typographically savvy. The squashed, wonky, and weird glyphs of Comic Sans have been beaten into shape while maintaining the honesty that made Comic Sans so popular. It's perfect as a display face, for marking up comments, and writing passive aggressive office memos. [36] [37]
- https://github.com/belluzj/fantasque-sans - A programming font, designed with functionality in mind, and with some wibbly-wobbly handwriting-like fuzziness that makes it unassumingly cool.
Emoji
to sort
- http://www.dafont.com
- http://fontawesome.io
- http://ionicons.com
- https://github.com/chrissimpkins/codeface
- https://github.com/Tecate/bitmap-fonts
- https://github.com/brabadu/awesome-fonts
Microsoft
IBM
- https://www.ibm.com/plex [38]
- https://github.com/IBM/type - The package of IBM’s new typeface, IBM Plex, and accompanying typography code.
Fonts
*nix
To install fonts system-wide (available for all users), move the folder to the /usr/share/fonts/ directory. To install fonts for only a single user, use ~/.fonts/ instead.
Then update the fontconfig font cache:
fc-cache -vf
Windows
Tools
- font-manager - A font management application for the GNOME desktop
- http://manpages.ubuntu.com/manpages/hardy/man1/defoma.1.html - debian font app.
- http://unixhelp.ed.ac.uk/CGI/man-cgi?xlsfonts+1 - list x fonts
- http://typezebra.com/ - see all locoal fonts in browser
Web
- http://justineo.github.io/fi/ - font info bookmarklet
Font stack
Ampersand
- http://css-tricks.com/using-the-best-ampersand-available/
- http://simplebits.com/notebook/2008/08/14/ampersands-2/
- http://floatleft.com/notebook/a-better-best-ampersand
- http://www.smashingmagazine.com/2008/08/15/ampersands-with-attitude/
- http://blog.spoongraphics.co.uk/articles/the-funkiest-ampersands-you-have-ever-seen
Repos and foundries
Places with lots of free (and other) fonts. To be categorised.
Large repos
- http://openfontlibrary.org/
- http://www.dafont.com/
- http://www.exljbris.com/
- http://www.fontex.org/free.html
- http://www.fontyukle.net/en/
- http://www.1001freefonts.com/
foundry;
Smaller collections
- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_fonts - ofl licensed
- http://theleagueofmoveabletype.com/
- http://www.feorag.com/freestuff/
- http://iginomarini.com/fell/the-revival-fonts/
- http://arkandis.tuxfamily.org/adffonts.html
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; }
- Font Squirrel: @font-face Kit Generator - Create font set to cover all browsers.
- Web Font Performance: Weighing @font-face Options and Alternatives - Feb 27th, 2012 - really good!
- stackoverflow: @font-face: bold in FF is bolder than in Chrome
License
Repos, etc.
- http://google.com/webfonts
- https://developers.google.com/webfonts/docs/webfont_loader
- http://sachagreif.com/google-webfonts-that-dont-suck/
- http://sachagreif.com/more-google-webfonts-that-dont-suck/
- http://hellohappy.org/beautiful-web-type/ - google web fonts showcase
- good web fonts - blog
- Google Noto Fonts [43]
- http://ranf.tl/2014/12/23/self-hosting-google-web-fonts/ [44]
- https://femmebot.github.io/google-type/ [45]
Tools
- http://www.wordmark.it/ - previews
- http://somadesign.ca/projects/fontfriend/ - bookmarklet
- Fontue is a Rack-based, open-source, web font server built for Kernest.com
- Responsive Type References - reference for comparing responsive use of [web]fonts
- https://github.com/KyleAMathews/typefaces - NPM packages for Open Source typefaces — making it easier to self-host webfonts.
Kerning
Webfont icons
See also Graphics#Icons
- Avoiding the blurs: web font icon rendering - 2 July, 2012
- http://functionn.in/2012/11/the-best-free-iconic-web-fonts.html - large number of examples
- http://icomoon.io/ - generator and sets
- http://css-tricks.com/examples/IconFont/
- http://blog.fogcreek.com/trello-uses-an-icon-font-and-so-can-you/
Guides
- How to make your own icon webfont - Jan 2, 2012
- Make a dingbat font with Inkscape
- YouTube: How to Make a Font with Inkscape 0.47
Sets
You should be using a generator tool or service to save on font file size for production.
- GlyphSearch - Search for icons from Font Awesome, Glyphicons, IcoMoon, and Ionicons
- Font Awesome - The iconic font designed for use with Twitter Bootstrap
- OpenWeb Icons [47] - a slew of open standard and protocol icons
- 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.
- Entypo is a set of 250+ carefully crafted pictograms. The package contains an icon font — OpenType, TrueType and @font-face — EPS, PDF and PSD files. All released for free under the license CC BY-SA 3.0.
- 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.
- Ligature Symbols is WebFont project to display the symbol with a ligature features. SIL.
- 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).
- Elusive Icons - 268 Sleek vector icons for bootstrap.
$;
Tools
- http://www.freefontconverter.com/
- http://www.font2web.com/
- http://www.fontconverter.org/
- http://onlinefontconverter.com/
Generators
- Font Custom - Generate custom icon webfonts from the comfort of the command line.
- https://github.com/endtwist/fontcustom/
- Bootstrap-ready
- 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
- http://code.google.com/p/chromium/issues/detail?id=137692
- windows chrome bit iffy
Crossbrowser
CSS
Examples
- http://blog.echoenduring.com/2010/05/13/create-beautiful-css3-typography/
- http://net.tutsplus.com/tutorials/html-css-techniques/subtle-css3-typography-that-youd-swear-was-made-in-photoshop/
- http://line25.com/tutorials/create-a-letterpress-effect-with-css-text-shadow
- http://designshack.net/articles/css/css3-cookbook-7-super-easy-css-recipes-to-copy-and-paste
- http://seanmcb.com/get-the-look/hand-painted-sign/
- http://tympanus.net/codrops/2012/09/12/creative-web-typography-styles/
- https://typesetinthefuture.com/2014/12/01/alien/ [53]
- https://typesetinthefuture.com/2014/11/29/fontspots-eurostile/
Colour
Responsive
- Responsive Typography: The Basics - June 2012
vw, vh, vmin: ie and chrome, fallback with fittext.js
- Responsive viewport units (vw, vh, and vmin) - Apr, 2012
- Viewport Sized Typography - Apr 30 2012
- Fluid Type - June 19th, 2012
- Responsive text - different sort of responsive
- Is There Ever A Justification For Responsive Text?
Units
Set p size first or use 100% for the usual browser default (16px).
- How to size text using ems - 18 May 2004
font-size: 62.5%; set 1em equal to 10px
- Font sizing with rem - CSS3 unit
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
- http://adamdscott.com/typography/kerning-for-the-web/
- http://designshack.net/articles/typography/kerning-live-web-type-with-jquery-and-lettering-js/
- http://blog.typekit.com/2011/06/03/type-study-a-better-kerning-experience-with-kern-js/
- http://logofontandlettering.com/kernking.html - kerning ipsum
Framework
Software
- http://www.xfree86.org/4.2.0/xfontsel.1.html
- http://gtk2fontsel.sourceforge.net/
- http://opcion.sourceforge.net/
- https://live.gnome.org/Gucharmap
- https://github.com/siyb/fontviewer
- https://github.com/monkeyinmysoup/FindThatFont-
Management
Creating
- 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.
Symbols
- Symbol Entities in HTML & XHTML
- Dingbats - 191 characters. A visual unicode database
- Umap - places unicode characters into the clipboard.
Smiley
See Smiley
Art
- https://en.wikipedia.org/wiki/Box-drawing_character - also known as line-drawing characters, are a form of semigraphics widely used in text user interfaces to draw various geometric frames and boxes. In graphical user interfaces, these characters are much less useful as it is more simple and appropriate to draw lines and rectangles directly with graphical APIs. Box-drawing characters work only with monospaced fonts; however, they are still useful for plaintext comments on websites.Used along with box-drawing characters are block elements, shade characters, and terminal graphic characters. These can be used for filling regions of the screen and portraying drop shadows.
- https://en.wikipedia.org/wiki/Box_Drawing - a Unicode block containing characters for compatibility with legacy graphics standards that contained characters for making bordered charts and tables, i.e. box-drawing characters.
- https://en.wikipedia.org/wiki/Block_Elements - a Unicode block containing square block symbols of various fill and shading. Used along with block elements are box-drawing characters, shade characters, and terminal graphic characters. These can be used for filling regions of the screen and portraying drop shadows.
- https://github.com/kristopolous/unifig - Unicode Figlet conversion
- https://github.com/7890/shout - print large pixel fonts in terminal
- BlockyText - Fancy text for boring sites.
- Glyph Drawing Club - contemporary text art editor
- GlyphDrawing.Club is pushing the capabilities and creative potential of modular design editing tools
- https://github.com/stefanhaustein/TerminalImageViewer - Small C++ program to display images in a (modern) terminal using RGB ANSI codes and unicode block graphics characters
- REXPaint - a powerful and user-friendly ASCII art editor. Use a wide variety of tools to create ANSI block/line art, roguelike mockups and maps, UI layouts, and for other game development needs. Originally an in-house dev tool used by Grid Sage Games for traditional roguelike development, this software has been made available to other developers and artists free of charge. While core functionality and tons of features already exist, occasional updates are known to happen. Unlock your retro potential; join thousands of other REXPaint users today :D [56]