Menu

Typography

Geheimnis-einer-gelungenen-Schriftenmischung

Das Geheimnis einer gelungenen Schriftmischung

Man nennt sie nicht umsonst die Königsdisziplin in der Typografie. Denn, für eine gelungene und ästhetisch wirkende Schriftmischung bedarf es weit mehr als nur zwei Schriften in einem Projekt „zusammenzuwürfeln“. Die Kunst der Schriftmischung erfordert sehr viel Erfahrung im Umgang mit Schriften. Neben dem solltest Du viel Sinn für Form, Struktur und Proportion mitbringen.

Mit der momentan existierenden Schriftvielfalt braucht es mehr denn je sehr viel Fleiß und Genauigkeit für eine gelungene Schriftmischung. Wie Du Dich dieser Kunst näher kannst und welche Regeln es zu beachten gibt, will ich Dir in diesem Beitrag etwas näherbringen.

Warum mischt man eigentlich Schriften?

Die Antwort auf diese Frage liefert uns bereits die zentrale Aufgabe einer typografischen Gestaltung, Inhalt verständlich und lesbar aufzubereiten. Neben den klassischen Formen ist innerhalb eines typografischen Gesamtwerkes die Schriftmischung eine der wirkungsvollsten Art der Auszeichnung.

Häufige Verwendung finden sie bei Marginalien, Legenden, Rubriken und lauten Auszeichnungen. Zudem können wir vielschichtige Inhalte didaktisch strukturieren und separieren. Das hilft dem Leser, die Texte unvermittelt zu erfassen und einzelne Passagen besser aufzufinden.

Orientierung für eine gelungene Schriftmischung

Die nachstehenden Regeln stellen kein feststehendes Dogma dar. Sie dienen mehr der Orientierung für eine gelungene und ästhetisch anmutende Schriftmischung. Die Schriftmischung ist eine sehr individuelle, geschmacklich gelenkte Angelegenheit, die zudem wechselnden Schönheitsidealen unterliegt.

Sie sind Zeiterscheinungen und folgen aktuellen Modetrends, daher sollte als Erstes immer der Einsatzzweck hinterfragt werden. Für langlebige Drucksachen sollte generell auf eine Mischung verzichtet werden.

Wann sollte ich nicht mischen

Es gibt einige Schriftfamilien, die sich grundsätzlich nicht mischen lassen, da das Ergebnis unharmonisch oder zu kontrastarm ausfallen würde. Daher sollte es vermieden werden, zwei gebrochene Schriften miteinander zu mischen, auch wenn der Duktus gleich oder ähnlich ist. Sehr unpassend ist auch eine Kombination aus Klassizistischen und Barock-Antiqua-Fonts.

In der ersten Zeile die „Berliner“ als Vertreter der gebrochenen Schriften, darunter die „Bodoni“ als eine klassizistische Antiqua und zu guter Letzt die Barock-Antiqua „Caslon“

Sehr schwierig gestaltet sich auch das „paring“ von englischen Schreibschriften. Zudem solltest Du verzichtet, zwei Fonts aus derselben Schriftklasse zu mischen.

In der ersten Zeile die „Fira Sans“ und darunter die „Montserrat“, beide Vertreter aus der Klasse der serifenlosen Linear-Antiqua

Regeln zur Schriftmischung

Eine gelungene Schriftmischung bezieht sich immer auf die gewählte Grundschrift. Ihr können zusätzlich Schnitte derselben Familie oder eine geeignete weitere Schrift zur Seite gestellt werden. Dabei spielen der Duktus (Linienführung) einer Schrift sowie ihr grundlegender Charakter eine entscheidende Rolle bei der Auswahl.

Daraus lässt sich als eine Regel, die wohl einfachste Form der Mischung definieren, dass sich zwei Schriften mit gleichartigen Duktus und ähnlichen Proportionen gut mischen lassen.

Innerhalb einer Schriftfamilie

Dieser Zustand ist innerhalb einer Schriftfamilie immer gegeben. Daher empfiehlt es sich bei der Bereitstellung und dem eigenen Hosting von Schriften auch die jeweiligen Schriftschnitte (Regular, Kursiv, Semi- oder Bold und Kapitälchen) separat bereitzustellen.

Die „Playfair Display“ in unterschiedlichen Schriftschnitten

Innerhalb einer Schriftsippe

Eine weitere und sichere Form der Mischung gelingt innerhalb einer Schriftsippe. Schriftsippen sind Schriftsysteme, die meist aus einer Antiqua (serif)-, einer Grotesk (sans serfi)– und einer Egyptienne (salb serif) -Schriftfamilie bestehen. Sie sind im Regelfall vom Schriftdesigner aufeinander abgestimmt und weisen gleiche Grundformen und Proportionen auf.

Die Sippe der „Source Pro“ aus der Google Font Library

Erzeuge ausreichend Kontrast

Eine gelungene Schriftmischung zeichnet sich immer durch einen hohen Kontrast aus. Daher sorge bei der Wahl der Schriften und Schnitte, aus unterschiedlichen Schriftfamilien, für ausreichend Gegensätzlichkeit. Ein starker Kontrast weckt die Aufmerksamkeit und führt den Leser.

Ein starker Kontrast, Headline „Playfair Display Bold italic“, Fließtext „Source Sans Pro Light“

Antiqua & Schreibschrift

Eine sehr gute Mischung gelinge auch zwischen Antiqua-Fonts und Schreibschriften. Derartige Kombination liegt momentan sehr im Trend und man findet sie in vielen Webprojekten wieder. Mittlerweile gibt es viele, aufeinander abgestimmte Pakete mit sogenannten Schreib- oder Signaturschriften.

Die „Marion“ mit einer passenden Schreibschrift, eine Kombination von Vielen auf CreativeMarket.com

Faktoren für eine gelungene Schriftmischung

Das oben genannte Regelwerk formuliert die Basics und dienen an dieser Stelle als Einstieg in das Thema Schriftmischung. Es gibt weit mehr Faktoren – als hier genannt wurden – die zu einer gelungenen Schriftmischung beitragen.

Befasst man sich intensiv mit Schriftmischung, dann ist die Architektur von Schriften eine wertvolle Konstante. Hier spielen die Dickte, Ober-, Mittel- und Unterlängen sowie die Schriftweite der einzelnen Figuren ein entscheiden Rolle bei der Schriftwahl. Ein scheinbar perfektes Ergebnis erzielt man u. a. wenn die x-Höhe der jeweiligen Schriften aufeinander abgestimmt werden.

Die „Fira Sans“ mit 16pt gesetzt, dazu die „Playfair Display“ angeglichen auf die x-Höhe mit 21pt

Die wohl bekannteste Variante, Headline und Fließtext in unterschiedlichen Schriften zu setzen, beschreibt nur ein „Spielart“ in diesem typografischen Segment. Bereits der subtile Austausch einzelnen Buchstaben, Ziffern und Ligaturen kann die Ästhetik Deiner Arbeit qualitativ aufwerten.

Eine gelungene Mischung zeichnet aber mehr aus als nur die technischen Feinheiten, sie ist auch gleichzeitig visuelle Poesie! Sie kann Spannung erzeugen, Harmonie vermitteln oder mit einem rassigen Temperament präsentieren.

Beispiele aus der Google Font Library

Wenn Du Dich im Netz auf die Suche nach geeigneten Font-Parings machst, wirst Du schnell fündig werden. Auf unterschiedlichsten Plattformen bekommst Du – zumeist für die Google Schriften – umfangreiche Empfehlungen. Trotz allem würde ich Dir raten, nicht wahr los zur erst besten Mischung zu greifen.

Suche Dir als Erstes eine, für Dein Projekt passende, Grundschrift. Erst dann entscheide, mit Blick auf den gesamten Kontext, ob eine zweite Schrift sinnvoll und für Dein Projekt förderlich ist. In vielen Fällen bewahrheitet sich die alte Weisheit: „Weniger ist mehr!“

So hat jedes Projekt seine Eigenheiten, die es abzuwägen gilt. Das bedeutet aber nicht, dass Du immer von vorne beginnen musst. Es gibt eine Menge bewehrter Kombinationen, auf die auch ich gerne zurückgreife. Einige meiner Favoriten möchte ich Dir an dieser Stelle einmal vorstellen:

Alle hier gezeigten Schriften stammen aus der „Google Font Library“, die Schriftschnitten inklusive der passenden Webformate findest Du an dieser Stelle: https://google-webfonts-helper.herokuapp.com/fonts

Hinweis: Werbung, unbeauftragt! Bei diesem Text handelt es sich um einen redaktionellen Beitrag, der unbeabsichtigt durchaus eine werbende Wirkung haben könnte, ohne dass ich von irgendeinem Unternehmen dafür beauftragt wurde!

Header-tools

Themify Custom Font – Schriften selbst verwalten

Vor langer Zeit…, so beginnen die meisten Geschichten, wie auch diese. Es war einmal vor langer Zeit, da kannte das Netz nur die websicheren Schriften. Schriften wie die „Time New Roman“, „Arial“ oder „Verdana“, die plattformübergreifend auf jedem System zu finden waren. Nur sie gewährleiteten, dass der Inhalt einer Webseite auch so wiedergegeben wurde, wie der Verfasser ihn kreiert hatte.

Doch dann erschienen neue Sterne am Himmel, die Webschriften. Optimiert für den Bildschirm, beglückten sie uns zuerst in Pixelform und später als Vector-Schriften. Und ihre Zahl steigt stetig an. Mittlerweile tummeln sich unzählige Anbieter auf dem Markt und es gibt tausende von Schriften zu Auswahl. Aber, genau da liegt auch der Hund begraben.

Warum Schriften selbst verwalten?

Zugegeben, es wird uns heutzutage sehr einfach gemacht, eine Schrift in ein Webprojekt einzubinden. Viele Anbieter haben bereits eine Schnittstelle zu den beliebten Google Fonts in ihren Themes und Frameworks integriert. Auch im Themify Pagebuilder findest Du diese Schnittstelle. Warum sollte ich mir also die Arbeit machen, Schriften selbst zu hosten?

Dazu zwei Gedankengänge, die Du in diesem Zusammenhang in Betracht ziehen solltest. Diese o.g. Schnittstelle ist im Grunde nur ein Link auf die jeweilige Font-Library, beispielsweise die Google-Fonts. Die eigentliche Schrift ist also Fremdgehoste oder auch Cloudbasiert, wenn man so will. In Deiner CSS hast Du hinterlegt, wie Deine Überschriften (H1-6) und die Paragrapen (p) aussehen soll. Wenn nun ein Besucher auf Deine Seite kommt, interpretiert dessen Browser die hinterlegten CSS Anweisungen und über den Link werden die ausgewälten Schriften geladen und dem Besucher angezeigt.

Aber genau mit diesem Vorgang gehen zwei „Probleme“ einher. Zum Einen greift Deine Seite auf einen externen Dienst zurück. Nach der neuen Datenschutzverordnung DS-GVO bist Du als Seitenbetreiber verpflichtet, mit jedem externen Anbieter eine Datenverarbeitungsvertrag zu schließen. Die gilt grundsätzlich dann, wenn Daten an Dritte weitergegeben werden, so auch bei sämtlichen Google Diensten. Laut Google soll das beim Font-Service zwar nicht der Fall sein, aber he, es ist Google!

Ein zweiter Punkt, der hierbei ins Gewicht fällt, Deine Seiten-Performance. Jeder Zugriff auf einen externen Dienst verbraucht Zeit und Ressourcen Deiner Seite. Das mag in Zeiten von 4/5 G optisch nicht ins Gewicht fallen, aber dieser Vorgang schmälert trotz allem die Ladegeschwindigkeit bei jedem Seitenaufruf. Und das wiederum beeinfluss das Ranking Deiner Seite bei den großen Suchmaschinen.

Aber diese gesamte Problematik kannst Du umgehen, wenn Du deine Schriften selbst verwaltest. Wie einfach das mit den Themify Custom Fonts funktioniert, zeige ich Dir in diesem Beitrag!

Die richtigen Schriften finden

Bereits unter CSS2 bekamen wir die @font-face Regel an die Hand, die es uns ermöglicht, Schrift selbst zu verwalten und in ein Webprojekt einzubinden. Ich hatte hierzu auch schon einmal eine ausführlichen Beitrag geschrieben. Hierbei waren allerdings einige Kenntnisse in CSS erforderlich, um die benötigten Verknüpfungen herzustellen. Themify macht es Dir aber deutlich einfacher. Du brauchst Dich nur noch um die Beschaffung der gewünschten Schrift kümmern.

Welche Schriften darf ich verwenden?

Im Grunde darfst Du jede Schrift verwenden, wenn Du die erforderlichen Rechte an dem Font besitzt. Schriften, wie auch viele andere Designprodukte, sind Lizenzgebunden. Das bedeutet, Du muss dir ggf. für eine Schrift eine Lizenz kaufen um sie nutzen zu können. Das ist von Anbieter zu Anbieter unterschiedlich geregelt. Daher empfehle ich Dir , vorab ein Blick in die jeweiligen Vertragsbedingungen zu werfen.

Startseite Google Fonts
Die Google Font Library

Es gibt aber auch kostenlose Möglichkeiten an Schriften zu gelangen. Eine Möglichkeit ist die Google-Font-Library. Die hier angebotenen Schriften darfst Du ohne weiteres frei nutzen. Wenn Du mit Produkten aus der Adobe® Cloud arbeitest, hast Du auch automatisch Zugang zum Typekit von Adobe®. 

Startseite Adobe Fonts
Typekit von Adobe®

Auf Plattformen wie, Dafont.com, MyFonts.com oder FontSquirrel.com, findest Du im Regelfall die Lizenzbedingungen in den jeweiligen Beschreibungen. Hier ist nicht selten „für den Privaten Gebrauch kostenlos“ zu lesen. Bedeutet, erst der Einsatz auf kommerziell genutzten Webseiten wird dann für Dich kostenpflichtig.

Eine sehr schöne Quelle, vor allen für die derzeit sehr in Mode gekommenen „Handschriften“, ist die Seite CreativeMarket.com. Hier findest Du vereinzelt kostenlose Angebote, die aber in abgespeckter Form ausgeliefert werden. Die kostenpflichtigen Varianten befinden sich aber in einem bezahlbaren Rahmen. 

Startseite Creative Market
Handschriften auf Creative Market

Wenn Du allerdings auf der Suche nach etwas Speziellerem bist, bleibt nur der Gang zu den Font Foundries. Angebote findest Du bei Monotype, URW++, ITC oder Type Mates. Hier fangen die Einzellizenzen ab 30.00 EUR pro Schnitt an und können gerne in die hunderte, für einen vollständigen Satz, anwachsen. 

Webfont-Formate

Wenn Du deine gewünschte Schriftdatei (.ttf/.otf) vorliegen hast, kann es an den nächsten Schritt gehen. Leider gibt es noch immer kein browserübergreifendes Format. Jeder Hersteller kocht hier immer noch sein eigenes Süppchen. Ergo, benötigst Du alle browserspezifischen Fontformate Deiner Schrift.

Hier gibt es grob zwei Gruppen, für alle modernen Browser das .woff ,.woff2 und .svg Format. Einige ältere Browser benötigen auch das .ttf und .eot Format. Nicht alle Formate sind zwingend, es hängt ein wenig von Deiner Zielgruppe ab und wie diese im Netz unterwegs sind.

Ein Blick in ein Analyse-Tool (z. Bsp. Google Analystic) hilft Dir dabei herauszufinden, über welche Technik (Browser) Deine Seite besucht wird. Hieraus ergeben sich die benötigten Formate, die Du zwingend einbinden solltest.

Speziell Google stellt für die benötigte Webformate auf der „Google-Webfonts-Helper“ Plattform die modernen Webformate bereit. Das erübrigt den Schritt über eine w.u.g. Webfont-Generator.

Wenn Du Schrift-Lizenzen einkaufst, besteht immer die Option, diese auch als Webfont-Variante zu laden. Dieses Paket enthält im Regelfall die .woff und .woff2 Dateien der Schrift. Benötigst Du zusätzlich eins der anderen Formate, besteht die Möglichkeit dieses über ein Webfont-Generator zu erstellen. Wie genau das funktioniert, findest Du in diesem Beitrag.

Übrigens: Diese Generatoren verarbeiten nicht jede Schrift! Namenhafte Schriften, wie beispielsweise die „Didot“ sind vom jeweiligen Hersteller geschützt. Auch wenn Du auf irgendwelchen dubiosen Seiten den Font herunterladen kannst, spätestens beim generieren der Webformate wirst Du merken, das hier kostenpflichtige Lizenzen erforderlich sind.

Deinen Font unter Themify einbinden

Voraussetzung für die eigene Schriftverwaltung, Du nutzt den Themify Page Builder mit einem freien Themes oder ein Themify Pro Themes*. In beiden Fällen findest Du in der linken Menüleise unter „Themify Settings“ den Unterpunkt „Custom Font“ im Hauptmenü von WordPress.

Die Custom Fonts im Themify Builder
Das Untermenü „Custrom Fonts“

Im geöffneten Dialog legst Du einen neuen Font über den Button „Add New“ an. Als Erstes vergibst Du einen Namen (1), im Regelfall ist das der Schriftname selbst. Wähle als nächstes das Schriftgewicht und den Style aus (Schrift Weight im CSS = 100-900; Style = Normal, Italic, Oblique). (2) Diese Angaben müssen Deiner geladenen Schrift entsprechen. Dann erfolgt der Upload der einzelnen Dateien (3). Wenn Du alle Formate geladen hast, geh rechts auf den Button „Veröffentlichen“, Fertig. Du hast Deine ersten Font eingebunden.

Eine neue Schrift in den Themify Custom Fonts anlegen
Einen neuen Font anlegen

Wenn Du mehrere Gewichtungen (100-900) der Schrift hast, kannst Du im selben Dialog auch eine weitere Variante der Schrift anlegen. Über den Button „Add New Variation“ öffnen sich neue Auswahlfelder.

Neue Variation einer Schrift in den Themify Custom Fonts
Eine neue Variation einer Schrift anlegen

Upload von .ttf Dateien unter WordPress

Spätestens bei Hochladen der .ttf Datei wirst Du auf ein kleines Problem stoßen. Standartmäßig ist der Upload dieses Formats aus Sicherheitsgründen unter WordPress deaktiviert. Man kann mit einem kleine Code-Snippet diesen Sicherheitsmechanismus vorübergehend außer Kraft setzen. Du solltest ihn, nach getaner Arbeit aber wieder zurücksetzen. Dazu schreibe nachfolgender Code in die wp-config.php Deines Themes oder alternativ dem Child Themes.

<!--?php define('ALLOW_UNFILTERED_UPLOADS', true); ?-->

Es gibt allerdings auch eine einfachere Methode! Lade diese Datei einfach via FTP in das Upload-Verzeichnis von WordPress hoch. Öffne Deine WordPress Installation in einem FTP-Program (bsp. FileZilla). Navigiere zum Ordner …/wp-content/uploads und öffne diesen. Hier findest Du die hierarchische Upload-Struktur von WordPress. (…2020/12; Jahr und Monat). Die Datei solltest Du in den aktuellen Monat hochladen. 

Wechsel nun wieder in Dein WordPress Backend. In die Zeile für die TTF Schrift kopierst Du Dir einmal den Pfad, wie bei den anderen Formaten und dann änderst Du die Dateiendung auf .ttf. Achte darauf, das auch der Präfix richtig geschrieben ist, damit die Datei später auch gefunden wird.

Verwendung der selbst verwalteten Schrift

Wenn Du Deine Schrift eingebunden hast wird sie noch nicht automatisch auf Deinem Webprojekt angezeigt. In einem letzten Schritt musst Du nun in Deinen globalen Seiteneistellungen die neue Schrift den jeweiligen Elementen Deiner Seite zuweisen. Dazu wechselst Du jetzt ins Frontend Deiner Seite und dann zum „Customizer“.

Customizer Zugang im Frontend
Zugang zum Customizer unter WordPress

Hier findest Du die globalen Einstellungen zu Deinem Themes. Die Einstellungsmöglichkeiten sind abhängig von Deinem Themes und können, von dem hier gezeigten, abweichen. Im Verhältnis zu einem Pro Themes wirst Du, mit aller Wahrscheinlichkeit, weniger Einstellungsmöglichkeiten in einem freien Themes finden

Themify Option im Customizer
Einstellungsmöglichkeiten unter Themify im WordPress Customizer

Unter der Rubrik Body und Headings (Ultra Themes) kannst Du nun Deine neue Schrift zuweisen und einstellen. Im Dropdown Menü der Schriftfamilie erschein ein zusätzlicher Eintrag vor den extern geladenen Google Fonts. Das ist Deine intern geladene Schrift. 

Google Font deaktivieren

Um einem der o.g. Vorgaben (Performance) gerecht zu werden, bleibt in letzter Instanz jetzt nur noch, dass Laden der Google Font Library zu unterbinden. Der Themify Page Builder biete Dir in der kostenlosen Variante nur die Möglichkeit zwischen einer „ausgesuchten Menge“ oder „allen Fonts“ zu wechseln. Hier sollte auf jeden Fall ersteres ausgewählt sein, das verringert auf jeden Fall die Ladezeit erheblich.

Deaktivierung des automatischen Google Fonts laden im Themify Builder
Schriftkontrolle im kostenlosen Themify Builder

In der Pro Variante findest Du in den Themify Settings auch die Option, die Google Font komplett zu deaktivieren. Hier kannst Du das Laden der Google Fonts auch komplett deaktivieren.

Google Font Settimgs im Themify Builder
Goggle Font Verwaltung im Themify Ultra

Fazit

Wie Du siehst ist die Selbstverwaltung von Schriften in der heutigen Zeit kein großes Hexenwerk mehr. Themify macht es Dir recht einfach, Deine Lieblingsschriften auf den Server zu laden und zu verwalten.

Zudem umgehst Du so, auf ganz einfache Weise, die oben angesprochenen Problem mit fremd gehosteten Schriften. Und Du bist, mit einer Selbstverwaltung Deiner Schriften, auch gegen einen möglichen Server-Ausfall eines Drittanbieters bestens abgesichert.

Hinweis: Dieser Beitrag enthält Werbelinks, gekennzeichnet mit einem (*)

silbentrennung2

Bessere Typographie – CSS Silbentrennung

Heute geht es mal in die Abteilung CSS (Cascadind Style Sheets). Wie schon öfter angesprochen, kann ich WordPress an vielen Stellen manipulieren und an meine eigenen Bedürfnissen anpassen.

Einer dieser Orte ist die Custom CSS. Eine Datei, in der ich bestehende CSS-Befehle überschreiben oder auch neue Anweisungen hinterlegen kann.

Ein öfter mal auftretendes Problem sind zu lange Wörter, die unter Umständen in der Desctop-Variante noch in das Textfeld passen, allerdings bei Tablet und Mobil aus dem Sichtfeld laufen würden. Dies ist nicht nur unschön anzusehen sondern spricht auch gegen das Responsive Design.

Für derartige Fälle hält CSS einige Befehle zur Silbentrennung bereit. Grundsätzlich gibt es zwei Möglichkeiten, dass Problem anzugehen.

Wir definieren eine globale CSS Silbentrennung auf Basis der Seitensprache

Für die Globale Variante definierst Du mit der CSS-Eigenschaft -hyphens- ein umfassende Silbentrennung nach den Trennregeln Deiner eingestellten Seitensprache in WordPress. In der Custom-CSS trägst Du dazu folgenden Code ein:

body { 
 -ms-hyphens: auto; /* Edge, Internetexplorer */ 
 -webkit-hyphens: auto; /* Safari */ 
 hyphens: auto;
}

Da die Eigenschaft -hyphens- derzeit (Stand: Januar 2019) noch nicht in alle aktuellen Browser implementiert ist, sollte man Sie als proprietäre Eigenschaften verwenden.

Weitere Informationen unter caniuse.com

Wir nehmen uns die „Problemwörter“ einzeln vor

Bei der manuellen Variante bietet Dir CSS mehrere Möglichkeiten. Die jeweilige Anweisung platzierst Du direkt dort, wo eine Trennung (oder auch keine) im Wort erfolgen soll.

Zum einen gibt es den „Soft Hyphen – &shy(;)*“. Hierbei erfolgt eine Trennung mit Trennstrich.

Beim „Word Break – <wbr>“ dagegen erfolgt die Trennung ohne Trennstrich.

In manchen Fällen möchte man auch eine Trennung vermeiden, z. Bsp. bei Eigennahmen. Dafür benötigst Du das geschützte Leerzeichen, den sogenannten „Non Breaking Space – &nbsp(;)* “.

Nachstehen habe ich einmal die drei o.g. Varianten in wirklich heftige Wortungetüme eingebaut. Schau Dir an was passiert, wenn Du das Browserfenster verkleinerst!

*Beim schreiben im Wort die Klammern weg lassen. Soll an dieser Stelle nur für die Sichtbarkeit sorgen.

Grundstücksverkehrszuständigkeitsübertragungsverordnung

In diesem Beispiel wird das Wort an zwei Stellen durch einen „Word Break“ sauber getrennt.

Tennisballaufschlags­­geschwindigkeitsmessmaschinen

Die „Tennisballmaschine“ hab ich einmal mit dem „Soft Hyphen“ getrennt.

Eierschalensollbruchstellenverursacher

Die „Eierschale“ habe ich in seiner Urform belassen. Spätestens bei der mobilen Ansicht wird das Wort aus dem Sichtfeld laufen.

Restmülltütenverschlusssicherundsdraht 2.0

Der „Tütendraht 2.0“ bricht nach den üblichen Trennregel um, allerdings wird das „2.0“ hinter dem Wort gehalten und nicht seperat umbrochen.

Fazit

Bei aller technischen Raffinesse heutzutage aber der Teufel steckt immer noch im Detail! Es sind immer die kleinen und unscheinbaren Sachen, die den Unterschied machen. In diesem Sinne…

kern-me2

Kern me!

Kern me!

lautet die simple Botschaft dieser kleinen aber durchaus interessanten und lehrreichen Seite. Das „Kerning“ beschreibt in der Typografie nichts anderes als den optischen Ausgleich kritischer Buchstaben und Zeichenkombinationen um im Resultat ein ästhetisches Aussehen zu erzeugen. Auf der Seite type.methode.ac kann man spielerisch sein Auge schulen. Viel Glück!

Hinweis: Werbung, unbeauftragt! Bei diesem Text handelt es sich um einen redaktionellen Beitrag, der unbeabsichtigt durchaus eine werbende Wirkung haben könnte, ohne dass ich von irgendeinem Unternehmen dafür beauftragt wurde!

fontface2

Mit der @fontface-Regel Schriften einbetten

Die Verwendung einer speziellen Schrift ist von vielen Aspekten abhängig. Primär sollte sie in einem Projekt immer auf die Zielgruppen abgestimmt sein. Ein zweiter entscheidender Grund ist die Wiedererkennung einer Marke oder Firma.

Im Rahmen eines Style Guides werden sogenannte Hausschriften definiert, die bei jeglichen Maßnahmen der Firma Verwendung finden. Und nicht selten folgt der Einsatz einer speziellen Schrift einfach nur den gerade herrschenden Trends. Derzeit sehr beliebt sind die zahlreichen Schreib,- und Handschriften.

Wie Du eine solche Schrift in Dein Projekt einbinden kannst, will ich Dir heute in diesem Artikel zeigen.

Passende Schrift suchen

Wenn Du noch keine passende Schrift auf deinem System hast, solltest Du als aller erstes auf „Einkauftour“ gehen. Mit der richtigen Suche findest Du mittlerweile sehr viele Anbieter im Netz. Die Angebote reichen von Kostenlos bis zu speziellen Lizenzverträgen.

Gängige Plattformen sind:

Dafonts.com
MyFonts.com
CreativeMarket.com
FontSquirrel.com
Goggle Font.de

Achte auch bei kostenlosen Angeboten auf etwaige Lizenzvereinbarungen (z.Bsp. CC-Lizenzen). In der Regel erhältst Du im Downloadpaket das Schriftenpaket, Hinweise zum Einbinden und die Lizenzvereinbarung. Die Schriften liegen zumeist im *.ttf und *.otf Format vor.

Formate und Browser

Um eine breite Browserunterstützung zu erreichen, benötigst Du mindestens noch ein weiteres Format, dass WOFF (Web Open Font Format) oder dessen Nachfolger WOFF2. Alle aktuellen Versionen der Browser unterstützen das standardisierte und für das Web angepasste Format.

Auch für ältere Browser gibt es speziell unterstützende Formate. (z. Bsp. *.eot  – Embedded Open Type für Explorer® Ver. 5.5+, *.svg – Scalable Vector Graphics für Safari® Ver. 3.1+ und Android® Ver. 3+). Grundsätzlich lassen sich alle Format mit der @fontface- Regel in ein Projekt einbinden.

Ob es immer Sinn macht ist letztlich von Projekt und Zielgruppe abhängig. Die Marktanteile einiger älteren Browser ist so geschwinden gering, dass man sie durchaus außer Acht lassen kann.

Webfonts werden seit 2015 auf allen gängigen Systemen unterstützt

  • Apple® Webkit/Safari® ab Version 3.1
  • Microsoft® Internet Explorer® ab Version 4
  • Google Chrome® ab Version 4.0
  • Mobile Safari® in allen Versionen (für iPhone®, iPad®, iPod®)
  • Mozilla® Firefox® ab Version 3.5
  • Opera® ab Version 10.10

Der Webfont Generator

Es gibt mehrere Anbieter, die es ermöglichen, Schriften in die verschiedenen Webformate zu konvertieren. Den „Webfont Generator“ von fontsquirrel möchte ich Dir an dieser Stelle etwas näher vorstellen.

Auf der Startseite vom „Webfont Generator“ kannst Du nun deine Schrift hochladen. Auch an dieser Stelle kommt noch einmal die Abfrage, ob Du die erforderlichen Lizenzen besitzt. Erst dann ist der Upload möglich. Wähle den Modus „Expert…“ um erweiterte Einstellungsmöglichkeiten zu erhalten.

Im oberen Bereich wähle nun Deine erforderlichen Formate aus. In der Reihe „X-height Matching“ besteht u.a. die Möglichkeit sogenannte Fallbackschriften anzugeben. Die Einstellung „Optimal“ biete Dir keine weiteren Optionen. Im Paket sind nur das Format WOFF und WOFF2 enthalten.

@fontface in Dein Projekt einbetten

Im Unterschied zum Fremdhosting (z. Bsp. Google Fonts) verwaltest Du deine Schriftpakete auf deinem Server. Dazu musst Du dir als erstes einen neuen Ordner „fonts“ im Hauptroot (/meinProjekt) deiner Seite anlegen. Hast Du eine WordPress-Installation auf dem Server dann kommt dieser Ordner in den Hauptroot deines Templates. Idealerweise benutzt Du bereits ein Child-Themes, dann in der Hauptroot des Child-Themes.

Im nächsten Schritt muss Du deinem System mitteilen das es eine neue Schrift benutzen soll. Der Befehl – die @fontface-Regel – schreibst Du wie folgt in deine Custom CSS Datei.

@font-face { font-family: 'MeineSchrift';
             src: url('pfad/zu/deinerschrift.ttf') format('truetype'); }

Achte darauf das der Pfad korrekt eingetragen ist (../ Ordner navigiert aus eine Ordner heraus, /Ordner navigiert in eine Ordner rein). Auch der Schriftname und das Schrift-Format müssen nicht immer zwangsläufig übereinstimmen. Sollte es Probleme geben, überprüfe die jeweiligen Schreibweisen.

Im letzten Schritt definierst Du in deiner Custom CSS Datei die Tags, die Du mit der neuen Schrift verwenden möchtest.

H1 { font-family: MeineSchrift, arial, sans-serif; }

Neben der generischen Schriftfamilie definiere zusätzlich immer eine Fallbackschrift (w.i.Bsp. Arial). Auch Browser die die @fontface-Regel verstehen müssen die Gelegenheit haben auf eine Ausweichschrift zurückzufallen bis die eigentliche Font-Ressource geladen ist. Des Weiteren kommt es den älteren Browsern zu Gute die diese Regel nicht verstehen. Auf diesen Weg kann dem Browser eine mögliche alternative Schrift vorgeschlagen werden.

Eine breite Browserunterstützung

Um die oben angesprochene erweiterte Browserunterstützung zu gewärleisten müssen auch alle anderen Formate in die @fontface-Regel mit eingebunden werden. Das Code-Beispiel von oben sieht – mit allen möglichen Formaten – wie folgt aus:

@font-face {
 font-family: 'MeineSchrift';
 src: url('Ordner/MeineSchrift.eot'); /* IE9 Compat Modes */
 src: url('Ordner/MeineSchrift.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('Ordner/MeineSchrift.woff') format('woff'), /* Modern Browsers */
 url('Ordner/MeineSchrift.ttf') format('truetype'), /* Safari, Android, iOS */
 url('Ordner/MeineSchrift.svg#MeineSchrift') format('svg'); /* Legacy iOS */
 }

Auszeichnungen

Zusätzlich können in der @fontface-Regel auch Eigenschafts-Deskriptoren angegeben werden. (z. Bsp: „font-style“, „font-weight“, „font-stretch“ und „font-rendering“). Diese machen vor allem Sinn, wenn mehrere Schriftschnitte geladen werden sollen. Die vollständige @fontface-Anweisung sieht dann so aus:

@font-face {
 font-family: 'MeineSchrift';
 src: url('Ordner/MeineSchrift.eot'); /* IE9 Compat Modes */
 src: url('Ordner/MeineSchrift.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('Ordner/MeineSchrift.woff') format('woff'), /* Modern Browsers */
 url('Ordner/MeineSchrift.ttf') format('truetype'), /* Safari, Android, iOS */
 url('Ordner/MeineSchrift.svg#MeineSchrift') format('svg'); /* Legacy iOS */
 font-style: normal;
 font-weight: normal;
 text-rendering: optimizeLegibility;
}

Geschafft!

Du verwaltest jetzt Deine eigene Schrift und kannst sie ganz individuell in Deinem Projekt benutzen. Arbeitest Du auch mit eigenen Schriften auf Deinem System. Verrate es mit unten in den Kommentaren.

Warum Schrift nicht gleich Schrift ist?

Warum Schrift nicht gleich Schrift ist

Warum Schrift nicht gleich Schrift ist, darum soll es in diesem Beitrag gehen. Viele verbinden Schrift heutzutage mit der Annahme, dass das ABC in irgendeiner Datei auf dem heimischen Rechner liegt. Zudem herrscht die allgemeine Auffassung, alles mit den installierten Schriften machen zu können. Weit gefehlt!

Mehr als nur eine einfache Datei

Unter diesen Voraussetzungen ist es schwer zu verstehen was ein Font heutzutage alles leisten muss. Um mal nur die wichtigsten Sachen zu nennen:

  • Ein vollständiger Font sollte nach Umständen über alle Zeichen verfügen
  • Er sollte Plattformunabhängig sein (Windows®, Apple® und Linux®)
  • Er sollte ohne Qualitätsverlust Skalierbarkeit sein

Hinter all dem steckt weitaus mehr als nur eine einfache Datei, gefüllt mit ein paar Buchstaben.

Um nun zu verstehen warum Schrift nicht gleich Schrift ist, müssen wir ein wenig hinter den Vorhang der Schriftformate und deren Entwicklung schauen. Mit Eintritt in das DTP-Zeitalter hat sich sehr viel in Sachen Schrifttechnologie getan.

Die Voraussetzungen und Ansprüche an einen Schriftsatz haben sich – im Vergleich von vor 50 Jahren – grundlegend verändert. Neue Technologien verlangen auch nach neuen Schriftformaten.

Schaut man einmal genauer auf das Thema öffnet sich ein riesiger Pool an Schriftsystemen und Technologien, an Schriftherstellern und Font Foundries. Für den unbedarften Computeranwender ist dieses Feld kaum noch zu überblicken geschweige denn zu begreifen. Dazu eine kleine Episode aus dem Arbeitsalltag, wie ich sie selbst vor kurzem erleben durfte.

Die richtige Schrift!?

Das Projekt bestand aus einer Websammlung Reiseberichten, die jetzt in Form eines Buches aufbereitet werden sollten. Das erste Manuskript wurde in Mircrosoft® Word verfasst und sollte als Kopiervorlage dienen. Soweit, so gut. Der Verfasser benutzte für den Entwurf seine bevorzugte Schrift, die „Bookman Old Style“ (serif).

Bei Gesprächen über das Projekt wurde ihm nahe gelegt doch eine modernere Schrift zu benutzen. Die ausgesprochene Empfehlung fiel auf die „Verdana“ (sans serif). Im ersten Moment mag die „Verdana“, im Vergleich zur „Bookman Old Style“ moderner Wirken, keine Frage.

Bei genauerer Betrachtung aber stellt man fest das die „Verdana“ eine Schrift ist, die ausschließlich für die Ausgabe an Monitoren und für das Web konzipiert wurde und somit gänzlich ungeeignet ist für den Druck.

Bereits hier zeigt sich die Unwissenheit, welche Schrift für welches Projekt überhaupt geeignet ist.

Dem beauftragten Grafiker obliegt nun die schwierige Aufgabe dem Kunden diesen kleinen aber feinen Unterschied begreiflich zu erklären. Warum ist es nicht möglich diese Schrift für das Projekt zu nutzen? Und so, wie in diesem Fall geht es vielen Anwendern heute.

Man hat einen Computer oder Laptop und in der Regel sind eine Menge verschiedener Schriften bereits vorinstalliert. Heutige Anwendungssoftware erlaubt es fast jedem, der mit dem Computer einigermaßen umgehen kann, die verschiedensten Projekte zu realisieren.

Das unter Umständen Lizenzrechte verletzt werden, weiß der Betreffende im besten Fall gar nicht.

Um ein wenig Licht in dieses Dunkel zu bekommen, bedarf es einen kleinen Blick in die Geschichte des Desktop Publishing (DTP). Den nach Gutenberg und dem Bleisatz hat sich eine Menge in diesem Segment getan.

Aus den Anfängen des Desktop Publishing

Das moderne Desktop-Publishing, wie wir es heute kennen, wurde erst möglich durch die Veröffentlichung von PostScript im Jahre 1984. Adobe System® bzw. dessen Sparte Adobe Type® revolutionierte mit der Familie der PostScirpt–basierender Dateiformate für Fonts den bis dato vorherrschenden Fotosatz.

Im Lauf der Entwicklung entstehen mehr als 12 Spezifikationen des PS-Formates. Am bekanntesten sind die Formate vom Typ-1 und die vom Adobe Type Manager® (ATM) unterstützten Type-3. In der Regel haben alle PS-Schriften zwei Dateien, die Druckdatei .pfo mit allen Informationen zu Zeichenformaten und Hints und den Metrikinformationen des Fonts sowie die .pfm Datei mit den Unterschneidungen und dem Kernig.

Der Type-3 wird mittlerweile nicht mehr von Adobe® unterstütz. Ein großer Nachteil des PS-Formates, für jede Plattform wurde eine separate Lizenz benötigt. Adobes® hochpreisige Patentpolitik führte um das Jahr 1991 zur Entwicklung des True Type-Formates durch Apple®. Steve Job, der Gründer von Apple®, erkannte schon recht früh die Notwendigkeit von hochwertigen Schriften auf einem Desktopcomputer.

Inspiriert von verschiedenen Kalligrafiekursen in seiner Studienzeit trieb er die Entwicklung im eigenen Haus stetig voran. In den späten 1980er Jahren entwickelte Apple® Ingenieur Sampo Kaasila das Format Bass – später auch noch mal in Royal umgetauft – den Vorläufer des heutigen True Type-Formates. In der Folgezeit lizensierte auch Mircrosoft® das TTF-Format und integrierte es in Windows 3.1.

Die „Raleway“ aus der Google Font Library als eine klassische Webschrift im *.ttf-Format

Das True Type-Format (wahre Schrift) ist ein frei skalierbarer Vektorfont und besteht, im Unterschied zum PostScrip-Format, aus nur einer Datei. Es ist bis heute in Windows und moderne Home-Office Umgebungen vorherrschend. Die Begrenzung auf 256 Zeichen pro Schrift und die Notwendigkeit verschiedener Länder-Fonts trieb die Entwicklung eines neuen Font-Formates voran.

Die OpenType-Fonttechnologie wird 1996 ursprünglich von Microsoft® und später gemeinsam mit Adobe® als offener Standard entwickelt. Ab 2000 wurde eine größere Anzahl an OpenType-Schriften auf den Markt gebracht.

Das Format ist plattformunabhängig und mit fast jedem handelsüblichen Desktop Computer kompatibel. Das neue Format kann nun durch eine verbesserte Unicode-Unterstützung maximal 65536 Glyphen in einer einzigen Font-Datei aufnehmen. Es können spezielle typografische Ausdrucksmöglichkeiten (sprachspezifische Lingaturen, dynamische Zeichenkombinationen) einer Schrift abgebildet werden.

Eine vollständige Werkssatzschrift im *.otf-Format

Die heutigen OpenType-Schriften liegen in zwei Ausprägungen (flavours) vor. Dem TrueType-flavoured OpenType (.ttf) und dem PostScript-flavoured OpenType (.otf).

Zwischenzeitlich schlugen die Typografie in ihrer Entwicklung einen konträren Weg ein. Im Vergleich zu den oben genannten Vektorfonts wurde auch die Entwicklung sogenannter Bitmapfonts vorangetrieben. PixelFonts sind letztlich Grafiken einer Schrift die sich nur in einer bestimmten Größe darstellen lassen. Hintergrund war die verbesserte Darstellung kleiner Größen (7, 8, 9 Pixel) auf Monitoren und Bildschirmen sowie bei bestimmten Webanwendungen (z. B. Flashanimationen).

Die OpenType Fonts (OTF) verkörpern derzeit den aktuellen Standard der Vektor Font-Technologie. Weitere Smartfont-Technologien mit ähnlich erweiterten typografischen Möglichkeiten rücken derzeit vermehrt in den Focus der Entwickler. Allerdings ist die Unterstützung durch Anwendungssoftware noch recht dürftig.

Was kommen wird

Die älteste Smartfont-Technologie ist die AAT (Apple Advanced Typography). Sie ist bezüglich der typografischen Möglichkeiten dem OpenType-Format deutlich überlegen. Urheberrechtlich findet sie aber nur auf OS Geräten Anwendung.

Eine weitere Technologie – die auch durch die UNESCO unterstützt wird – ist das Open-Source-Projekt Graphite von SIL. Konzipiert für die Darstellung von Minderheitensprachen erlaubt Graphite (wie auch ATT) eine abweichende Behandlung von PUA-Zeichen, beispielsweise von Diakritikas.

Die Entwicklung wird hier noch nicht zu Ende sein. Mit der Erschaffung neuer Anwendungen für Desktop und Mobil werden auch die Anforderungen an die Schriftformate steigen und weitere Entwicklungen nach sich ziehen.

Fazit

Was Du aus diesem Artikel mitnehmen sollst. Wenn bei Deinem Projekt Überlegungen zur Schriftenwahl anstehen, mache Dir bewusst für welchen Einsatzzweck dein Produkt gedacht ist. Wähle danach das passenden Schriftformat aus.

Grundlegend kann man diese Überlegung in zwei große Gruppen aufteilen. Zum einen die Webfonts, dessen typometrische Klassifikationsmerkmale von allen gängigen Webbrowsern interpretiert werden können. Sie sind primär für den Einsatz in (X)HTML-Webseiten bzw. für browserbasierte digitale Texte vorgesehen.

Ein sehr abgespeckten Webfont im *.ttf-Format

Im Regelfall werden diese Schriften aus externe Quellen (z. Bsp. Google Font) vom Webbrowser eingeladen. Die Kosten für diese Fonts erstecken sich über Kostenlos, Sonder-, und Pauschalangeboten bis hin zu Abonnementmodellen.

Auf der anderen Seite steht die klassische Werkssatzschriften für den Druckbereich. Diese sind speziell optimiert für das DTP Desktop Publishing (z.Bsp. mit InDesign® oder QuarkXpress®) sowie die typometrisch Weiterverarbeitung und Ausgabe auf postscriptfähigen Peripheriegeräten. Die Kosten der verschiedenen Schriften bewegen sich auch hier von kostenlosen bis hin zu lizenzpflichtigen Angeboten.

MERKE: TrueType Fonts (.ttf) eignen sich nicht für die professionelle Weiterverarbeitung im grafischen Gewerbe, da sie keine PostScript®-Informationen enthalten.

Sehenswert

Type Specimens – digitale Schriftmustersammlung

John D. Jameson präsentiert sehr eindrucksvoll auf seiner Seite typospecimens.io eine ausgesuchte Auswahl digitaler Schriftmuster von verschiedenen Typefoundries. Sehr liebevoll werden die einzelnen Fonts in kleinen „Pages“ gezeigt mit der Möglichkeit den Anbieter zu besuchen. Eine sehr schöne Seite und in mancher Hinsicht auch eine inspirierende Quelle beim nächsten Projekt! Schaut vorbei, es lohnt sich.

Type Specimens
Startseite von „Type Specimens“
IMG_0178

Die 100 besten Plakate

Derzeit präsentieren sich wieder die „Die 100 besten Plakate 16“ im Kulturform am Potsdamer Platz, Berlin. Der Wettbewerb wurde bislang 16 Mal auf internationalen Maßstab ausgeschrieben und gilt als wichtige Institution aktuellen Plakat-Designs.

Der Jury lagen 814 Plakate zur Online-Auswahl vor. Die ausgestellten Finalisten im Foyer des Kulturforums umfassen dieses Jahr nach Ländern 52x Schweiz, 46x Deutschland und 2x Österreich. Die Auswahl repräsentiert eine breite stilistische Palette des Plakat-Designs im deutschsprachigen Raum.

Ich hatte dieses Jahr zum dritten Mal in Folge die Gelegenheit diese Ausstellung zu sehen. Es ist immer wieder sehenswert und eine interessante Inspirationsquelle für meine Arbeiten. Für Kreative und solche die es werden wollen ein absolutes muss!

Die 100 besten Plakate Online»

Hinweis: Werbung, unbeauftragt! Bei diesem Text handelt es sich um einen redaktionellen Beitrag, der unbeabsichtigt durchaus eine werbende Wirkung haben könnte, ohne dass ich von irgendeinem Unternehmen dafür beauftragt wurde!