Typographie

Der mit gedrucktem Text Aufgewachsene erlebt die Webbastelei zunächst als einen Rückfall in die Zeit der (in der Luxus!variante) mit einer Typenrad!schreibmaschine (Block!satz) gesetzten, sodann mit Schere und UHU-Kleber umbrochenen Schülerzeitung. Einige Verbesserungen sind aber möglich, Entwicklungen sind im Gange, Wege können hier gewiesen werden.

Werbung

Rubriken

  • SIFR

    Shaun Inman Flash Replacement — Ersetzung von Text durch Flash-Animation.

  • Fonts

    Quellen für TrueType-Fonts — vorzugsweise solche, die auch deutschsprachige Sonderzeichen, insbesondere Umlaute enthalten.

Im World Wide Web

  • HTML Character Entity References

    Das dürfte eine vollständige Referenz aller in (X)HTML zur Verfügung stehenden Zeichen sein — in ihrer HTML- und Unicode-Notation: Mit dem feminine ordinal indicator sind wir zum Beispiel in der Lage, Magª korrekt zu schreiben.

  • praegnanz.de

    Meine Leitmotive als Mediendesigner sind Prägnanz und Pragmatik. In meiner Arbeit konzentriere ich mich in erster Linie auf Web-Design, Typografie und Corporate Design.

  • Professional Web Typography by Donny Truong

    by DONNY TRUONG

  • Typetester

    Hier können online Fonts mit verschiedenen Attributen getestet und verglichen werden.

  • Webfont Generator

    Hier können Sie fonts in alle Formate konvertieren, die alte und neue Webbrowser darstellen. Der status artis ist das Format *.WOFF2, das derzeit sicherste Format ist *.WOFF.

Werbung

Webtypografie bei Wikipedia

Die Artikel Typografie für digitale Texte und Webtypografie überschneiden sich thematisch. Hilf mit, die Artikel besser voneinander abzugrenzen oder zusammenzuführen (→ Anleitung). Beteilige dich dazu an der betreffenden Redundanzdiskussion. Bitte entferne diesen Baustein erst nach vollständiger Abarbeitung der Redundanz und vergiss nicht, den betreffenden Eintrag auf der Redundanzdiskussionsseite mit {{Erledigt|1=~~~~}} zu markieren. Florian Blaschke (Diskussion) 14:41, 14. Apr. 2016 (CEST)
Webfonts ermöglichen es Webdesignern, Schriftarten zu verwenden, die nicht auf den Computern der Benutzer installiert sind.

Webtypografie bezeichnet die Typografie für digitale Texte und den Gebrauch von Schriftarten im Web. In den Anfängen von HTML wurden die Schriftarten und -stile ausschließlich durch die jeweiligen Einstellungen der Webbrowser bestimmt. Es gab keine Möglichkeit, die auf einer Website angezeigten Schriften zu beeinflussen, bis Netscape 1995 das inzwischen veraltete <font>-Tag einführte, das dann in der HTML-2-Spezifikation als Standard festgelegt wurde. Die definierte Schriftart musste allerdings auf dem Benutzerrechner installiert sein. Ansonsten wurde ein „Fallback-Font“, wie z. B. der im Browser eingestellte Standard-Sans-Serif oder Monospace-Font verwendet.

Um die Gestaltung von der Auszeichnungssprache zu trennen, wurde 1996 die erste Version der Cascading-Style-Sheets-Spezifikation (CSS) veröffentlicht und beinhaltete dieselben Möglichkeiten. Moderne Browser unterstützten aber bald das Herunterladen fremder Fonts vom Webserver. Der erste Browser, der diese Technik nutzbar machte, war der Internet Explorer der Version 4.0. Der Font-Download wurde später Bestandteil des Fonts-Moduls von CSS3 und wurde seitdem in nahezu allen modernen Browsern implementiert. Dadurch stieg das Interesse an Webtypografie und dem Gebrauch herunterladbarer Schriftarten in Webseiten.

Formate[Bearbeiten | Quelltext bearbeiten]

Seit der Einführung von @font-face bei CSS2 können rein technisch alle Schriften in Websites eingebettet werden. Zuvor war es nur möglich, „websichere“ Schriften wie Times New Roman, Verdana oder Arial zu nutzen. Diese sind auf den meisten Rechnern vorhanden und können somit immer angezeigt werden.

Zur Regelung der Lizenzrechte der im Internet genutzten Schriften wurde 2009 das Web Open Font Format (WOFF)[1] spezifiziert. Es unterscheidet sich nur gering von den OpenType-Dateien. Eine WOFF-Datei ist ein ZIP-Archiv, das XML-Metainformationen über Lizenz und Hersteller sowie den RawFont enthält. WOFF-Unterstützung gibt es in allen aktuellen Browsern.[2] Bei Vorgängerversionen des Internet Explorers 9 werden nur Webfonts im Embedded-OpenType-Format (EOT-Format) angezeigt. Generell ist nicht das Schriftformat, wie TrueType (TTF), OpenType (OT), Scalable Vector Graphics (SVG) oder PostScript ausschlaggebend, sondern das Hinting, welches die Darstellungsqualität der Schrift im Browser und auf dem Bildschirm verbessert.

Darstellungstechnik[Bearbeiten | Quelltext bearbeiten]

Die Grundlage jeder Bildschirmdarstellung sind Bildpunkte, genannt Pixel (abgeleitet von „Picture Element“). Die ersten Bildschirmschriften waren Pixelfonts. Diese werden so genannt, da sie rein aus Rasterpunkten bestehen und jedes Buchstabenpixel so auf dem Bildschirm angezeigt wird, wie es entworfen wurde, vorausgesetzt, dass das Schriftraster mit dem Bildschirmraster übereinstimmt. Pixelfonts können nachträglich nicht vergrößert werden. Am Anfang der Computertechnik, als die Bildschirmauflösung noch sehr gering war, wurden meist nur Großbuchstaben verwendet, da Kleinbuchstaben in dieser geringen Auflösung nur schwer lesbar waren.

Mit der Entwicklung von hochauflösenden Bildschirmen veränderte sich auch die Webfont-Darstellung. Da die Schriften auf höher aufgelösten Bildschirmen kleiner ausfallen, hat man Webfonts auf 14 bis 16 Pixel vergrößert. Mit der Zeit ging man auch weg von Pixelschriften und hin zu Vektorschriften. Heute werden alle Webfonts zunächst als Vektorgrafiken designt und dann vom jeweiligen Betriebssystem gerastert, d. h. in eine Pixelmatrix umgewandelt, um den Webfont in einem Browser darstellen zu können.

Das Rastern bzw. Rendering hat drei Entwicklungsstufen hinter sich: Zunächst gab es nur die 1-Bit-Methode (auch Schwarz-Weiß-Rendering genannt), danach folgte die Graustufenglättung, heute benutzt man überwiegend die Subpixel-Rendering-Methode, bei der nur eines von drei farbigen Subpixeln (Rot, Grün und Blau) anstatt eines kompletten Pixels angesteuert wird. Dadurch kann eine höhere Schärfe bei der Darstellung von Webfonts erzielt werden. Je nach Browser und Betriebssystem kommen verschiedene Rendering-Methoden zum Einsatz, was zur Folge hat, dass Webfonts von Browser zu Browser unterschiedlich dargestellt werden.

Um die Darstellung von Webfonts zu verfeinern, musste das Rasterverfahren präzisiert werden, dafür wurde das Hinting (vom englischen „Hint“) erfunden und bei den TrueType-Schriften zum Standard erklärt. Beim Hinting werden – wie der Name verrät – Hinweise zum Rastern in der Fontdatei abgespeichert, sodass der Webfont später perfekt ins Pixelraster passt und es nicht zur Unschärfe kommt. Beispielsweise werden Informationen bezüglich der Anpassung des Webfonts an verschiedene Schriftgrößen oder die Wichtigkeit von verschiedenen Linien abgelegt. Für noch prägnantere Ergebnisse übernehmen manche Webfontdesigner das Hinting von Hand. Bei kostenlosen Webfonts wird meist auf das Hinting verzichtet.

Implementierung in CSS[Bearbeiten | Quelltext bearbeiten]

Das folgende Beispiel zeigt eine Implementation für gängige Browser. Es können weitere Formate, etwa für mobile Endgeräte, definiert werden.

@font-face {
  font-family: DroidSerif;
  src: local("Droid Serif"),  /* Prüfung, ob Schriftart-Datei bereits auf dem Computer des Betrachters installiert ist */
       url('./pfad/zu/droidserif.ttf') format('truetype'), /* Format für Gecko- und Webkit-Browser */
       url('./pfad/zu/droidserif.eot') format('eot'); /*Internet Explorer ab Version 5.5*/
  font-weight: normal;
  font-style: normal;
}

/* Verwendung der geladenen Schrift */
p {
  font-family: DroidSerif;
}

Webfont-Anbieter[Bearbeiten | Quelltext bearbeiten]

Seit der Entwicklung des Web-Open-Font-Formats werden Webfont-Lizenzen verkauft. Die Zahl der Webfont-Anbieter ist stetig gewachsen, ihr Angebot sowie ihre Konditionen sind dabei sehr verschieden.[3] Im Wesentlichen liegen die Unterschiede im Hosting und den Bezahlmethoden. Einige Webfont-Dienste bieten Selbsthosting an, das heißt, per Einmalzahlung erhält man eine Font-Datei und den jeweiligen CSS- oder JavaScript-Code. Somit kann der Webfont auf den eigenen Server hochgeladen und über den Code in die Website eingebettet werden. Bei Anbietern von Open-Source-Schriften ist die Selbsthosting-Lizenz kostenfrei.

Bei den meisten Webfont-Diensten erhält man einen Link zu einem fremden Server, wo der Webfont abgelegt ist. Mittels URL-Angabe unter @font-face wird der Webfont beim Aufruf der Seite geladen.

Probleme mit Webtypografie[Bearbeiten | Quelltext bearbeiten]

Technische Probleme[Bearbeiten | Quelltext bearbeiten]

Extern geladene Schriftarten können unter verschiedenen Betriebssystemen unterschiedlich dargestellt werden.[4] Zudem wird der Text häufig zunächst in einer lokal vorhandenen Schriftart angezeigt, erst wenn der Webfont vollständig geladen ist, ändert sich die Darstellung. Dies kann als Flash of unstyled text, einer Unterart des Flash of unstyled content, als störend wahrgenommen werden.

Rechtliche Probleme[Bearbeiten | Quelltext bearbeiten]

Werden Webfonts von externen Servern eingebunden statt auf dem eigenen Webserver abgelegt, entsteht ein Datenschutzproblem: Besucher eines Webservers im EU-Gebiet erwarten mit Recht, dass die Datenschutz-Grundverordnung beachtet wird. Wenn aber Webfonts direkt z. B. von Google Fonts eingebunden werden, können bei jedem Besuch der EU-Website Datenspuren außerhalb der EU entstehen. Weil das z. B. in WordPress die Voreinstellung ist, wurden WordPress und Google bei den Big Brother Awards 2017 tadelnd erwähnt.[5]

Icon-Fonts[Bearbeiten | Quelltext bearbeiten]

Icon-Fonts sind Webfonts, die Icons statt Buchstaben darstellen und vor allem als funktionale Piktogramme verwendet werden. Sie sind eine Alternative zu reinen Bilddateien oder CSS-Sprites. Da Icon-Fonts meist als Vektorschriften angelegt werden, können diese grafisch skalieren[6] und haben eine geringere Dateigröße als Pixel-Icons. Es gibt zahlreiche freie Icon-Fonts-Sets – das bekannteste ist Font Awesome[7] – oder frei konfigurierbare Zusammenstellungen von Icon-Fonts.[8]

Literatur[Bearbeiten | Quelltext bearbeiten]

  • Johannes Bergerhausen, Siri Poarangan: decodeunicode: Die Schriftzeichen der Welt. Hermann Schmidt, Mainz 2011, ISBN 978-3-87439-813-8. Alle 109.242 Schriftzeichen, die man nach Unicode im Web darstellen kann in einem Buch, Deutsch.
  • The Unicode Consortium: The Unicode Standard, Version 6.0.0. The Unicode Consortium, Mountain View CA, 2011, ISBN 978-1-936213-01-6. Der offizielle Standard, technisches Manual für IT-Spezialisten, Englisch.

Weblinks[Bearbeiten | Quelltext bearbeiten]

Einzelnachweise[Bearbeiten | Quelltext bearbeiten]

  1. W3C Spezifikation WOFF 5. Mai 2013
  2. WOFF Unterstützung
  3. Übersicht Webfonts-Dienste 5. Mai 2013
  4. Webdesign mit unüblichen Schriftarten 21. April 2012
  5. Tadelnde Erwähnungen. In: BigBrotherAwards.de. 5. Mai 2017, abgerufen am 28. Juli 2017.
  6. Archivlink (Memento des Originals vom 27. Mai 2014 im Internet Archive) i Info: Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe den Link gemäß Anleitung und entferne dann diesen Hinweis.@1@2Vorlage:Webachiv/IABot/www.elmastudio.de
  7. http://fortawesome.github.io/Font-Awesome/
  8. http://www.weloveiconfonts.com/

Videos

Die nachfolgenden Videos werden anhand von Suchbegriffen automatisch angezeigt. Sie unterliegen keiner redaktionellen Prüfung, weshalb ich keine Verantwortung für die Qualität des Inhalts übernehme!

Unterstütze den Channel auf Patreon und erhalte zusätzliche Inhalte, Features und Funktionen für (...)
Cette formation a pour but de sensibiliser le public aux différents enjeux dans le choix d’une (...)
Fünf Tipps mit denen man Websites besser lesbar macht Slides: https://www.slideshare.net/zeichenschat
7 Règles Typographiques à connaitre PLUS D'INFOS 👇 Fichier PSD: http://bit.ly/2nuiF6L Graphiques (...)
Vous êtes familier(ère) avec le monde de l'édition, êtes fervent(e) de typographie et vous êtes de (...)
In this video, learn more about the basics of working with typography. Visit (...)
http://www.nethys.fr/ L'agence Nethys réponds à vos besoins en communication internet. Contactez (...)
Comment simplifier la gestion des typo pour tous les H1, H2, H3 et lier son site à son MOCKUP (...)
📌 Beschreibung/Description Typografie - Basics & Wirkung Teil 1 von 4 Lass uns heute über das (...)
In dieser Videoserie zeige ich dir Schritt für Schritt wie du selbst Bilder und Grafiken für (...)
In this video, you’ll learn the basics of layout and composition in graphic design. Visit (...)
Schriften sind bei weitem nicht nur für Grafiker wichtig. Auch andere Bereiche haben immer mehr (...)
http://www.hcg-corporate-designs.com Typografie ist für viele ein etwas "schwammiges" Thema. (...)
Comment éviter les erreurs les plus communes en typographie et en calligraphie, voilà ce que je (...)
Nous allons voir dans cette vidéo comment enrichir nos visuels, nos mise en page à l'aide de (...)
Alles Infos zu den Creative Cloud Tarifen: Create Now Online Workshop Week: Animierte (...)
http://tuto.elephorm.com/choisir-typographie Découvrez dans cette vidéo extraite de la formation (...)
Jason Santa Maria conference at Build 2011.
… fajn, a teď jak to dostat na web?
Qu’il s’agisse d’interfaces, de sites web ou d’animation, le design du texte à l’écran se réalise (...)
"Typografie-Podcast" für den Duden-Verlag (einsetzbar als Kino-, Web- oder TV-Spot). Sinnhafte (...)
Voici le premier épisode où j'aborde la typographie. J'aborde le Trajan, dans cette vidéo vous (...)
Le saviez-vous ? La superbe typo Linotype, Monotype, Dafont, Adobe.. de votre charte graphique (...)
Prof. Erik Spiekermann (Edenspiekermann AG) präsentiert, wie wichtig typografische Standards wie (...)
Wat zijn de meest gebruikte typografische CSS eigenschappen voor web.
Tutoriel After Effects pour apprendre à créer des animations réalistes et donner vie aux (...)
Apprenez à intégrer une typographie en HTML/CSS avec Thibault Stringat, étudiant web à l'Institut (...)
Galileo Computing -- Tech Talks Web 2008: Konzeption & Praxis Multimediatreff, Köln -- (...)
Pour une expérience utilisateurs plus fluides on peut utiliser les fonts du système. 365 JOURS DE (...)
tutoriel photoshop sur la typographie avec de la calligraphie et des formes comme les outils de (...)
Tutoriel Illustrator CC pour t'apprendre à créer un logo vectoriel professionnel pour tes futurs (...)
Ein großer Bestandteil von Webseiten ist nach wie vor Text. Die weitreichende Unterstützung von (...)
Galileo Computing -- Tech Talks Web 2008: Konzeption & Praxis Multimediatreff, Köln -- (...)
Galileo Computing -- Tech Talks Web 2008: Konzeption & Praxis Multimediatreff, Köln -- (...)
Voici en 20 mn l'essentiel sur la typographie, pour monter des documents qui tiennent la route, (...)
Agence web Sublimeo http://www.sublimeo.com Typographie en mouvement
Galileo Computing -- Tech Talks Web 2008: Konzeption & Praxis Multimediatreff, Köln -- (...)
Grâce à ce tutoriel, vous serez capable d'utiliser Adobe Illustrator pour créer vos propres (...)
Otmar Hoefer ist Direktor für Font-Marketing bei Linotype in Bad Homburg. Als Kind besuchte er (...)
Stephen Coles is a writer, editor, and typographic consultant who is particularly obsessed with (...)
Hier gibt es noch mehr Infos und weitere Lektionen zum Thema Webdesign: http://www.afoma.de/lektion/
Prof. Erik Spiekermann (Edenspiekermann AG) präsentiert, wie wichtig typografische Standards wie (...)
*Facebook, Twitter et Google font leur autocritique* et promettent de se réformer *devant le (...)
Read PDF http://freepdf.tempebosok.xyz/?book=0764537008
Download this Template: http://bit.ly/1xptiqc Thanks for checking out Product Web Promotion (...)
Click to download http://prettyebooks.space/02/?book=0321679989 Download Fluid Web Typography (...)
FAVORIT BOOK CSS Fonts: Web Typography Possibilities [DOWNLOAD] ONLINE Visit Here : (...)
Download PDF/Read Online Book: Good Design, Down to the LetterPackages on store shelves, (...)
Click Link Here http://madbooks.xyz/?book=1564965171
Get Now http://bankbooks.xyz/?book=1491907096 Responsive Typography: Using Type Well on the (...)
Read Book Online Now http://www.ezbooks.site/?book=1440313695 Mastering Type: The (...)
Click Link Here http://madbooks.xyz/?book=B003IIUGA0
Read Book Online Now http://worthbooks.xyz/?book=1491907096 Download Responsive Typography: (...)
Get it Now http://goodreadsbooks.com.readingpdf.com/?book=1440313695 [Read] (...)
Get Now http://outsmartbook.site/?book=1568303378 Reads [Online PDF] Web Designer's Guide (...)
Read and Dowload Now http://madbooks.xyz/?book=B007S2UGSE [PDF] Mastering Type: The (...)
Click to download http://prettyebooks.space/02/?book=0321679989 Download Fluid Web Typography (...)
Download Responsive Typography: Using Type Well On the Web Ebook Free Read Book PDF Online (...)
Download The New Web Typography: Create a Visual Hierarchy with Responsive Web Design Ebook (...)
Read Book Online Now http://easybooks.xyz/?book=B007S2UGSE Download Mastering Type: The (...)
Read or Download Now http://popbooks.xyz/?book=1523470593 Read Typography!: The Ultimate (...)
Read Now http://mediabooks.club/?book=B007S2UGSE Download Mastering Type: The Essential (...)
Get it Now http://goodreadsbooks.com.readingpdf.com/?book=1440313695 [PDF] Mastering (...)
Download Mastering Type: The Essential Guide to Typography for Print and Web Design E-Book (...)
Click Here http://tinyurl.com/zbm7yj5 Ebook Mastering Type: The Essential Guide to (...)
Click Here http://worldebook.org/?book=1491907096
Mastering Type: The Essential Guide to Typography for Print and Web Design Read or (...)
Books Mastering Type: The Essential Guide to Typography for Print and Web Design Full Online (...)
Read Responsive Typography: Using Type Well on the Web Ebook Free Read Book PDF Online Here (...)
Read Ebook Now http://goodreadsbooks.com.readingpdf.com/?book=0764537008 [PDF Download] (...)
Read or Download Here http://pdfriendly.site/?book=B007S2UGSE Read Mastering Type: The (...)
Read Bulletproof Web Typography Ebook Online Read Book PDF Online Here http://ebookstop.site/?book=
Download Great Web Typography PDF Online Read Book PDF Online Here http://ebookstop.site/?book=0764
Read Web Designer's Guide to Typography Ebook Online Read Book PDF Online Here (...)
Read or Download Now http://goodreadsfull.com.e-bookpopular.com/?book=B007S2UGSE [PDF (...)
Read Now http://readebooksonline.com.e-bookpopular.com/?book=0126455457 [PDF] Typography on (...)
Mastering Type: The Essential Guide to Typography for Print and Web Design Click Here (...)
Download Mastering Type: The Essential Guide to Typography for Print and Web Design Ebook (...)
Read Now http://www.eBooks.com.greatpdf.top/?book=B018466NC0 PDF Typography The Ultimate (...)
Visit Here http://ebookuye.org/?book=0764537008
Get Now http://outsmartbook.site/?book=B018466NC0 Reads [PDF] Typography!: The Ultimate (...)
Get the joy of Reading http://newbook.com.readingpdf.com/?book=1138781398 Reads in a (...)
Read or Download PDF Online Here http://freebooks.com.playstier.com/?book=1491907096 [PDF (...)
Read Now http://www.eBooks.com.greatpdf.top/?book=B003IIUGA0 PDF Fluid Web Typography PDF (...)
Get Now http://outsmartbook.site/?book=1564965171 Reads [PDF] Web Site Graphics: (...)
Read and Download Now http://www.eBooks.com.greatpdf.top/?book=1440313695 PDF Mastering (...)
Read Book Online Now http://worthbooks.xyz/?book=1491907096 Read Responsive Typography: (...)

In der Warenwelt

Overlap: Web & Typographie BOOK NEU

EUR 20,82
Angebotsende: Sonntag Jul-15-2018 21:01:56 CEST
Sofort-Kaufen für nur: EUR 20,82
Sofort-Kaufen | Zur Liste der beobachteten Artikel hinzufügen

Responsive Typographie: verwendet Typ gut on the Web von Jason Pamental

EUR 21,48
Angebotsende: Samstag Jul-14-2018 21:06:48 CEST
Sofort-Kaufen für nur: EUR 21,48
Sofort-Kaufen | Zur Liste der beobachteten Artikel hinzufügen

Responsive Typographie: verwendet Typ gut on the Web von Jason Pamental

EUR 21,25
Angebotsende: Samstag Jul-14-2018 21:06:48 CEST
Sofort-Kaufen für nur: EUR 21,25
Sofort-Kaufen | Zur Liste der beobachteten Artikel hinzufügen

Typographie web von Santa Maria, Jason | Buch

EUR 9,54
Angebotsende: Sonntag Jul-15-2018 4:35:52 CEST
Sofort-Kaufen für nur: EUR 9,54
Sofort-Kaufen | Zur Liste der beobachteten Artikel hinzufügen

Webdesign, Marketing, Navigation, Usability, Designideen, Typographie,... | Buch

EUR 3,36
Angebotsende: Montag Jul-9-2018 22:37:14 CEST
Sofort-Kaufen für nur: EUR 3,36
Sofort-Kaufen | Zur Liste der beobachteten Artikel hinzufügen

Webgrids - structure et typographie de la page web von Anne-Sophie Fra... | Buch

EUR 10,33
Angebotsende: Samstag Jul-7-2018 17:31:00 CEST
Sofort-Kaufen für nur: EUR 10,33
Sofort-Kaufen | Zur Liste der beobachteten Artikel hinzufügen

BenutzerIn

Werbung

Weiterempfehlen

© 2002 - 2018 Robert Zöchling | erstellt mit SPIP  | Impressum