Typography

From Things and Stuff Wiki
Jump to navigation Jump to search


Basics

to resort


  • https://en.wikipedia.org/wiki/Typographical_syntax - also known as orthotypography, is the aspect of typography that defines the meaning and rightful usage of typographic signs, notably punctuation marks, and elements of layout such as flush margins and indentation.








Articles


Video

Forum

Formats

See also Data#Encoding




  • 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

  • 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


MDA

PostScript

See also Documents#PostScript

  • https://en.wikipedia.org/wiki/PostScript_fonts - are font files encoded in outline font specifications developed by Adobe Systems for professional digital typesetting. This system uses PostScript file format to encode font information."PostScript fonts" may also separately be used to refer to a basic set of fonts included as standards in the PostScript system, such as Times, Helvetica and Avant Garde.



TrueType



OpenType




SFNT / OTB

  • Bitmap fonts in XFree86, X.Org and the FD X server - "We will use “bitmap-only TrueType fonts”, more properly known as “bitmap fonts in a SFNT wrapper” as the preferred format for bitmap fonts. This format has all the features that we require: random-access; as compact as compressed PCF (sometimes more so); allows the inclusion of OpenType-formatted metadata.



SVGinOT

UFO

  • Unified Font Object: Overview - The Unified Font Object (UFO) is a cross-platform, cross-application, human readable, future proof format for storing font data. The UFO Design Philosophy↩ The data must be human readable and human editable. The data should be application independent. Data duplication should be avoided unless absolutely necessary.

Type



  • https://en.wikipedia.org/wiki/Vox-ATypI_classification - makes it possible to classify typefaces into general classes. Devised by Maximilien Vox in 1954, it was adopted in 1962 by the Association Typographique Internationale (ATypI) and in 1967 as a British Standard, as British Standards Classification of Typefaces (BS 2961:1967), which is a very basic interpretation and adaptation/modification of the earlier Vox-ATypI classification. On April 27, 2021, ATypI announced that they had de-adopted the system and that they were establishing a working group building towards a new, larger system incorporating the different scripts of the world. Vox proposed a nine-type classification which tends to group typefaces according to their main characteristics, often typical of a particular century (15th, 16th, 17th, 18th, 19th, 20th century), based on a number of formal criteria: downstroke and upstroke, forms of serifs, stroke axis, x-height, etc. Although the Vox-ATypI classification defines archetypes of typefaces, many typefaces can exhibit the characteristics of more than one class. At the 2010 ATypI general meeting, the association voted to make a minor amendment to add Gaelic to the calligraphic group in the Vox-ATypI classification, to state that the Vox-ATypI system was seriously flawed, and to create a new working group on typeface classification.





  • https://en.wikipedia.org/wiki/International_Typographic_Style - also known as the Swiss Style, is a systemic approach to graphic design that emerged in Switzerland during the 1950s but continued to develop internationally. It expanded on and formalized the modernist typographic innovations of the 1920s that emerged in part out of art movements such as Constructivism (Russia), De Stijl (The Netherlands) and at the Bauhaus (Germany). The International Typographic Style has had profound influence on graphic design as a part of the modernist movement, impacting many design-related fields including architecture and art. It emphasizes simplicity, clarity, readability, and objectivity. Hallmarks of the style are asymmetric layouts, use of a grid, sans-serif typefaces like Akzidenz Grotesk and Helvetica, and flush left, ragged right text. The style is also associated with a preference for photography in place of illustrations or drawings. Many of the early International Typographic Style works featured typography as a primary design element in addition to its use in text, and it is for this that the style is named. The influences of this graphic movement can still be seen in design strategy and theory to this day.





  • LastResort Font - a special-purpose font that includes a collection of glyphs to represent types of Unicode characters. These glyphs are specifically designed to allow users to recognize that a code point is one of the following: In which particular block a Unicode character is encoded; In the PUA (Private Use Area) for which no agreement exists; Unassigned (reserved for future assignment); A noncharacter [7]
  • https://github.com/unicode-org/last-resort-fon




Antiqua

Serif























Baskerville

Sans-serif




















  • B612 - a highly legible open source font family designed and tested to be used on aircraft cockpit screens. In 2010, Airbus initiated a research collaboration with ENAC and Université de Toulouse III on a prospective study to define and validate an “Aeronautical Font”: the challenge was to improve the display of information on the cockpit screens, in particular in terms of legibility and comfort of reading, and to optimize the overall homogeneity of the cockpit. 2 years later, Airbus came to find Intactile DESIGN to work on the design of the eight typographic variants of the font. This one, baptized B612 in reference to the imaginary asteroid of the aviator Saint‑Exupéry, benefited from a complete hinting on all the characters. [17] [18]



  • Overpass Font - An open source font family inspired by Highway Gothic.Sponsored by Red Hat — Created by Delve Fonts



  • https://github.com/impallari/Dosis - a very simple, rounded, sans serif family. The lighter weights are minimalist. The bolder weights have more personality. The medium weight is nice and balanced. The overall result is a family that's clean and modern, and can express a wide range of voices & feelings. It's also full of alternate glyphs so you can play arround and have fun. * https://github.com/eliheuer/dosis-vf - In 2018 Dosis was remastered as a variable font.


  • https://github.com/rsms/inter - a typeface specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens.


Created using cpitclaudel/monospacifier as a base, with manual modifications on top.




Grotesques




  • 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. [22]


  • https://github.com/weiweihuanghuang/Work-Sans - typeface family based loosely on early Grotesques — i.e. Stephenson Blake, Miller & Richard and Bauerschen Giesserei. The core of the fonts are optimised for on-screen medium-sized text usage (14px-48px) – but still can be used in print well. The fonts at the extreme weights are designed more for display use. Overall, features are simplified and optimised for screen resolutions – for example, diacritic marks are larger than how they would be in print.



Humanist








  • 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. [25]



  • https://github.com/huytd/haskplex-font - combined version of Hasklig (bold + regular style) and IBM Plex Mono (italic + bold italic style) fonts. The font family has been renamed into Haskplex.


  • https://github.com/marcologous/Open-Sauce-Fonts -a font super family that I developed for Creative Sauce's internal type system. It is a compact typeface that is optimised for better viewing small text on screen and print. Open Sauce fonts (Sans, One and Two) are under the SIL Open Font License and is going to be actively developed, improved and tested.

Heading


Slab serif

Monospace




  • Inconsolata - 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.










  • 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.



  • Monoid - customizable and optimized for coding with bitmap-like sharpness at 12px/9pt even on low res displays. Features semi-condensed and distinguishable glyphs with short ascenders + descenders, big apertures and supersized operators + punctuation. Monoid comes in regular, bold, oblique and retina versions with >750 latin, greek, cyrillic, ligature, alternate and Powerline glyphs.



  • Windows 8x12 Console Font Unicode - a TrueType version of monospace Terminal font with Unicode support (for most European code pages) for using with Windows Console.Multiple codepages from vgaxxx.fon windows font files were combined and vectorized into a single TrueType font.


  • Input - a flexible system of fonts designed specifically for code by David Jonathan Ross. It offers both monospaced and proportional fonts, all with a large range of widths, weights, and styles for richer code formatting.



  • JuliaMono - a monospaced typeface designed for programming in the Julia Programming Language and in other text editing environments that require a wide range of specialist and technical Unicode characters. [33]



  • Hack - A typeface designed for source code. Hack includes monospaced regular, bold, italic, and bold italic sets to cover all of your syntax highlighting needs. Multilingual Over 1500 glyphs that include lovingly tuned extended Latin, modern Greek, and Cyrillic character sets. Powerline Support Powerline glyphs are included in the regular set. Patching is not necessary. Install and go.




  • From Monospace to Duospace: In Search of the perfect writing font - Duospace gives 50% more space to the letters m, M, w and W. It takes two of those to get back in step with the monospace rhythm. The advantage over proportional fonts is that you keep all benefits of the monospace: the draft like look, the discernability of words and letters, and the right pace for writing. Meanwhile, you eliminate the downside stemming from mechanical restrictions that do not apply to screen fonts. Here is what we came up with:


  • Monaspace - a monospaced type superfamily with some modern tricks up its sleeve. It consists of five variable axis typefaces. Each one has a distinct voice, but they are all metrics-compatible with one another, allowing you to mix and match them for a more expressive typographical palette.


Bitmap



  • Curtis Frees' Blog → My preferred monospace fonts - As a programmer and command-line enthusiast, I spend a lot of time looking at monospace fonts. For many years, I enjoyed using what has been for years a popular default: Bitstream Vera Sans Mono.A few months ago, I spent a great deal of time trying out different monospace fonts. Here, I’ll present a brief list of my favorites


  • https://github.com/Tecate/bitmap-fonts - A collection of monospaced bitmap fonts for X11, good for terminal use. These fonts were not created by me, the authors are listed below. Some of these fonts may be out of date. If something doesn't work check the archives file and see if there is a readme included with the font, or take a look at the creators website listed below.This repo is an attempt to catalog all existing bdf/pcf fonts.


  • https://github.com/robhagemans/hoard-of-bitfonts - contains bitmapped fonts from disused operating systems and graphical user interfaces.As operating systems and GUIs have moved on to scalable vector fonts, the bitmap fonts that dominated the 1980s and 1990s languish away in non-obvious and often binary formats that are rapidly falling into obscurity.The main purpose of this repository is to liberate these fonts from their binary shackles, preserving the ancient art of monochrome bitmap typography for human appreciation.



  • Terminus - 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.






  • ProFont - 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 - 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.




  • 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.


















  • 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. [37] [38]


  • 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.













  • cursed_font - a 9x18 bitmapped font designed for low-DPI screens. It was originally an embiggened and monospace-ified version of Apple's Chicago font from System 6, but it also takes inspiration from many other fonts such as bizcat, ttyp0, tamzen, scientifica. [42]





Modernist/techno


  • 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. [44]



  • Optician Sans - A free font based on the historical eye charts and optotypes used by opticians world wide. [45]


  • "DSEG": 7-segment and 14-segment free fonts - a free font family, which imitate seven and fourteen segment display(7SEG,14SEG). DSEG have special features: DSEG includes the roman-alphabet and symbol glyphs. More than 50 types are available. True type font(*.ttf) and Web Open Type File Format (*.woff, *.woff2) are in a package. DSEG is licensed under the SIL Open Font License 1.1.


  • https://github.com/polarsys/b612 - an highly legible open source font family designed and tested to be used on aircraft cockpit screens.Main characteristics are:Maximize the distance between the forms of the charactersRespect the primitives of the different lettersHarmonize the forms and their spacing




Cursive

  • https://en.wikipedia.org/wiki/Cursive - any style of penmanship in which characters are written joined in a flowing manner, generally for the purpose of making writing faster, in contrast to block letters. It varies in functionality and modern-day usage across languages and regions; being used both publicly in artistic and formal documents as well as in private communication. Formal cursive is generally joined, but casual cursive is a combination of joins and pen lifts. The writing style can be further divided as "looped", "italic", or "connected".



  • https://github.com/tanukifont/YuseiMagic - a font based on handwritten letters written with permanent marker. It has thick vertical strokes and thin horizontal strokes, so it is highly visible. The design of the letters has both the strength of bold lines and the softness of spaciousness. Highly recommended for handwriting on blackboards and pop art designs. This font includes Google Latin Core, Hiragana, Katakana, JIS level 1, level 2 and IBM Extended Kanji (Han) glyphs.


Arabic

Other



  • https://github.com/ryanoasis/nerd-fonts - a project that patches developer targeted fonts with a high number of glyphs (icons). Specifically to add a high number of extra glyphs from popular 'iconic fonts' such as Font Awesome, Devicons, Octicons, and others. [53]






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. [54] [55]



  • Comic Mono | comic-mono-font - A legible monospace font… the very typeface you’ve been trained to recognize since childhood. This font is a fork of Shannon Miwa’s Comic Shanns. [56]


Emoji

See Emoji

to sort





Music

Microsoft

IBM

Single line / vector



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



Font preview

gtk2fontsel

  • gtk2fontsel - Font selection tool similar to xfontsel implemented using GTK+ 2. Trivial, but useful nonetheless.I really liked gtkfontsel, by Damon Chaplin, but it doesn't appear to be actively maintained and I didn't feel like waiting any longer for the GTK2 port.Still missing a few important features, like filtering.

Font Manager

  • https://github.com/FontManager/font-manager - intended to provide a way for average users to easily manage desktop fonts, without having to resort to command line tools or editing configuration files by hand. While designed primarily with the Gnome Desktop Environment in mind, it should work well with other GTK desktop environments. Font Manager is NOT a professional-grade font management solution.

fontpreview

  • https://github.com/sdushantha/fontpreview - a commandline tool that lets you quickly search for fonts that are installed on your machine and preview them. The fuzzy search feature is provided by fzf and the preview is generated with imagemagick and then displayed using sxiv. This tool is highly customizable, almost all of the variables in this tool can be changed using the commandline flags or you can configure them using environment variables.

fontpreview-ueberzug

fontpreview-ueberzug -s 12 -b "#000000" -f "#ffffff"

Web

Awesome Font Previewer

Creating / editing


FontForge

  • 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.

Metafont

  • https://en.wikipedia.org/wiki/Metafont - a description language used to define raster fonts. It is also the name of the interpreter that executes Metafont code, generating the bitmap fonts that can be embedded into e.g. PostScript. Metafont was devised by Donald Knuth as a companion to his TeX typesetting system.O ne of the characteristics of Metafont is that the points defining the shapes of the glyphs—for example top of a stem, or intersection of a stem and crossbar—are defined with geometrical equations. Another characteristic is that Metafont is a macro language, where operations such as "draw a lower case top of stem serif at point 4" might appear as one macro instruction (with the point as argument) in the program for a letter. For describing shapes, Metafont has a rich set of path construction operations that mostly relieves the user of having to calculate control points. Finally, many families of Metafont fonts are set up so that the main source file for a font only defines a small number of design parameters (x-height, em width, slant, vertical stroke width, etc.), then calling a separate source file common for a whole range of fonts to actually draw the individual glyphs; this is the meta aspect of the system.


fontname.py

Touche

  • https://github.com/schriftgestalt/Touche - checks all of your glyphs against all of your glyphs, lists and shows the touching pairs that it finds, and leaves the decision on whether and how to fix them up to you. The resulting pairs can be exported as a text file that can directly be used as a pair list in Metrics Machine. (It should go without saying that this can supplement and perhaps expedite, but in no way replace careful manual checking of kerning in general.)

trufont

  • https://github.com/trufont/trufont - Multi-platform UFO font editor. TruFont is a multiplatform font editor built with Python3 and PyQt5. The wx branch contains a stub wxWidgets port of the app. Maintenance status: The trufont project is currently discontinued. Although we will happily accept bug fixes, no new features are currently planned.

to sort

monospacifier.py


Ligaturizer

  • https://github.com/ToxicFrog/Ligaturizer - Add ligatures to any coding font! This script copies the ligatures (glyphs and rendering information, from Fira Code into any other TrueType or OpenType font. (Note that the ligatures are scale-corrected, but otherwise copied as is from Fira Code; it doesn't create new ligature graphics based on the font you're modifying.) This repo contains a Fontforge python script that you can use to add the Fira Code ligatures to any font, as well as submodules for some popular coding fonts and another script for ligaturizing all of them at once.

Liga

  • https://github.com/EzequielRamis/liga - a redesign of the ToxicFrog/Ligaturizer implementation because, principally, it does not work with the Firacode's ligatures above v3.1, missing incredible features like infinite arrow combinations.

Management


Fontmatrix

  • https://github.com/fontmatrix/fontmatrix - a font manager for Linux desktop environments. It can manage fonts installed system-wide or for individual user accounts. It relies on FreeType to render font samples, and on Qt for its user interface. Bruce Byfield hailed the creation of Fontmatrix with an article concluding with: "Finally, the long wait for a GNU/Linux font manager is ending." Fontmatrix lets users label a font with multiple tags (similar to Gmail labels), which may be activated or deactivated as sets. It also allows the user to toggle features of OpenType fonts for testing purposes. As of November 2008, the PANOSE classification present in fonts may also be used to select them by similarity.


Font Manager

  • GTK+ Font Manager - intended to provide a way for average users to easily manage desktop fonts, without having to resort to command line tools or editing configuration files by hand. While designed primarily with the Gnome Desktop Environment in mind, it should work well with other Gtk+ desktop environments.Font Manager is NOT a professional-grade font management solution.

Opcion


to sort





  • https://github.com/fonttools/fonttools - a library for manipulating fonts, written in Python. The project includes the TTX tool, that can convert TrueType and OpenType fonts to and from an XML text format, which is also called TTX. It supports TrueType, OpenType, AFM and to an extent Type 1 and some Mac-specific formats. The project has an MIT open-source licence.








Web




Font stack

Ampersand





Canvas

  • https://github.com/cmiscm/leonsans - a geometric sans-serif typeface made with code in 2019 by Jongmin Kim. It allows to change font weight dynamically and to create custom animations, effects or shapes in the Canvas element of HTML5. He designed the font to celebrate his newborn baby Leon.


Windows

Repos and foundries

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





Large repos

foundry;

Smaller collections






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


ntface/generator @font-face Kit Generator] - Create font set to cover all browsers.






License


Repos, etc.





  • About - Fontke.com For Mobile - one of the earliest and most influential font sharing websites in China. Through years of development, it has become the most popular font sharing and download platform for type designers, printing practitioners, front-end engineers, programmers, calligraphers and language enthusiasts. User groups are from more than 160 countries and regions. FontKe.com currently has the largest font resources. Through humanized category filters, advanced search technology and top-notch font identification technology, users can easily find the needed font. Our goal is to build largest font sharing and download website in the world and become the most influential internet font integrated service provider.

Tools

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



Kerning

Webfont icons

See also Graphics#Icons

Guides

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
  • 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).

$;


Tools

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

CSS

Examples

Colour


Responsive

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

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

Framework

Symbols


  • Dingbats - 191 characters. A visual unicode database





  • Umap - places unicode characters into the clipboard.


Other



Art

See also Smiley



  • 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.










  • 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 [80]

ANSI

  • AnsiGo - ANSi to PNG converter in Go


Games

Testing

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