Perfekte Typo für Print und Online

Transkript

1 Das Magazin der Kreativbranche» Perfekte Typo für Print und Online Zoll- statt Anführungszeichen, proportionale Ziffern in Tabellen, schlecht gehintete Fonts für den Webauftritt Stolperfallen im Umgang mit Schrift gibt s jede Menge. Wir haben Regeln und Tipps zusammengestellt, mit denen der typografische Auftritt in Print und Web garantiert gelingt

2 i Typo-Kärtchen im Überblick Anatomie der Buchstaben I 03 Anatomie der Buchstaben II 04 Anatomie der Buchstaben III 05 Anatomie der Buchstaben IV 06 Dos and Don ts: Erik Spiekermann und Göran Söderström 07 Korrekte Satzzeichen 08 Zahlen und Nummern 09 Schriftklassen 10 Dos and Don ts: Sofie Beier 11 Textauszeichnungen und das Mischen von Schriften 12 Richtig setzen 1: Schriftgrößen und Lesbarkeit 13 Richtig setzen 2: Satzarten und manueller Ausgleich 14 OpenType-Features 15 Dos and Don ts: Luc(as) de Groot 16 Welche Schrift für welchen Zweck? 17 Dos and Don ts: Paul van der Laan 18 Hinting von Schriften beurteilen 19 Glossar typografischer Fachbegriffe (Deutsch Englisch) 20

3 03 Anatomie der Buchstaben I s Taille waist Einbuchtungen zwischen zwei Bögen wie beim B Punze, Binnenform counter nicht druckende Innenräume s Grundlinie baseline Linie, auf der die meisten Buchstaben einer Schrift stehen Versalhöhe cap height Höhe eines Groß- buchstabens Q-Schwanz, Cauda tail Endung des Q

4 04 Anatomie der Buchstaben II s Oberlänge ascender Teile der Kleinbuchstaben, die über die x-höhe hinausragen s s Fähnchen, Ohr ear Häkchen am g s Auslauf finial Endung eines Buchstabens x-höhe, Mittellänge x height Höhe der Kleinbuchstaben ohne Ober- und Unterlängen. Gemessen wird am x Bauch lobe Rundung eines Buch- stabens Schleife loop (teilweise) geschlossener unterer Bereich des g Steg link Strich, der die beiden Kugeln des g verbindet Unterlänge descender Teile der Kleinbuchstaben, die unter die x-höhe reichen Dreistöckiges g binocular g s s

5 Zweistöckiges a double-storey a Serife serif Die Endstriche der Antiqua- Schriften gibt es einseitig und doppelseitig a a n 05 Anatomie der Buchstaben III Tropfen ball terminal tropfenförmige Endung einer Serife Einstöckiges a single-storey a Grundstrich, Stamm, Hauptstrich stem der Strich, von dem aus der Buchstabe aufgebaut ist gschulter shoulder gebogener Strich, der aus dem Grundstrich hervorgeht Zweistöckiges g monocular g

6 06 Anatomie der Buchstaben IV Scheitel apex Wendepunkt, an dem Aufstrich und Abstrich zusammenlaufen Anstrich upstroke Ansatz eines Strichs, an den keine Serife ansetzt Diagonale diagonal stroke Schräge Striche wie bei A, Z oder N Querstrich crossbar horizontale Linie, etwa beim A oder H Abstrich downstroke nach unten geführter Strich Kehlung bracket innerer Bogen der Serife

7 07 Dos and Don ts Erik Spiekermann (Type-)Designer, Berlin und San Francisco Sünde Schriften zu verwenden, nur weil sie in Mode sind. Tipp Im Zweifel lieber etwas größer, offenere Laufweite, mehr Zeilenabstand! Göran Söderström Gründer der Foundry Letters from Sweden, Stockholm Sünde Meinen, dass es einen Unterschied zwischen Typografie und Web-Typografie gibt. Tipp Benutze deine eigenen Augen! Das ist besser, als sich auf die von anderen zu verlassen.

8 Satzzeichen 08 Korrekte Satzzeichen An- und Abführungszeichen In Deutschland korrekt sind 99 und 66 sowie die Guillemets (), die bei uns im Unterschied zum Französischen und Schweizerischen allerdings mit der Spitze zum Wort hin gesetzt werden. Mac Alt Shift W Mac Alt 2 PC Alt 0132 PC Alt 0147 HTML HTML Unicode Unicode Striche Den kurzen Binde- und Trennstrich Divis genannt setzt man ohne Wortabstand. Ein langer Strich dient als Gedankenstrich (je ein Leerzeichen zwischen Wort und Strich), als Streckenstrich (eigentlich ohne Abstand, sieht aber mit etwas Abstand besser aus) und Bis-Strich (zwischen zwei Zahlen ohne Abstand, bei Wörtern je ein Wortabstand). Mac Alt - PC Alt 0150 HTML Unicode Mac Alt Shift Q PC Alt 0187 HTML» Unicode» Mac Alt Q PC Alt 0171 HTML «Unicode «Apostroph Richtig ist die Form einer kleinen hochgestellten 9 Mac Alt Shift # PC Alt 0146 HTML Unicode Das Minuszeichen ist einen Tick länger als der Bindestrich und steht etwas höher. Man findet es in der Zeichenübersicht unter»mathematische Symbole«und in InDesign unter»glyphen«,»mathematische Symbole«. HTML Unicode () Klammern Am gebräuchlichsten sind die runden Klammern. Eckige und geschweifte dienen zur weiteren Unterscheidung. [ ]{ } Mac Alt 5 Mac Alt 8 PC Strg Alt 8 PC Alt 0123 Unicode ( Unicode { Mac Alt 6 Mac Alt 9 PC Strg Alt 9 PC Alt-0125 Unicode ) Unicode } HTML- und Unicode-Angaben aus Gerrit van Aakens»#webtypobuch«

9 09 Zahlen PAGE und TITEL Nummern Selfmarketing Typografisch unterscheidet man drei Arten von Ziffern für verschiedene Anwendungen: Versalziffern haben die Höhe von Großbuchstaben. Für Fließtexte sind sie nicht gut geeignet, da sie Löcher in den Text reißen. Mediäval- oder Minuskelziffern fügen sich durch ihre Ober- und Unterlängen gut in einen Fließtext ein und sollten dort auch benutzt werden. Die meisten, aber nicht alle Schriften besitzen Mediävalziffern. In InDesign finden sie sich im»opentype«-menü (siehe Karte 15). Im Webdesign wechselt man mithilfe der CSS-Eigenschaft font-feature-settings zwischen den Ziffernformaten. Tabellenziffern zeichnen sich dadurch aus, dass ihre Dickte, also die Breite, bei allen Zahlen gleich ist und sie somit in Tabellen oder Bilanzen korrekt untereinanderstehen. Es gibt sie als Versal- und als Mediävalziffern Datum Setzt man das Datum ausschließlich in Zahlen, ist kein Abstand nötig. Hübscher sieht es allerdings aus, wenn man etwas trickst und einen kleinen Abstand einbaut Schreibt man das Datum aus, steht vor dem Monat ein reduzierter und vor dem Jahr ein normaler Abstand. 20. Oktober 2014 Telefonnummern Gebräuchlich ist die Unterteilung in Zweiergruppen von hinten und die Trennung von Vorwahl und Rufnummer durch einen Wortabstand. Die DIN 5008 besagt allerdings, dass nur Vor - wahl und Rufnummer durch ein Leerzeichen getrennt werden, die Nummern selbst nicht. Länderkennungen setzt man mit einem + ohne Abstand, also +49, die 0 der Vorwahl entfällt. IBAN DE DE Stellen umfasst die IBAN (in Österreich 20). In Printanwendungen wird sie von links in fünf Vierergruppen und eine Zweiergruppe gegliedert (die Zweiergruppe entfällt in Österreich). In digitalen Formularen wird die IBAN wie nahezu alle Zahleneingaben gar nicht getrennt, was nicht gerade zur besseren Lesbarkeit beiträgt. Prozent, Maße, Gewicht, Geld Höhere Werte gliedert man von rechts in Dreier- gruppen, wobei vierstellige Zahlen nicht unter- teilt werden. Ob man mit Leerzeichen oder Punkt trennt, kann jeder selbst entscheiden. 89,47 % 3972 m kg

10 10 Schriftklassen Die DIN gliedert Schriften in elf Grup pen, von denen allein acht der Antiqua gewidmet sind, also den Schriften, die auf dem lateinischen Alphabet beruhen. Für die tägliche Arbeit spielt die Klassifikation keine große Rolle. Wir gehen hier auf Schriften mit und ohne Serifen ein. Schriften mit Serifen Serifen stehen auf der Grundlinie und sorgen dafür, dass das Auge beim Lesen nicht aus der Zeile rutscht. Deshalb und weil sie uns aus Büchern vertraut sind, eignen sich Serifenschriften gut für lange Fließtexte. Aber Vorsicht: Im Web benötigen sie eine gewisse Größe unter 16 Pixeln leidet in der Regel die Lesbarkeit. Schriften ohne Serifen Einige Sans Serifs oder Groteskschriften, bei denen die Strichstärke der Buchstaben nahezu gleich ist, beruhen auf geometri schen Formen. Andere greifen den Charakter humanistischer Schriften auf, das heißt, sie weisen Merkmale von Handgeschriebenem sowie einen leichten Strichstärkenkontrast auf. In Büchern begegnen uns Serifenlose recht selten, in Zeitschriften dagegen häufiger. Text versus Display Serifenschriften für Fließtext, Sans Serifs für Displayanwendungen ganz so einfach ist es nicht. Denn auch Serifenschriften können in Headlines toll aussehen, gerade solche mit großem Kontrast sind aufmerksamkeitsstark und elegant. Umgekehrt lassen sich viele Serifenlose auch für längere Lesetexte nutzen. Display-Fonts eignen sich aber in der Regel nicht für Fließtexte. Auch sind sie oft nicht so gut aus - ge baut, das heißt, sie verfügen nicht über so vielfältige Schnitte (siehe Karte 12) und auch nicht über so viele Sonderzeichen. Bei einer Textschrift hinge gen kann man sicher sein, dass ihr Designer sich viel Gedanken um gute Lesbarkeit und eine ausrei chen de Anzahl von Schnitten gemacht hat. Schriften mit sehr stark ausgeprägten Serifen (hier Zine Slab Display) nennt man Egyptienne-Schriften oder Slab Serifs Oben: Bei geometrischen Serifenlosen (hier Futura) sind viele Formen gespiegelt, was die Texterfassung erschwert. So verwechseln Leseanfänger häufig b und d sowie p und q. Darunter: Humanistische Serifenlose (hier die Palatino Sans) wirken dynamischer und sind in längeren Texten besser zu lesen Der Display-Font Blenny sieht auf Plakaten oder in Überschriften großartig aus, für längere Texte ist er aber denkbar ungeeignet

11 11 Dos and Don ts Sofie Beier Typedesignerin und Professorin an der Designschule der Königlich Dänischen Kunstakademie, Kopenhagen Sünde Die Breite einer Schrift durch Zusammenschieben oder Auseinanderziehen zu verändern. Einen aufrechten Schnitt elektronisch auf kursiv zu stellen. Tipp Beim Kombinieren von Schriften ist es gut, Typen unterschiedlicher Stilrichtung zu wählen, zum Beispiel Serif und Sans. Allerdings sollten sie ähnliche vertikale Proportionen haben.

12 12 Textauszeichnungen und das Mischen von Schriften Schriftauszeichnungen Eine Schriftfamilie besteht meist aus mehreren Schriftschnitten, mit denen sich Text oder ein - zelne Wörter hervorheben lassen. Dabei unter - scheidet man zwischen Auszeichnung durch: Schriftstärke (Light, Regular, Bold et cetera), Schriftbreite (Condensed, Normal, Expanded), Schriftlage (Kursiv/Italic, Gerade/Roman). Alle drei Auszeichnungsarten kann man miteinander kombinieren. Doch gilt auch hier wie überhaupt beim Einsatz von Schriften: Nicht zu viele verwenden und immer die Lesbarkeit im Auge behalten! Gerade die Kursive eignet sich zum Auszeichnen von Text, denn sie verändert den Lesefluss zwar, beeinträchtigt ihn aber nicht. Am Bild - schirm ist sie jedoch nicht besonders gut zu lesen, deshalb wird dort zur Hervorhebung eher der Bold-Schnitt verwendet. Achtung: Zu den größten Typosünden gehört es, eine Schrift lediglich über das Anwendungspro - gramm auf kursiv zu stellen. Denn dieses rech - nerische Schrägstellen hat mit einer echten Kursiven, die sich aus der Neigung beim Schrei - ben mit der Hand ableitet, nichts zu tun. Schriften mischen Prinzipiell kann man natürlich jede Schrift mit jeder mischen. Wer auf der sicheren Seite sein will, mixt Typen, die sich gut voneinander unterscheiden, also zum Beispiel eine Serif mit einer Sans. Dass die gewählten Schriften vom Stil her hundertprozentig zueinander passen, garantieren Superfamilien wie Fedra, Meta oder Thesis, die mehrere Schriftund Auszeichnungsvarianten abdecken. Gerade im Mobile Design kann der Einsatz schmaler und breiter Schriften sinnvoll sein. Auf bekommt man im Porträtmodus des iphones Georgia Pro Condensed angezeigt, im Landscape- Modus dagegen die normal weite Georgia Pro für den Leser sehr komfortabel

13 13 Richtig setzen 1: Schriftgrößen und Lesbarkeit Für gute Lesbarkeit und eine ästhetisch ansprechende typografische Gestaltung müssen Schriftgröße, Zeilenabstand und -länge sowie der Durchschuss aufeinander abgestimmt sein. Schriftgrößen Wie berechnet sich die Schriftgröße? Im Printbereich misst man die Schriftgrößen in Punkt (1 Punkt sind 0,353 Millimeter). Im Web gibt man die Schriftgröße in Pixel an, gerade im responsiven Webdesign häufig auch in der relativen Maßeinheit em. Achtung: Aufgrund ihrer unterschiedlichen Proportio - nen können zwei 12-Punkt-Schriften optisch völlig unterschiedlich groß wirken. Die drei Grundgrößen typografischer Gestaltung Konsultationsgröße für Lexikoneinträge, Fußnoten et cetera Print: 6 bis 8 Punkt Web: 6 bis 8 Pixel Lesegröße für Artikel in Zeitungen, Büchern oder Online-Magazinen et cetera Print: 9 bis 12 Punkt Web: 10 bis 14 Pixel Schau- oder Displaygröße für Überschriften, Sublines, Plakate et cetera Print: 12 bis 48 Web: ab 15 Pixel Hinsichtlich der optimalen Lesegröße im Web gehen die Meinungen auseinander. Responsive- Typography-Experte Oliver Reichenstein etwa fordert für hochauflösende Bildschirme bei normalem Leseabstand Größen von mindestens 16 Pixeln im Zweifel lieber etwas größer. Zeilenabstand Der Zeilenabstand (ZAB) wird von Grundlinie zu Grundlinie gemessen. Er beeinflusst die Les barkeit und den Grauwert eines Textes und bestimmt zusammen mit der Zeilenlänge maßgeblich den Lesekomfort. Eine Regel be - sagt, dass der ZAB 120 Prozent der Zeichengröße betragen soll, bei einer 10-Punkt-Schrift also 12 Punkt. Letztlich entscheidet aber der Blick auf den Text man merkt sofort, ob er angenehm zu lesen ist. Am Bildschirm darf der ZAB ruhig etwas größer sein als in Print. 133 pt 6 pt Durchschuss Nicht zu verwechseln mit dem Zeilenabstand ist der Durchschuss, wie man den nicht gedruck - ten (freien) Zwischenraum zwischen zwei Zeilen nennt. Serifenlose Schriften brauchen meist etwas mehr Durchschuss als solche mit Serifen. Zeilenlänge Ein Richtwert für gute Lesbarkeit gibt für Bücher 60 Zeichen pro Zeile an, für Zeitschriften 36. Bei Web texten gelten zwischen 50 und 80 Anschlä ge als optimal. Mit zunehmender Zeilenlän ge sollte auch der Zeilenabstand größer wer den. Die PAGE-Doppelseite zeigt alle drei Grundgrößen: Die Angabe des Cre dits in der Konsul - ta tionsgröße 6 Punkt, 9,6 Punkt für den Lesetext und fette 133 Punkt für die Headline 9,6 pt

14 14 Richtig setzen 2: Satzarten und manueller Ausgleich Die Satzarten Blocksatz Gleich lange Zeilen beruhigen längere Textpassagen. Je kürzer die Zeile, desto weniger eignet sich Blocksatz. Bei weniger als 40 Zeichen pro Zeile sollte man ihn nicht verwenden. Um Löcher im Text und zu viele Trennungen unab hier von Hand gesetzt tereinander mehr als drei direkt hintereinander gelten als unschön! zu vermeiden, ist daher immer eine Nachbearbeitung von Hand erforderlich. Ge rade im Web, wo die automatische Silbentrennung noch nicht ausgereift ist, ist linksbündiger Satz oft sinnvoller. Flattersatz Man kann ihn links- oder rechtsbündig anlegen, wobei Letzteres in von links nach rechts gelesenen Sprachen eher ein Stilmittel zur Auszeichnung ist. Linksbündiger Satz ist angenehm zu lesen, wenn die Flattersatzzone maximal einem Fünftel der Zeilenlänge entspricht und man Treppen sowie optische Löcher im Satz vermeidet. Mittelachsensatz Hier flattern die Zeilen rhythmisch um die Mittelachse, Trennungen sind nicht zugelassen. Nach Gerrit van Aaken, Designer und Verfasser des»#webtypobuchs«(siehe Karte 20), ist zentrierter Satz ein»garant für stilechten Amateur-Look, der die Kondolenzkarten und Grabsteine dieser Welt besser nie verlassen hätte«. Wir verwenden ihn aber trotzdem gern für unsere Seitensprachen. Ohne und mit Kerning Ohne und mit Ausgleich Manueller Ausgleich Die Manipulation der normalen Laufweite, also des Abstands zwischen den Buchstaben eines Textes, nennt man Ausgleichen. Beim Spationieren wird der Abstand vergrößert, eine deutlich sichtbarer Erweiterung nennt man Sperren. Beim Kerning oder Unterschneiden rückt man Buchstabenpaare so aneinander, dass auch kritische Kombinationen wie AV oder We ein gleichmäßigeres Buchstabenbild ergeben. Die meisten Schriften werden mit integrierten Kerningpaaren ausgeliefert. Headlines brauchen eigentlich immer einen manuellen Ausgleich, ebenso wie der Versalsatz. Generell gilt: je größer die Schrift gesetzt wird, desto geringer sollte die Laufweite sein. Während große Überschriften oft erst mit einer geringeren Laufweite schön kompakt aussehen, benötigen in Versalien gesetzte Wörter meist ein wenig mehr Laufweite. Ohne Ausgleich Flattersatzzone Mit Ausgleich

15 15 OpenType-Features Das OpenType-Format bietet die Möglichkeit, für ein Zeichen mehrere Formen (Glyphen) zu hinterlegen, zum Beispiel Kapitälchen, Mediävalziffern, Ligaturen oder Schmuckbuchstaben. Aktiviert werden die Features im Layoutprogramm. In InDesign ruft man dazu über»fens- ter«,»schrift und Tabellen«das»Zeichen«-Bedienfeld auf und klickt dann rechts oben auf das kleine Icon, um das Kontextmenü mit dem Eintrag»OpenType«zu öffnen. Im Webdesign funktionieren OpenType-Features noch nicht browserübergreifend. Während Firefox und Chrome viele Features unterstützen, sieht es bei Opera und Safari schlechter aus. Einen Überblick gibt unter dem Stichwort»Font Feature Settings«. Gar nicht so leicht zu finden, die OpenType-Features in InDesign. Dabei sind sie für schöne Typo unerlässlich fïdie meistverwendeten OpenType-Features muss sie also ausschalten. für Schwungbuchstaben. Ligaturen verdeutlichen Lauteinheiten. Die Ligaturenautomatik in InDesign setzt sie nicht immer sinnvoll, sodass sich eine Überprüfung empfiehlt Kapitälchen oder Small Caps: Großbuchstaben, deren Höhe etwa der von Kleinbuchstaben entspricht (= x-höhe der Schrift). Im Kapitälchensatz überneh - men sie die Rolle der Kleinbuchstaben, die dann mit normalen Versalien kombi niert werden. Verkleinert man einfach die Versalien, stimmt der Grauwert nicht mehr. Also immer nur echte Kapitälchen verwenden. Ligaturen: Zwei, selten auch drei miteinander verbundene Buchstaben, die Lücken im Text vermeiden oder Lauteinheiten verdeutlichen. Die häufigsten Ligaturen sind fi, fl, ch, ck, st und tz, wobei sich fi und fl in den meisten professio- nellen Schriften finden. InDesign aktiviert die im Font enthaltenen Ligaturen automatisch wer sie nicht will, Schwungbuchstaben oder Swashes: Sie sollten zur Zierde nur am Anfang oder Ende eines Wortes verwendet werden. Manche Schriften haben einen eigenen Schnitt Kontextbedingte Varianten: Ist das Feature eingeschaltet, tauscht das Programm je nach vorangegangenem und nach - folgendem Zeichen die Buchstaben aus. Kontextbedingte Varianten nutzen insbesondere Fonts, die Handschrift imitie- ren, da hier zwei Lettern nie absolut gleich aussehen.

16 16 Dos and Don ts Luc(as) de Groot Typedesigner und Professor im Fachbereich Design an der FH Potsdam (Keine) Sünde Leute dürfen hässliche Sachen machen. Dann stechen die schönen umso mehr heraus. Und wenn jemand einen guten Grund hat, zum Beispiel etwas zu eng zu setzen, sollte er das tun. Man darf alles! Tipp Kauft meine Schriften! Im Ernst, es gibt keine allgemeinen Tipps. Nur ganz viele Regeln oder besser gesagt: Sehgewohnhei ten, die bestimmen, ob etwas gute Typografie ist oder nicht. Durch viel Gucken und viel Lesen kann man ein Bewusstsein dafür entwickeln. Manche typografische Designs müssen edel aussehen, ande re platt und billig. Weil es auf den Zweck ankommt, die gewünschte Wirkung, den Gestaltungsanlass.

17 Welche PAGE Schrift TITEL für Selfmarketing welchen Zweck? Screenshot: (Foto: Schriften müssen nicht nur ästhetischen Anforderungen genügen und zum Inhalt passen, sondern auch eine Reihe von funktionalen Kriterien erfüllen. Deshalb sollte man nicht ausschließlich nach dem Look-and-feel gehen, sondern sich auch klarmachen, für welche Anwendung man die Schrift braucht. Die FF Franziska von Jakob Runge ist nicht nur exzellent lesbar, sondern mit 20 Schnitten auch sehr gut ausgebaut. Zudem sieht sie auch im Web prima aus, wie in den Artikeln auf Corporate Design Ist das Unternehmen international tätig? In diesem Fall benötigt man unter Umständen eine Schrift, die Kyrillisch oder Griechisch et cetera umfasst. Sind neben Briefpapier und Visitenkarten auch Geschäftsberichte und Kundenmagazine zu gestalten? Dann wird man mit Regular und Italic nicht auskommen, sondern eine gut ausgebaute Schrift mit verschiedenen Strichstärken brauchen. Enthält die Schrift Glyphen wie Ligaturen, Kapitälchen oder mathematische Symbole? Gerade für Geschäftsberichte ist es wichtig, dass es verschiedene Ziffernarten, insbesondere Tabellenziffern (siehe Karte 9), gibt. Editorial Design Im Prinzip gelten ähnliche Überlegungen wie beim Corporate Design. Hinzu kommt, dass die Schrift für den Fließtext ausgezeichnet lesbar sein sollte und die Headlineschrift(en) ruhig charakteristische Merkmale haben dürfen, um für die Wiedererkennbarkeit der Publikation zu sorgen. Displayanwendung Soll die Schrift nur in großen Größen, etwa für Headlines oder Plakate eingesetzt werden? Dann ist der ästhetische Aspekt wichtiger als ein umfassender Ausbau. Vielleicht tut es sogar ein Free Font. Und auch wenn nicht alle ganz umsonst sind, Display-Fonts sind logischerweise meist preisgünstiger als gut ausgebaute Textschriften. Print, Screen oder beides Für reine Printanwendungen reicht der Desktop-Font, in der Regel im OpenType-Format (OTF). Soll die Schrift auch im Web zum Einsatz kommen, ist es besonders bei Corporate-Design-Projekten sinnvoll, bei der Auswahl darauf zu achten, ob sie auch als Web-Font vorliegt. Ist dies nicht der Fall, gibt es die Möglichkeit, auf einen Web-Font mit ähnlicher An mu tung zurückzugreifen.

18 18 Dos and Don ts Paul van der Laan Gründer der Foundry Bold Monday, Den Haag Sünde Ich reagiere total allergisch auf Leute, die unter der Überschrift»Regeln brechen«lausige Typografie kreieren. Meist sind sie nur zu faul, sich zu informieren. Wer die Regeln nicht kennt, kann sie auch nicht brechen. Dann bist du nur ein Amateur. Tipp Dass viele andere Gestalter eine bestimmte Schrift verwenden, heißt nicht, dass sie auch für eure Zwecke ge eignet ist! Deshalb: Lernt über Schriften, so viel ihr könnt. Seid extrem wählerisch bei der Auswahl und schaut auf jedes einzelne Detail. Und nutzt niemals die Funktion»Optisches Kerning«in InDesign.

19 19 Hinting von Schriften beurteilen Solange noch nicht die gesamte Menschheit vor hochauflösenden Dis plays sitzt, benötigen wir das Hin ting, das die Schriftdarstellung auf Bild schir men mit geringerer Auflösung verbes sert. Bei Web-Fonts von seriö sen Typefoundrys sollte man davon ausgehen können, dass sie ordentlich gehintet sind. Wer das trotzdem lieber selbst überprüfen möchte, kann das nur an einem Windows-Rechner tun, da Mac OS, ios, Android und Linux das Hinting komplett ignorieren. Einige Web-Font-Anbieter wie Type- kit oder Rosetta bieten auf ihrer Website eine Renderingvorschau für die wichtigsten Browser und Systeme. Das sind dann aber Pixel- bilder, also Screenshots, denn eine Live-Simulation des Renderings auf ande ren Systemen ist nicht möglich. Oben eine Schrift mit automatischem Hinting, unten die gleiche mit manuellem. Der Unterschied ist deutlich Abbildungen: Tim Ahrens

20 Glossar Glossar Textauszeichnungen typografischer und Fachbegriffe das Mischen von Schriften 20 Ausrichtung alignment Formatierung der Textzeilen, zum Beispiel rechts- oder linksbündig Bindestrich hyphen kurzer Strich, ohne Abstand gesetzt Blocksatz justified alignment Satzart, bei der alle Zeilen gleich lang sind bis auf die Letzte eines Absatzes Dickte width Breite eines Zeichens inklusive des nicht gedruckten (freien) Raums rechts und links dicktengleich monospaced Alle Zeichen einer Schrift haben die gleiche Breite Durchschuss leading nicht gedruckter (freier) Zwischenraum zwischen zwei Zeilen Flattersatz ragged alignment Textzeilen laufen am Zeilenende frei aus Fließtext body text auch Mengen- oder Lesetext Geviert square gedachtes Quadrat, dessen Seitenlänge der Höhe eines Buchstabens zwischen Ober- und Unterlänge entspricht Glyphe glyph Erscheinungsbild eines Letters oder Schriftzeichens. In einer Schrift kann ein Zeichen durch mehrere Glyphen dargestellt werden, ein g etwa durch ein zwei- oder ein dreistöckiges g Großbuchstaben uppercase letters auch Versalien oder Majuskeln Hurenkind widow Umbruchfehler, bei dem die letzte Zeile eines Absatzes am Anfang einer neuen Seite steht Kapitälchen small caps kleinere Großbuchstaben, deren Höhe etwa der der Gemeinen entspricht Kleinbuchstaben lowercase letters auch Gemeine oder Minuskeln Kontextbedingte Varianten contextual alternates verschiedene Erscheinungsformen eines Buchstabens, die je nach vor- und nachfolgendem Zeichen variieren Laufweite tracking Abstand der Buchstaben zueinander Ligatur ligature zwei, selten auch drei miteinander verbundene Buchstaben Linksbündig flush left Links stehen die Zeilen bündig untereinander, während ihre Enden frei auslaufen Mediävalziffern oldstyle figures Ziffern mit Ober- und Unterlängen Mittelachsensatz center justified alignment zentrierter Satz, die Zeilenmitte ist an der Mit telachse einer Seite oder eines Absatzes ausgerichtet Schusterjunge orphan Umbruchfehler, bei dem die erste Zeile eines Absatzes als letzte Zeile am Ende einer Seite oder Spalte steht Schwungbuchstaben swashes schwungvoll und ausladend gestaltete Buchstaben spationieren to track Laufweite vergrößern sperren to letterspace Buchstabenabstände deutlich sichtbar erweitern Strichstärke weight Stärkegrad der Linien eines Letters, ursprünglich aus der Breite des Schreibgeräts entstanden. Fontfamilien sind in diversen Strichstärken (Light, Regular, Bold) ausgebaut Strichstärkenkontrast stroke contrast Unterschied zwischen dem dicksten und dünnsten Strich einer Schrift Tabellenziffern tabular figures Ziffern gleicher Dickte unterschneiden to kern Laufweite verringern Versalziffern lining figures Ziffern in Höhe der Großbuchstaben Zeilenabstand leading, line spacing Abstand von einer Grundlinie zur nächsten Zurichtung spacing Definition der Vor- und Nachbreite eines Zeichens beim Schriftentwurf, manuelle Änderung der Buchstabenabstände beim Setzen Zum Weiterlesen Friedrich Forssman und Ralf de Jong: Detail- typografie. Mainz (Verlag Hermann Schmidt) 5. Auflage 2004, 408 Seiten. 98 Euro. ISBN Friedrich Forssman und Hans Peter Willberg: Lesetypografie. Mainz (Verlag Hermann Schmidt) 5. Auflage 2010, 344 Seiten. 39,80 Euro. ISBN Gerrit van Aaken: #webtypobuch. Edition 2012, Print-on-Demand, 146 Seiten. 20 Euro. Als E-Book kostenlos. Ellen Lupton: Type on Screen. New York (Princeton Architectural Press) 2014, 208 Seiten. 24,95 Dollar. ISBN Jason Santa Maria: On Web Typography. New York (A Book Apart) 2014, 144 Seiten. 18 Dollar. ISBN Oliver Reichenstein über responsive Typografie:

21 Nice-to-must-have. Exklusiv! Die typografische PAGE-Schneidematte und das DTP-Typometer 2.0 mit US- und DIN-Formaten. Jetzt bestellen: shop.page-online.de/produkte

22 Fontastic! Exklusiv! Das PAGE Skizzenbuch»Originalität ist der beste Kopierschutz«(Tastaturkürzel, Formate, typografische Einheiten inside!) und die typopage geballte Typografie auf 196 Seiten Jetzt bestellen: shop.page-online.de/produkte

23 Create together! PAGE präsentiert die entscheidenden Trends in Sachen Konzeption und Realisation klassischer und digitaler Medien Jetzt zugreifen: shop.page-online.de/page-mini Gleich zugreifen!

24 Typo-Wissen. Ob Web- und App-Fonts, Fontlizenzen, schöne Stencil- und Script-Fonts oder die Frage»Corporate Fonts: ja oder nein?«all unsere Angebote zum Thema Typografie finden Sie gebündelt unter Das PAGE edossier enthält einen Beitrag aus PAGE (EVT ). Im Text enthaltene Links wurden beim Erscheinen des edossiers nicht mehr geprüft. IMPRESSUM Redaktion PAGE, Borselstraße 28, Hamburg; Telefon: , Fax: -449; Chefredakteurin/Publisher: Gabriele Günder, V.i.S.d.P.; Textchefin: Astrid Umbreit; Autor: Antje Dohmann (ant); Grafik: Christine Krawinkel. Anzeigenleiter: Alexander Herz; Telefon: , Fax: -489; PAGE erscheint in der Ebner Verlag GmbH & Co. KG, Karlstraße 3, Ulm; Geschäftsführer: Gerrit Klein, Martin Metzger (Stellvertreter), Florian Ebner. Alle Beiträge sind ur he berrechtlich geschützt. Alle Rechte, auch Übersetzun gen und Zweitverwertungen, vorbehalten. Reproduk tionen, gleich welcher Art, ob Fotokopie, Mikrofilm oder Er fas sung in Datenverarbeitungsanlagen, nur mit schrift li cher Genehmigung des Verlages. Eine Vermietung, Verleihung sowie Verkauf oder eine sonstige Form der Zugänglichmachung an Dritte ist Ihnen nicht gestattet. Aus der Veröffentlichung kann nicht geschlossen werden, dass die beschriebe nen Lösungen frei von gewerblichen Schutzrechten sind. Für den Fall, dass hier unzutreffende Informationen enthalten sein sollten, kommt eine Haftung nur bei grober Fahrlässigkeit des Verlages oder seiner Mitarbeiter in Betracht. Weitere edossiers, Einzelhefte, Aboangebote, Produkte und PAGE Seminare gibt s unter shop.page-online.de