Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Christiane Rosenberger 4. April 2006

Quellensammlung: Fonts und Typographie

Kein Beitragsbild

Falls noch jemand einen Link braucht… Diesmal geht es um Schriften, Schriftgröße, Fonts und Typogaphie. Kurzum: schönere Buchstaben und Texte im Web. Inklusive der passenden Magazine, Blogs und Galerien.


  • Fontpage – History der Typografie
    Wie die Technik in der Geschichte die Schrift und Typografie beinflusste. Links zu kostenlosen Schriften, Schriftenhersteller, Beschreibungen von Bleisatz, Maschinensatz, Fotosatz, KAthodenstrahlbelichtung, Vektorfonts
  • HTML-Schriften unter der Lupe
    HTML-Gestalter haben es nicht leicht: Das Angebot an verwendbaren Schriften ist klein, und man weiß eigentlich nie, was am Ende beim User ankommt. Dieser Essay wird diese Probleme zwar nicht lösen; Er zeigt aber, worauf man bei der Auswahl einer Schrift für das nächste Web-Projekt achten kann.
  • Typographie für Webautoren
    Die wichtigsten klassischen Typographieregeln speziell für den Webautor / Webdesigner zusammengetragen und aufbereitet.
  • Typographie im Web
    Ausführlicher Artikel von Nadja Müller über die Typographie im Web
  • Accessible web text – sizing up the issues.
    In part 2 of my introduction to accessible web text, I explore the issues surrounding text size; explain what all the fuss is about; and suggest some useful approaches you can adopt to ensure the text on your web pages will be readable to your visitors.
  • Accessible Web Typography
    an introduction for web designers
  • All about fonts for captions and subtitles
    Screenfont.CA is part of an upcoming project to research and develop a set of standards for captioning, audio description, subtitling, and dubbing.
  • Cameron Moll
    The non-typographer’s guide to practical typeface selection
  • Dynamic Text Replacement
    Using PHP JavaScript, and CSS for text image replacement
  • Effective Style with em
    The most important thing being delivered from any Web site is the content. Therefore, time and effort should be spent on making that content the most accessible aspect of any project. The method in which you style the content intensive elements of your document has a very strong effect on accessibility…
  • Fine Typography for the Web
    Sehens- und lesenswerte Slideshow von Dave Shea – Mezzoblue
  • Five simple steps to better typography by Mark Boulton
    Typography, I find, is still a bit of mystery to a lot of designers. The kind of typography I’m talking about is not your typical „What font should I use“ typography but rather your „knowing your hanging punctuation from your em-dash“ typography. Call me a little bit purist but this bothers me.
  • Know Your Type
    Starting points for typographic inspiration
  • Readabilty
    Readabilty – making pages easy to read by design
  • Semantic Typography: Bridging the XHTML gap
    In the Web Standards community we hear the words ‚Semantic Markup‘ thrown around a lot as a concept—the right thing to do— but I know a lot of designers who are trying to learn this stuff are being confused by the whole ’semantic thing’…
  • serif vs. sans-serif
    Article By Faruk Ates,
  • The Anatomy of Web Fonts [Design Principles]
    Typography involves degrees of science and art. In this step-by-step guide, Andy Hume illuminates the science of practical typographic theory and explains how it applies to the selection of attractive, usable Web fonts. He shows how to assess the merits of various fonts, identify those that suit your purpose, and put them together to create a communicative whole.
  • The Trouble With EM ’n EN (and Other Shady Characters) by Peter K Sheerin
    Beating typographic correctness out of (X)HTML: more than you ever wanted to know about dashes, spaces, curly quotes, and other vagaries of online typography.
  • The World of Fonts
    An overview of the history of type for a designer, showing the historical principles behind practical use of fonts.
  • thinking with type
    Theory + practice, how + why: a new approach to typhographic education
  • Typography and the Aging Eye
    Typeface Legibility for Older Viewers with Vision Problems
  • Typography and the User Interface
    There is a quiet issue that nags at the computer industry. While processing speed and computational flexibility have grown at incredible rates, our displays, the most human-facing elements of our digital lives, lag behind…by Daniel Kuo
  • Typography – Anti-Aliasing
    Aliasing is a term used to describe the undesirable effects produced when visual information is presented at a lower than optimal resolution
  • Typography on the Web – Beauty is Not Letterform Deep
    For the last few years, design on the web has strongly shifted towards a more usable and standards driven approach. It is now commonly accepted that HTML text is far more usable than images containing text. However, many web designers still use images for type due to the typographic control they obtain.

CSS, Schriftgröße, Sonderzeichen

  • Ein (Sonder-)Zeichen setzen
    Eine tiefer Griff in die typografische Regelkiste fördert zutage, was im Web fast alle falsch machen: Die Sonderzeichen. Was es mit Anführungszeichen, Gedankenstrichen, Apostrophen und den dazugehörigen HTML-Codes auf sich hat, kann der geneigte Leser hier studieren und hoffentlich später auch anwenden.
  • Die richtige Schriftgrösse
    Artikel von Björn Höhrmann zum Thema Schriftgröße
  • Erste Schritte mit CSS
    Gleiches Schriftbild in (fast) allen Browsern
  • Schriftgrößen, SCHRIFTGRÖSSEN, schriftgrößen
    Ein kleiner kompakter Schriftgrößenguide
    Vergleiche, insbesondere zwischen den sogenannten Kleinen und Großen Schriftarten unter Windows im Bezug auf die Erstellung von Webseiten
  • Wie groß ist 100%?
    Immer Ärger mit den Schriftgrößen
  • WinMac Schriftgrößenvergleiche auf Windows, Mac und Linux
    WinMac beschäftigt sich mit der Darstellung von Schriftgrößen auf verschiedenen Systemen. Ich habe 3 HTML Seiten erstellt und diese mit CSS formatiert
  • CSS Font Size Explained
    CSS font size explained, relative versus fixed sized fonts, em units versus pixels, point size and percentage.
  • How to size text using ems
    Text for the screen is sized with CSS in terms of pixels, ems or keywords. As most of us know, sizing with pixels is easy: get your selector and give it a font-size – no more thought required….
  • CSS Typography By Garrett Dimon
    This article can’t address how to design with type, but it can help you become more aware and explore the options available to you through CSS. With a little practice you can make your design easier to read and improve aesthetics.
  • Power To The People: Relative Font Sizes
    Changing relative font size using css and javascript


  • Fonts for the Web
    Web designers must normally restrict themselves to fonts that are available on most users‘ computer systems. This page displays fonts widely distributed with Windows, Macintosh and the Internet Explorer browser
  • 25 Best Free Quality Fonts
    Sammlung freier Fonts von Vitaly Friedmann
  • Freie Schriften im Portrait
    Gerrit van Aaken nimmt freie Schriften unter die Lupe. Herausgekommen sind interessante, informative Portraits. Macht Spaß sie zu lesen
  • 1001 Fonts .com
    Download free fonts for Windows and free fonts for Apple Macintosh. All fonts on this site are either freeware or shareware and in the TrueType or PostScript format
  • Abstract Fonts – 10,000 Free Fonts for download
    Free fonts are categorized by style, alphabetically, designer, stylistic similarity, number of downloads and user rating. Custom font previews, characters sets fast downloads, top 100, worst 20, forums and much more. Everyone will find something to like
  • Acid Fonts
    Download a large selection of freeware ttf fonts and dingbats for windows and macintosh at Acid Fonts
    a large archive of freeware and shareware Fonts, in 23 Kategorien eingeteilt und auch alphabetisch sortiert
    Cool Fonts, Custom Fonts, Free Fonts
    Download free and shareware fonts
  • eXtremefonts
    Download a large selection of freeware and shareware ttf fonts and dingbats for windows and macintosh
  • FontShop
    Alles für Typhographie und Gestalung
  • Letterhead Fonts
    Rare and Unique Typefaces for Artists (freie & kostenpflichtige
  • MyFonts
    Find, try, buy and download fonts online, download fonts for Mac and PC at MyFonts, the world’s largest collection of fonts online
  • SimplytheBest Fonts archive
    SimplytheBest Free Fonts. A collection of the best fonts on the Web, in Kategorien eingeteilt und auch alphabetisch sortiert
  • The Font Pool
    27 372 Fonts, eingeteilt in 18 Kategorien
  • typOasis
    Diese Fonts sind nicht nur kostenlos, sondern auch sehr schick. Ansehen lohnt sich
  • – Download Free Fonts
    Download Free True Type Fonts from our assortment of over 6000 free true type fonts.


  • 04 | extra | bitmap Font
    free Bitmap Fonts, Windows & Mac
  • 15 Best License-Free Pixel Fonts
    Sammlung freier Pixelfonts von Vitaly Friedmann
  • BitmapMania
    free Bitmap Fonts
  • Flash Pixel Fonts
    Freeware and shareware Flash pixel fonts categorised by their height in pixels. These fonts are designed to provide crisp screen text at very small sizes. To prevent them from anti-aliasing (appearing blurry) its best to set their X and Y points to non-fraction values.
  • pixel and led fonts for flash
    free downloadable pixelfonts
  • { Pixilate } Fonts | Pixelfonts
    Pixel, or bitmap fonts are fonts designed to look clear and crisp at screen resolution (72 dpi). Pixilate fonts are designed to work on Macromedia Flash, or on any other graphics application. For help on using these pixel fonts, please read the usage guide.
  • Super Pixel Fonts – Fonts For Flash
    Download bitmap and free pixel flash fonts


    Forum zu Typografie, Schrift, Fonts und Gestaltung
  • typeFORUM
    TypeForum ist das deutschsprachige Portal für Schriftfreunde und Schriftgestalter. Im Mittelpunkt dieser Seiten steht der fachliche Austausch der eingetragenen Mitglieder.
  • Typografie: Da werden Sie Augen machen!
    Der Verein will Schrift und Typografie als Teile der deutschen Kultur ins Bewusstsein einer breiten Öffentlichkeit bringen, die Bedeutung und den Nutzen der Typografie für die Kommunikation deutlich machen und deren Qualität fördern.
  • AIGA – Typography
    This forum is for the passionate. It’s for those who are crazy in love with type, absolutely hate the problems fonts can cause, have an uncontrollable need to learn more about typography, or an irresistible desire to share typographic opinions and stories. This is not a place for the typographically indifferent.
  • TextDrive Community Forum / sIFR
    sIFR Forum
  • Forums | Typophile
    Plattform mit Forum, Wiki und News – Sprache: Englisch


Magazine & Portale

  • Fontpage – History der Typografie
    Wie die Technik in der Geschichte die Schrift und Typografie beinflusste. Links zu kostenlosen Schriften, Schriftenhersteller, Beschreibungen von Bleisatz, Maschinensatz, Fotosatz, KAthodenstrahlbelichtung, Vektorfonts
  • – Schrift und Typografie – Schriften, Schriftzeichen …
    Schrift & Typografie – Alphabete, Hieroglyphen, Runen, Fraktur und Schriftzeichen. Schriftklassifikation durch Typologie. Schriftkuenstler wie Gutenberg, Bodoni, Zapf – Schriftarten und Glossar
  • Spatium
    Magazin für Typografie
  • :typemotion :: Typographie |
    Typemotion ist eine ausbildungs- und unterrichtsbegleitende Site für gestaltungstechnische Assistenten mit Schwerpunkt Grafik- und Webdesign. Sie bietet Materialien zum Download, Workshops, thematische Beiträge und Literaturtipps rund um Gestaltung, Typographie, Webdesign und DTP.
    Portal für Typografie und Gestaltung
  • TYPOlis
    rund um das Thema Typografie und Gestaltung.
  • Baseline
    International typographics magazine
  • The Terminal
  • Typofile Magazine
    graphic design, typography, typefaces, fonts, web design, fiction, humor
  • Typographica
    Typographica is a journal of typography featuring news, observations, and open commentary on fonts and typographic design.


  • 2005 noch nicht reif für sIFR?
    Groß war die Begeisterung über sIFR (sprich »Siffer«), als diese automatische HTML-Text-zu-Flash-Filmchen-Technik im Herbst letzten Jahres in der Version 2 debutierte. Vor allem ich war begeistert, öffnete sich doch hier eine ganz neue Welt der typografischen Gestaltung auf Websites. Folgerichtig wurde das Jahr 2005 schnell zum Year of sIFR ausgerufen…
  • Eigene Typo im Web dank sIFR
    Timo Höner erklärt gut und ausführlich sIFR samt Vor- und Nachteilen, wie man sIFR in WordPress verwendet, klärt Fragen des Copyrights und gibt auch einige Linktipps.
  • SIFR: Neue Schriftenvielfalt
    Das kleine FlashTool SIFR löst ein großes Problem der WebDesigner …. und schafft neue…
  • sIFR – Revolution der Webtypografie?
    Wer schon immer wissen wollte was sIFR überhaupt ist, findet hier ein wie immer gut verständliches Essay von Gerrit van Aaken
  • How and when to use sIFR
    sIFR has arrived: but is it here to stay? Andrew Hume looks at the finer points of the latest Flash replacement technique, and how to best implement it today.
  • Introducing sIFR: The Healthy Alternative to Browser Text
    With CSS we can size, style, color, kern, show, and hide our text but we can’t deliver something classical typesetters have delivered since at least the 15th century: custom typography. Until now. In concert with Shaun Inman and Tomas Jogin, I am releasing into the public domain a scalable, multiline, Flash 6 compatible version of IFR to help you reduce the amount of browser text in your life and free the world from the scourge of Arial.
  • Introduction to Scalable Inman Flash Replacement (sIFR)
    This presentation will introduce you to a technique, called Scalable Inman Flash Replacement (sIFR), which will allow you to use that hot new font on the pages you create, without being forced to use images, all in a easy to use, unobtrusive, backwards compatible, search-engine friendly manner by using a nifty combination of Flash and JavaScript.
  • sIFR Flash Fonts Library
    289 free fonts
  • sIFR Font Embedder
    Simple font embedder for sIFR SWF files
    On this site you will find freely available sIFR fonts and links to other sIFR resources
  • sIFR 2.0: Rich Accessible Typography for the Masses
    Over the last several months, a small group of web developers and designers have been hard at work perfecting a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics…
  • Two-color sIFR
    Today’s topic is how to implement two color sIFR, in a way that we did on our recent project….
  • Wiki.Novemberborn – sIFR Documentation & FAQ
    sIFR lets you use your favorite font on your websites by cleverly working with Flash, JavaScript and CSS. Here you’ll find it’s documentation and the FAQ.

Identify a font

  • Linotype Font Finder – FontIdentifier
    Answer a few simple questions and the artificial intelligence of the FontIdentifier will help you find your font
  • TypeNavigator
    TypeNavigator: the world’s first interactive visual font search system. „Visual“ means you needn’t know anything about what you’re looking for — all you need is that image in your head. This system is unique in that you can identify fonts by memory alone.
  • Identifont – identify fonts and typefaces
    Identify a font with the Identifont online typeface identifier. Answer a few questions about the letters in your sample and see a list of typefaces that match!

Schriftverwaltung – Font Management

  • AMP Font Viewer 3.70
    This program is an easy to use but powerful font manager, which allows getting a quick overview of both installed and non installed fonts. It can install and uninstall fonts, and organize them in categories.(Freeware)
  • Typograf
    Typograf – Schriftenverwaltung, OpenType, TrueType, Type 1 und Drucker Schriften vorschauen, ansehen, installieren, ausdrucken, verwalten unter Windows 9x,ME,NT,2000,XP
  • Linotype FontExplorer X
    Font Management – Simple, Smart, Free, FontExplorer X sets a new standard for font management software. Linotype is pleased to announce the missing link to your font collection. With the new FontExplorer™ X, font management, font sorting, font shopping and font discovery are simple and fun! Auch in Deutsch verfügbar


  • ASCII Artist
    This little program converts your picture to ASCII text art
  • ASCII Generator
    Generate a ASCII graphic from a word or text. Over 130 fonts.
  • ASCII-O-Matic
    is a web application that can convert an image into ASCII Art dynamically
  • Character Cleaner v2
    Character Cleaner is a little web-based utility which converts pasted-in text to clean markup, optionally encoding certain characters and creating line breaks and paragraphs automatically. It’s entirely contained in the one file, so you can easily save it for offline use.
  • STC :: fontBROWSER
    FontBrowser is a FREE online flash application that allows you to preview the fonts active on your system
  • FontEditor BitfontMaker
    Wer etwas Zeit mitbringt, kann sich mit dem Online-Tool BitFontMaker seinen eigenen Pixelfont designen. Auf einer Matrix werden pro Buchstabe und Zeichen die Pixel gesetzt, bis das Alphabet komplett ist. Anschließend bekommt der Font seinen Namen.
  • Fontifier
    Fontifier lets you use your own handwriting for the text you write on your computer. It turns a scanned sample of your handwriting into a handwriting font that you can use in your word processor or graphics program, just like regular fonts such as Helvetica.
  • malevole – Text Generator
    This text generator has been developed based on years of careful research and is guaranteed to improve even the most lacklustre of designs.
  • Lorem Ipsum
    All the facts – Lipsum generator
  • Typetester
  • The Typetester is an online application for comparison of the fonts for the screen.

Tutorials, Workshops & Guides

    Alles rund um das Thema Typographie
  • TippTipps
    Regeln für die Textverarbeitung von der Fachhochschule Bielefeld
  • – Typographie Grundkurs
    Manuel Bieh hat sich die Arbeit gemacht und den „Type-workshop“ der Underware-Studios übersetzt.
  • Typografie
    screenario beweist durch sein Layout und mit eigenem Tutorial, dass gute Typografie auch im Web funktioniert.
  • Der Typographie – Guide
    Typographie einfach erklärt: Grundlagen, Typographie Geschichte, Schriftzeichen, Schriftklassifikation, Typo – Grundlagen, Typograph. Maßsysteme und Werksatz
  • Typograph
    Lehrgang zu Typographie/Layout/Schrift
  • : Das Lexikon der westeuropäischen Typographie
    Grundlagen, Biographien, Geschichte und Forschung zur westeuropäischen Typographie [ Typografie ] von Wolfgang Beiner
  • typokurz
    Einige wichtige typografische Regeln von Christoph Bier (PDF zum Download)
  • Typolex / Die Schriftklassifikation und ihre Geschichte – von Denis Potschien
    Typolex befasst sich mit der Schriftenklassifikation nach der DIN 16518. Anhand von Beispielen werden die Merkmale der einzelnen Schriften und der historische Hintergrund erläutert. Dazu gibt es eine Kurzübersicht zur Entstehung unseren heutigen Antiqua-Schriften (Flash)
  • Foundations of Design and Typography
    A course in basic graphic design principles and typography
  • Typography for the Web
    Web typography and its significance for design
  • Typography & Page Layout
    Learn Typography and Page Layout – Font and Design – free Tutorial
  • Web Typography Tutorial
    Typographie Tutorial in 2 Lessons by Nadav Savio


  • Fontblog
    Täglich News und Meinungen aus der Grafikszene
  • Grafikfritze
    Schriftgestaltung & Illustration & schöne kostenlose Schriften zum Download
  • Slanted TypoBlog
    Magazin für typographische Kultur
  • spiekerblog | scroll down all the way!
    Blog von Erik Spiekermann,typografischer Gestalter und Schriftentwerfer, Autor mehrerer Fachbücher über Schrift und Typografie sowie zahlreicher Artikel und Essays zum Thema.
    Davors typografisches Tagebuch

Christiane Rosenberger

Christiane ist seit vielen Jahren der gute Geist des Magazins. Sie hat zahlreiche Beiträge im Listen-Stil vorbereitet und zusammengestellt, sich um Moderation und E-Mails gekümmert.

14 Kommentare

  1. Und noch eine Seite mit kostenlosen Schriftarten:
    Mit eigener Vorschaufunktion, hat leider noch nicht jeder ;(

  2. bekommt man auch irgendwo den Sternenkranz vom EU-Führerschein als Zeichensatz?

  3. tolle Sammlung, habe ich mal hier: hinzugefügt, wo ebenfalls weitere Links zu Schriften gesammelt sind :)

  4. ich möchte noch empfehlen.
    dort gibt es viele freie schriftarten. für den laien auf jeden fall interessant.


  5. ein gutes typografie glossar gibts unter

  6. Tools: Ich denke, dieser Generator fehlt noch: Er ermöglicht auch Blindtext in exotischen Zeichensätzen wie Chinesisch, Arabisch, Russisch oder …Hindi. (und Spielereien wie Leetspeak und Morsecode)

  7. Grmpf, Nikolas war schneller…

  8. Zum Thema „Identify a font“ ist WhatTheFont nicht zu verachten.

  9. Wurde hier HTML schon immer rausgefiltert?


  10. Zum Abschnitt Identify a font würde ich noch What The Font empfehlen. Identifiziert eine Schrift anhand eines hochgeladenen Screenshots.

  11. Krass. Ich will gar nicht wissen, wie lange es dauert, diese Beiträge zu erstellen. Gute Arbeit und Hut ab!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.