Kategorien
Infografiken Inspiration

Farbenlehre und Typographie: 10 Gebote für Designer (Infografik x 2)

Das Leben als Designer ist nicht einfach. Obschon das Wörtchen "Designer" nur eine überschaubare Länge aufweist und auch ansonsten beim Zuhörer einigermaßen klare Vorstellungen der dahinter zu vermutenden Tätigkeiten weckt, ist die Realität doch viel komplexer. Massenhaft Literatur steht im Schrank, Fortbildung ist nicht nur auf Dauer, sondern andauernd erforderlich. Da tut es gut, wenn man manche Eckpunkte kurz und knackig serviert bekommen kann, ohne dass man in den tiefen Keller des theoretischen Wissens hinabsteigen muss. Unsere beiden 10 Gebote-Tafeln aus dem Hause DesignMantic sind solche Häppchen. Ich habe sie mir gar ausgedruckt und unter die Schreibtischunterlage gelegt…

10-gebote-teaser

Die 10 Gebote der Farbenlehre

Farbenlehre ist so eine Sache. Kaum jemand lernt sie wirklich oder hält sie auch nur für erforderlich. Der Kunde ist ohnehin vollkommen skrupellos und verlangt Kombinationen, die man selbst ohne Fachkenntnis schon weit von sich weisen würde. Es ist schwierig.

Die 10 Gebote der Farbenlehre von DesignMantic können bei so manch hitziger Diskussion über die Attraktivität eines grün-rosa Logos mit roten Streifen eventuell behilflich sein. Die Geboteliste fängt an mit der emotionalen Wirkung der jeweiligen Farbe und bewegt sich durch das Themenspektrum hin zu der Darstellung der verschiedenen Farbräume. Die durchweg gelungene Gestaltung der einzelnen Designbeispiele wird mir im Kundengespräch ganz sicher helfen. Da freue ich mich schon drauf.

Hier ein kleiner Ausschnitt aus der Infografik. Ein Klick darauf öffnet das größere Original direkt bei DesignMantic:

10-gebote-Color-Theory-Infographic

(Quelle: DesignMantic)

Die 10 Gebote der Typografie

Schriftenwahl ist auch so ein Thema. Wer schon mal eine Powerpoint-Präsentation erleiden musste, weiß haargenau, wovon ich spreche. Selbst hochbezahlte Topmanager sind vor üblem Geschmack nicht gefeit und leben diesen bisweilen kompromisslos aus. Kennen Sie so jemanden? Dann legen Sie ihm einen Ausdruck der 10 Gebote der Typografie hin. Ich wette, es wird unverzüglich Besserung eintreten. Denn an sich ist es gar nicht so schwierig, die dicksten Klopper zu vermeiden.

Entsprechend befassen sich die 10 Gebote der Typografie mit der korrekten Einordnung und Erkennung von Schriftfamilien, zeigen Serifen und Serifenlose, raten von unterschiedlichen, dabei ähnlichen Fonts ab und gehen am Ende gar so weit, die gute alte Comic Sans in einen Topf mit Papyrus und Kristen zu werfen, um gänzlich von deren Verwendung abzuraten. Richtig so…

Hier ein kleiner Ausschnitt aus der Infografik. Ein Klick darauf öffnet das größere Original direkt bei DesignMantic:

10-gebote-font-infography

(Quelle: DesignMantic)

Kategorien
Essentials Icons & Fonts

Typecast für Google Fonts: Web-Typografie mit Spaßfaktor

Monotype und Google kooperieren erneut und bringen mit einer speziellen Version von Monotypes Typecast-App eine kostenlose und sehr komfortable Möglichkeit, mit Google Fonts realitätsnah zu experimentieren. Die Einfachheit der Bedienung und das beachtliche Featureset könnten der Web-Typografie weiteren Auftrieb geben. Designer sollten sich die Typecast-App auf jeden Fall näher ansehen. Und genau das haben wir im folgenden Beitrag getan.

typecast-landing

Web-Typografie: Im Kommen, aber noch unterstützungsbedürftig

Das Experimentieren mit passenden Web-Fonts hat, zumindest in meiner täglichen Praxis, nichts mit Spaß zu tun. Besser wurde es vor einiger Zeit, als Monotype das Produkt SkyFonts für die Verwendung mit Google Fonts kostenfrei verfügbar machte. Auch wenn es sich nicht eine Anwendung handelt, die tatsächlich Webfonts unterstützt, so erleichterte die Verfügbarkeit der Google Fonts als Desktop-Schrift doch die Beurteilung der Layouts für das Web.

SkyFonts stellte ich im Dr. Web Magazin in dem Beitrag “SkyFonts: Die beste Art, Google Fonts auf dem Desktop zu nutzen” ausführlicher vor. Vor SkyFonts behalf ich mir mit dem Komplett-Download aller Google Fonts. Die Vorgehensweise dazu beschrieb ich für das Dr. Web Magazin im Beitrag “So laden Sie alle 500+ Google Web-Fonts auf Ihren lokalen Desktop”.

Seit ein paar Tagen existiert eine nahezu ideale Lösung, denn Monotype und Google verstehen sich offenbar dermaßen gut, dass eine weitere, für den Nutzer kostenlose Kooperation in den Stiel gestoßen wurde. Ab sofort steht Monotypes Typecast App für die Verwendung mit dem kompletten Google Fonts Repository ohne Anmeldung oder sonstige Bürokratismen frei zur Verfügung. Erreichbar ist Typecast über eine spezielle Landingpage, sowie direkt aus dem Google Fonts Directory über die jeweiligen Pop-Outs der einzelnen Schriften.

typecast-in-google-fonts

Typecast wurde 2013 mit dem „Game Changer of the Year“-Award des Magazins „.net“ ausgezeichnet und das erscheint schon auf den ersten Blick völlig berechtigt. Typecast erlaubt es, Schriften mit echten Inhalten in echten Strukturen innerhalb lebensnaher Layouts auszuprobieren.

„Eine Schrift losgelöst vom inhaltlichen Kontext und anderen Textteilen auszuwählen, ist eine schwierige Aufgabe. Das Typecast Design-Tool macht es einfach, Schriften aus dem Google Font-Verzeichnis auszuprobieren und mit ihnen zu experimentieren.“

– Filip Zembowicz, Product Manager Google

Die Vorgehensweise ist dabei sehr einfach. Entweder über die Landingpage der Typecast-App oder über das Pop-Out der jeweiligen Schrift im Google Font Directory startet man Typecast und erhält eine Oberfläche, die derjenigen eines herkömmlichen Word-Prozessors nicht unähnlich ist. Auch Adobe-Anwender werden sich umgehend heimisch fühlen.

typecast-menu-preview

Der rechts neben dem Menü angeordnete Arbeitsbereich ist direkt mit den Standardinhalten aus Google Fonts gefüllt, so dass eine unmittelbare Beurteilung der Optik möglich ist. Über das Menü kann nun das erforderliche CSS/HTML heruntergeladen werden. Für die Weitergabe und Beurteilung durch Kunden und/oder Co-Worker lassen sich PNGs erzeugen.

typecast-vollvorschau
PNG des Ergebnisses

Typecast: Kleiner Exkurs zur Vollversion

In der kostenpflichtigen Vollversion der Typecast-App, die dann nicht nur Zugriff auf die Google Fonts zulässt, ist es möglich, mehrere Versionen für ein späteres Review zu speichern, Previews auch online mit anderen zu teilen, Tests auf mehreren Geräten durchzuführen oder schnell einen kompletten Styleguide zu generieren. Ab 29 Dollar netto muss man für diesen Funktionsumfang allerdings monatlich einkalkulieren.

Die Version für Google Fonts ist eher für das schnelle Experimentieren gedacht und als solches eine sehr gute Alternative zu bisherigen Verfahrensweisen. Sicherlich setzt Monotype darauf, dass die zusätzliche Bequemlichkeit der Premium-Funktionen möglichst viele Verwender der kostenlosen Version zu zahlenden Kunden werden lässt.

Bei mir wird das indes nicht funktionieren, denn ich weigere mich, den Preismodellen der Web-Font-Anbieter Raum zu geben. Nicht nur sind mir diese Dienste schon im Ansatz zu kostspielig, sondern was mir am meisten missfällt ist die Abhängigkeit des Preises von Parametern, die man kaum beeinflussen kann, in allererster Linie die Korrelation zwischen Preis und Traffic. Natürlich mag das ein jeder für sich anders beurteilen. Ich bleibe jedenfalls vorerst bei Lösungen wie Google Fonts.

„Es freut mich, dass Fans von Google Fonts diese neue, kostenlose Version der Typecast-App jetzt nutzen können. Der Service von Google ist extrem beliebt und viele Designer machen ihre ersten Erfahrungen mit Web Fonts dieser kostenlosen Bibliothek. In unserem Bestreben, die Online-Nutzung von Web Fonts zu fördern und neue Zugriffsmöglichkeiten zur Typecast-App zu schaffen, ist Google für uns der perfekte Partner. Wir hoffen, durch unsere kostenlose, frei zugängliche Version mehr Schriftliebhaber zu unterstützen und auf längere Sicht mehr Fürsprecher guter Typographie zu gewinnen. Aus unserer Sicht wäre das ein echter Gewinn für das Web, Kunden, Leser und Designer aller Bereiche.“

– Paul McKeever, Director von Typecast

Typecast: Visuelle Layoutanpassungen sorgen für realistische Tests

Klickt man irgendwo in den Text, verschwindet das linksseitige Menü und ein Arbeitsbildschirm zeigt sich, der alle Features mitbringt, die man auf den ersten Blick für einen ordentlichen Test einer potenziell in Frage kommenden Schriftart benötigt.

typecast-editor

Das Menü wird durch ein Floating Windows ersetzt, welches man frei auf dem Bildschirm positionieren kann und welches jederzeit die Eigenschaften des aktiven Elements zeigt und editierbar macht. Schriftvarianten, -größe, Zeilenhöhe, Text- und Hintergrundfarbe und Abstandswerte werden hier verwaltet. Ebenso lässt sich die Schriftart hier auch gleich komplett ändern.

Noch ausgefeilter sind die Manipulationsmöglichkeiten in den einzelnen Textcontainern selbst. Von der Breite der einzelnen Elemente in px, em oder Prozent über die Textausrichtung bis hin zur Anpassung von CSS-Details ist alles möglich. Dabei werden Veränderungen direkt in der Preview sichtbar. Ein optional einblendbares Baseline Grid erlaubt weiteres Finetuning.

Wer sich nicht auf die visuellen Bearbeitungsmöglichkeiten verlassen will, der kann jederzeit einen CSS-Editor aufrufen und manuelle Anpassungen vornehmen. Möchte man seine mühsam vorgenommenen Parametrisierungen zur späteren Verwendung oder weiteren Bearbeitung speichern, ist man allerdings gezwungen, zum zahlenden Kunden zu werden.

Von daher werde ich Typecast sicherlich nicht bis ins letzte ausreizen und noch am letzten Parameter feilen. Bei mir kommt Typecast für die schnelle, realitätsnahe Vorabprüfung zum Einsatz. Nicht mehr, aber auch nicht weniger.

Und für diesen Einsatzzweck kenne ich keine bessere, vor allem günstigere App. Machen Sie sich selbst ein Bild!

Links zum Beitrag:

Kategorien
Inspiration Showcases

Das Auge isst mit: 40+ deliziöse Beispiele leckerer Food-Typografie

Leckere Lebensmittel und schicke Schriftarten inspirieren mich schon einzeln ganz enorm. Und wenn sie beide zusammen kommen, dann ist das umso besser. Tatsächlich ist es ziemlich clever, Leckereien und Typografie miteinander zu verbinden. Auf diese Weise triggert man die Lust auf Essen und erreicht im besten Falle eine positive Assoziation, die sich auf die Wahrnehmung der Typografie, damit des Produkts erstreckt. Meistens indes entsteht Typografie auf der Basis von Lebensmitteln nicht zu Marketing-, sondern zu rein künstlerischen Zwecken. Dennoch mag es vorkommen, dass Sie bisweilen über einen so umgesetzten Font stolpern, der genau richtig für die eben in Auftrag genommene Restaurant-Website wäre. Auf den kleinsten Nenner gebracht wird Ihnen die folgende Kollektion mindestens einiges an Inspiration liefern, etwa für einen Kochwettbewerb oder die Erstellung einer neuen Schriftart ;-)

Manche der folgenden Kreationen sind tatsächlich aus real existierenden Lebensmitteln entstanden, während andere rein digitale Arbeiten sind. Wieder andere verwenden neben Lebensmitteln weitere Bestandteile zur Vermittlung ihrer kreativen Botschaft. Manche sogar sind echte Fonts, die Sie erwerben können, entstanden aus echten Lebensmitteln und Einzelfotos. Besuchen Sie die verlinkten Websites der einzelnen Künstler und hinterlassen Sie uns Ihre Meinung zu den Werken unten an diesem Beitrag…

Banana Drawings von Mat Dolphin

Edible Poster von Anna Garforth

Feast von Anna Garforth

Gusto Food Typography von Tactile Typography

Sweet Amper von no-preview

Avant-Sugarde Experimental Typography von Samuel Mensah-Bonsu

Egg Typography von Stephanie Halem

Banana Alphabet von bec66ky

Rice Crackers ABC von F1yMordecai

Good Morning von julia

Dinner Bells von my-name-is-annie

Sweet 3D Type Experiment von dhosford

Horror Monday von Crystal „Tittel“ Boomgaart

Blue Cupcakes von eckabeck

The Gunstringer von eckabeck

Specialty Maraca Cookies von eckabeck

Gothic Typeface Made Out of Bacon Strips von Henry Hargreaves

Gingerbread Typography von Iwona Przyvonla

Pringles Galaxy von Chris LaBrooy

Ice Cream Promotion von Zooinstanbul

AIGA Poster Series von Kittaya Treseangrat

Shakespeare at Pratt von Megan Pierce

Gourmet von Lisa Nemetz

Fast Cooked Poster von Alexander Eliseev

West Coast Cook Book von Lauren Hom

The Little Chef’s Guide to the Alphabet von Anthony Elder

Mustard Font von TypeDips

Gateau von Willa Allen

Maxima Calendar Cover von Ignas Kozlovas

Font with Pancakes von Sara Sun

IL – The Food Fiction Issue von Happycentro/ Francesco Franchi

Der Artikel erscheint zeitgleich auf Noupe Design Magazine und wurde im englischen Original geschrieben von Tara Hornor.

Kategorien
Design HTML/CSS

Typeplate: Starterkit sorgt für ordentliche Typografie – unabhängig vom Website-Design

Typografie im Webdesign ist so eine Sache. Ist man sich möglicherweise noch schnell einig, dass ordentliches Schriftbild begrüßenswert ist, so scheitert es dann doch zumeist in der konkreten Umsetzung. Schön designte Websites mit weniger schöner Typografie sind entsprechend eher die Regel, denn die Ausnahme. Das selbsternannte Starterkit Typeplate tritt an, das zu ändern.

typeplate-homepage

Typeplate: Sass, LESS, Stylus, CSS

Typeplate steht in verschiedenen Geschmacksrichtungen, die unterschiedlich schnell Updates erfahren, zur Verfügung. Ursprünglich gestartet als Sass-Projekt, kann das Starterkit mittlerweile zusätzlich als LESS- und als Stylus-Variante verwendet werden. Natürlich ist auch eine statische CSS-Version verfügbar. Mit Blick auf das reine CSS empfehlen die Entwickler nicht die Einbindung des Stylesheets als Datei, sondern die Übernahme der einzelnen Definitionen in das Stylesheet der betreffenden Site. Das Projekt liegt ganz aktuell in Version 1.0.1 vor.

Typeplate mit zeitloser Gestaltungsphilosophie

Typeplate setzt eine klare Philosophie um. Heraus kommt eine sehr klassische Umsetzung eines Schriftdesign, das zweifellos elegant, wenn auch nicht unbedingt modern daher kommt. Immerhin kann jeder das Starterkit als Grundlage für eigene Modifikationen nehmen und entsprechend nach Wunsch modernisieren.

typeplate-feature

Überschriften, Einzüge, Umbrüche, Silbentrennung, Kapitälchen und Anfangsbuchstaben, die über mehrere Zeilen gehen. Um all diese Themen kümmert sich Typeplate. Dazu kommt die Behandlung von Zitaten, Codeblöcken, Definitionen, Fußnoten und einfachen Tabellen, sowie die Darstellung kleiner Texte.

Typeplate befindet sich extrem reger Entwicklung. Während ich den Artikel schreibe, finden laufend Änderungen am Repo statt. Das Projekt steht auf Github zum kostenlosen Download bereit. Nutzer von Bower finden eine besonders einfache Installationsmethode.

Neben dem unmittelbaren Nutzen, der sich aus der vorgesehenen Nutzung von Typeplate ergibt, gefällt mir persönlich der Fortbildungsaspekt fast noch besser. An dem Projekt lässt sich anhand von überschaubar nachvollziehbaren Ergebnissen der Umgang mit Sass in direktem Vergleich zu LESS und Stylus erlernen. Wer die ersten Gehversuche mit den Präprozessoren gewagt hat, findet in Typeplate eine sehr übersichtliche Möglichkeit, den nächsten Schritt zu gehen.

Links zum Beitrag:

Kategorien
Essentials Icons & Fonts Infografiken Inspiration

Serif vs. Sans: Typographie-Grundlagen in Massen freier Fonts (Infografik)

Soll ich Ihnen glauben, dass Sie wirklich noch nie von Urban Fonts gehört haben? Gut, bedenkt man die Schnelllebigkeit des Web und den Informationsüberfluss, der damit einhergeht, ist das durchaus denkbar. Dann lernen Sie Urban Fonts eben jetzt kennen. Dort findet sich neben einer ganz aktuellen Infografik zum Unterschied zwischen Schriften mit Serifen und Schriften ohne, immer noch ein weiter wachsender Bestand von rund 8.000 freien Schriftarten. Es lohnt sich also aus mehreren Gründen der Besuch dort…

serif-vs-sans-serif-teaser

Urban Fonts bietet tausende freier Fonts

Ich persönlich kenne Urban Fonts seit Anbeginn der Zeit. Damals durchschwammen wir gemeinsam die Ursuppe. Aus mir wurde ein Mensch, aus Urban Fonts ein Schriftarten-Portal. Wie das Schicksal so spielt.

Im Ernst. Urban Fonts begegnete mir das erste Mal vor gut sechs Jahren. Immer noch ist der Dienst vorhanden, was in diesen Zeiten zumindest bedeutet, dass sie nicht ganz unpopulär sind und nicht durchweg alles falsch machen. Nach wie vor sind die weitaus meisten verfügbaren Schriftarten kostenlos als Freeware verfügbar. Es überwiegen True Type Fonts, auch das OTF-Format findet sich. Die Installation für Windows und Mac wird, so das denn jemand benötigt, auf der Website erläutert. Webfonts als solche werden nicht angeboten. Hier ist dann etwas Handarbeit erforderlich. Das erklärt sich sicherlich aus der Historie des Dienstes. Wer hat vor sechs Jahren Webfonts nachgefragt, geschweige denn eingesetzt?

Jeder Schriftarten-Download findet einzeln als ZIP-Datei statt. Im Archiv findet sich neben dem eigentlichen Font stets auch die zugehörige Lizenzinformation. Prüfen Sie jeweils die Lizenz auf Übereinstimmung mit dem von Ihnen intendierten Einsatzzweck…

Neben Freeware-Schriften bietet Urban Fonts auch kostenpflichtiges Material an. Des weiteren finden sich Schriftarten mit Lizenzen, die Backlinks, Spenden oder sonstige Akte der Wertschätzung erfordern. Der Fantasie der Schriftentwickler ist kaum beizukommen… Da ist nochmal der Hinweis auf die stets beigefügte Lizenz wichtig. Immer schön prüfen, ob der Font zu dem gesuchten Zweck eingesetzt werden darf und wenn ja, unter welchen Voraussetzungen.

urban-fonts

Jeder Font wird auf einer Detailseite einzeln vorgestellt. Ist man auf der Suche nach einem Zeichenumfang, der den der englischen Sprache übersteigt, etwa – tada – deutsch, so wird man es als sehr nützlich empfinden, dass die Eingabe eigener Testtexte möglich ist. So ist die Verfügbarkeit von Umlauten und Sonderzeichen schnell gecheckt. Manch Font bietet nicht einmal Punkte, ts. Kleine Kritik am Rande: Wenn die Detailseite bereits die Lizenz nennen würde. Das wäre schon eine schöne Sache.

Serif vs. Sans: The Final Battle In Typography

Neben der Vielfalt an freien und weniger freien Schriftarten, findet sich bei Urban Fonts auch ein ausgesprochen aktiv gepflegter Blog zu allen Themen rund um die Typografie. Da lohnt es sich, den RSS-Feed zu abonnieren, wenn man eine Affinität zu Typografie hat.

Im Verlaufe der letzten Woche veröffentlichte das UF Team eine elegante Infografik, die sich mit dem Thema Serifen gegen Nicht-Serifen beschäftigt. Unter anderem werden die optischen Unterschiede dargestellt, die allerdings den meisten Leserinnen und Lesern wohl bekannt sein dürften.

Allerdings beschränkt sich das UF Team nicht auf diese Information. Stattdessen wird auch auf die Entstehungsgeschichte der Schriften eingegangen. Als professioneller Designer wird einem nicht neu sein, dass Serifen-Schriften immer noch für Printdesign vorgeschlagen werden, während Schriften ohne Serifen vornehmlich im Web zum Einsatz kommen sollten. Daran hält sich die Masse der heutigen Inhaltsersteller dann auch recht eng. Überschriften im Web werden zu 60%, in Fließtext sogar zu 66% mit Schriften ohne Serifen dargestellt.

Schuld ist immer noch, trotz der kommenden hiDPI-Screens, die geringe Auflösung von Bildschirmen im Vergleich zu Papier. Schriftdarstellung auf Papier lässt nicht einzelnen Pixel erkennen, aus denen sich auch in der analogen Welt die Schriften zusammensetzen. Mit 1.000 Punkten pro Zoll liegt das Papier immer noch deutlich selbst über den besten derzeit erhältlichen Smartphone-Screens, die es immerhin schon über die 400 ppi schaffen.

Ich habe die folgende Infografik in meine Infografik-Sammlung – ja, ich habe eine. Sie doch auch, oder? – integriert. Sie gehört zu den kleinen Helferlein, die man beim Kunden gern mal nonchalant zücken kann, wenn wieder ulkige Vorstellungen geäußert werden. Klicken Sie auf die Infografik, wenn Sie zur Quelle springen wollen:

serif-vs-sans-serif

(Quelle: Urban Fonts Blog)

Links zum Beitrag:

Kategorien
(Kostenlose) Services Essentials Icons & Fonts

Typechart und Typophile: Nützliche Ressourcen für Typografie-Interessierte

Über die Bedeutung der Typografie im Webdesign wissen wir alle Bescheid. Ohne Basiskenntnisse in Typografie geht gar nichts. Kein schönes, aber ein aussagefähiges Beispiel dafür ist die Webseite meiner ersten Schule in Minsk. Nachdem Sie auf „Ok“ klicken, dürfen Sie ein starkes Beispiel schlechter Webseitentypografie sehen. Ich persönlich hatte nach dem Betrachten dieser Website den drigenden Wunsch, wieder mal ein paar nützliche Typografie-Quellen für Sie herauszufischen. Dabei bin ich auf zwei hochinteressante Dienste gestoßen. Es handelt sich um Typechart und Typophile, die ich Ihnen im folgenden Beitrag vorstellen möchte.


(Bildquelle: zigazou76 auf Flickr | CC-BY-SA)

Typechart: Schnell beurteilen, wie welche Schriftart auf welchem System aussehen wird

Typechart ist ein Service, der Ihnen Arbeit und schlechte Erfahrungen ersparen kann. Er bietet Ihnen die Möglichkeit, sich anzuschauen, wie Schriften auf verschiedenen Betriebsystemen (Windows und Mac OS) aussehen. Haben Sie eine Schriftart gefunden, welche für die von Ihnen entwickelte Webseite optimal ist, können Sie auch den CSS-Code bekommen und dürfen diesen auf Ihrer Webseite verwenden. Der Service ist komplett kostenfrei.

Typechart: die Herangehensweise

Bei Typechart haben Sie mehrere Möglichkeiten. Zum einen können Sie in der Rubrik „Typeface“ direkt nach einer Schriftart suchen. Die von Ihnen gewählte Schriftart (z.B. Arial/Helvetica) wird in allen Größen und Hervorhebungen aufgelistet.


Arial/Helvetica: alle Größen und Hervorhebungen

Zum zweiten können Sie nach bestimmten Hervorhebungen unter der Rubrik Emphasis suchen. Hier wählen Sie zwischen „Normal“, „Bold“,“Italics“ und „Uppercase“ und schon erhalten Sie eine Liste von Schriften in der gewünschten Hervorhebung:


Schriften mit der Hervorhebung „Bold“

Schließlich können Sie noch nach einer bestimmten Schriftgröße schauen. Das ist unter „Type size“ möglich. Wählen Sie zwischen „Small“, „Medium“, „Large“ oder „Extra large“ und bekommen Sie alle Schriftarten in der entsprechenden Größe aufgelistet.


Schriften in der Größe „Medium“

Was noch erwähnt werden muss, ist die sogenannte Style ID für schnelle Suche einer bestimmten Schriftart. Jede Schriftart hat so eine Style ID. Kennt man diese, kann man sie im Suchfeld eintippen und direkt finden.

Neben jeder Schriftart rechts befinden sich drei Buttons: „Win“, „Mac“ und „Get CSS“. Wenn Sie auf „Win“ klicken, sehen Sie, wie eine bestimmte Schrift auf dem Windows-Betriebssystem aussieht. Analog verhält sich der „Mac“-Button für das Betriebssystem Mac OS. Und mit einem Klick auf „Get CSS“ bekommen Sie den CSS-Code für die von Ihnen gewählte Schriftart.


Anatomischer Überblick

Typophile: News, Foren, Blogs, Wiki – alles rund um die Typografie

Foren sind die Dinosaurier des digitalen Zeitalters. Fragen stellen, Antworten geben, über verschiedene Themen diskutieren… Das gefiel schon den Nutzern, die noch via Akustikkoppler auf die damals sog. Bulletin Board Systems gegangen sind, um dort Gleichgesinnte zu finden. Und natürlich verhält es sich so nicht nur bei Fussball-oder Lady Gaga-Fans, sondern auch bei Freunden der Typografie. (Gibt es überhaupt ein Thema, zu dem es kein Forum gibt?)

Deshalb stelle ich Ihnen im folgenden ein Forum vor, welches speziell für Typografie-Fans gemacht ist: Typophile.


(Bildquelle: !!!! scogle auf Flickr | CC-BY-SA)

Typophile.com: ein umfangreiches Angebot

Erstmal ein paar allgemeine Informationen zur Website. Typophile wurde im Jahre 2000 von Jared Benson als Forum gegründet. Das Forum beschäftigte sich mit den Themen Typografie, Fonts und Schriftarten. Typophile bietet heutzutage aber viel mehr als nur die Beantwortung von Fragen und Themendiskussionen. Das ist, was Sie auf Typophile.com alles finden werden:


Typophile: Startseite

Eine Vielfalt unterschiedlicher Foren zum Oberbegriff Typografie

Als Erstes finden Sie hier viele Foren, in denen rund um Typographie, also über Schriftarten, aber auch Software und Bücher diskutiert wird. Gestellte Fragen oder Diskussionsthemen werden klassifiziert. So wird ein Durcheinander vermieden. Sie können nach einer Schriftart fragen, ein Quizz spielen, Kritik abgeben und etliches mehr. Besonders beliebt scheint das Thema Font-Identifizierung zu sein, beim Durchstöbern bin ich permanent auf Fragen á la „Welcher Font ist das denn?“ gestoßen.


Typophile: ein Ausschnitt der Foren-Palette

Eine Vielfalt unterschiedlicher Blogs zum Oberbegriff Typografie

Hier finden Sie eine Ansammlung von User-Blogs. Bei Typophile können User eigene Blogs zum Thema führen. Schöne Fonts zum Verkauf gefunden? Fonts aus der Geschichte? Etwas anderes, was mit Typografe zu tun hat? Dann nichts wie etwa einen Screenshot davon machen und im Blog posten.


User-Blog Beispiel 1: Fonts zum Verkauf


User-Blog Beispiel 2: ein Font aus den Fünfzigern


User-Blog Beispiel 3: Graphic Design aus den Achtzigern

TypoWiki: user-generiertes Lexikon zu Typografie

Unter TypoWiki finden Sie ein Lexikon, welches von Usern des Forum erschaffen wurde. Dieses Lexikon wird auch von den Usern verwaltet und weiterentwickelt, mit der Motivation, eine hilfreiche nützliche Wissensquelle für Typographie-Liebhaber daraus zu machen.


TypoWiki: eine Übersicht

Hier finden Sie zu jedem Begriff eine Reihe von informativen Links, die Sie tiefer in das interessierende Thema führen können. Blogs, Geschichte, Geographie, Bücher, Terminologie und viel mehr: User von Typophile leisten hier meiner Meinung nach tolle Arbeit.

Aktuelle News zum Thema

In der Rubrik News finden Sie frische Nachrichten aus der Typographie-Welt. Seien es Konferenzen, neue Software oder Fonts: fleissige User filtern das Netz auf Neuigkeiten und bereiten es für die restlichen Leser auf.


News: Beispiel

Typophile Film Festival

Ein typographischer Trailer muss in diesem Post ebenfalls erwähnt werden. Laut meiner Recherche hat das letzte Festival im Jahre 2009 stattgefunden. Insgesamt wurden fünf solche Festivals durchgeführt. Hier ging es um die besten typographischen Filme, welche von Menschen aus der ganzen Welt gemacht wurden.


Screenshots aus den Festival-Filmen

Fazit: Persönlich finde ich die Webseite Typophile.com gut gelungen. Wer sich für Typographie leidenschaftlich interessiert, findet hier zahlreiche Informationen und Quellen zum Thema, sowie auch Möglichkeiten, bei interessanten Projekten mitzumachen und neue Kontakte zu knüpfen. Was mich etwas stört, sind Posts, die nicht am richtigen Platz sind. Leider kommt das häufiger vor. Beispielsweise werden Fragen, welche eigentlich in ein Forum gehören, teilweise als Blogpost oder Kommentar publiziert. Der User wird zwar darauf hingewiesen, sein Post bleibt jedoch am falschen Ort. Abgesehen von diesem kleinen Wermutstropfen ist Typophile sehr empfehlenswert. Schauen Sie selbst. Ich bin sicher, es werden auch für Sie interessante Informationen dabei sein.

(dpe)

Kategorien
Essentials Freebies, Tools und Templates Icons & Fonts

Webtypobuch: Umfassendes Buch rund um die Webtypografie mit kostenlosem Einstieg

Zum umfangreichen Feld der Typografie gibt es bereits zahlreiche Bücher und Websites. Auch der Teilbereich der Webtypografie nimmt seit einigen Jahren einen immer größeren und wichtigen Platz ein. Vor allem dank der Entwicklung von Webfonts wird Typografie für Webdesigner und -entwickler immer bedeutender. Der Webdesigner Gerrit van Aaken hat sich mit seinem Webtypobuch dem speziellen Thema Webtypografie sehr ausgiebig gewidmet.


Webtypobuch

Von der Technik bis zum Handwerkszeug

Das Webtypobuch bietet – um es vorwegzunehmen – für jeden etwas. Das erste Kapitel erläutert einige technische Aspekte zum Thema Schrift am Bildschirm. Die Entwicklung von Pixelfonts zu vektorbasierten Schriften und ihre Darstellung am Bildschirm werden ebenso beschrieben wie die unterschiedlichen Methoden des Rasterns von Schriften und ihre Bedeutung für die Darstellung und vor allem Lesbarkeit.

Auch aktuelle Entwicklungen wie hochauflösende Displays und die damit verbundene hohe Pixeldichte und ihre Auswirkungen auf Schrift und ihre Darstellung werden beleuchtet.


Auszug aus dem Buch auf der Website

Das zweite große Kapitel beschäftigt sich mit dem typografischen Handwerkszeug. Die dort beschriebenen Aspekte wie der Einsatz korrekter Sonderzeichen, die Wahl der richtigen Schrift, Abstände, Laufweite und Spaltenbreite sind teils allgemeiner Natur – haben also nicht explizit etwas mit Webtypografie zu tun. Allerdings wird stets die Anwendbarkeit im Web mit berücksichtigt und auf Besonderheiten hingewiesen. So sind beispielsweise die Einschränkungen benannt, die man beim Einsatz von Blocksatz und Silbentrennung im Web hinnehmen muss. Hier bieten die Browser nicht die Möglichkeiten, die Textverarbeitungs- oder gar Layoutprogramme zu bieten haben.

Websichere Schriften und Webfonts

Ein eigenes Kapitel widmet sich der Wahl der richtigen Schrift. In Zeiten von Webfonts wächst die Auswahl an Schriften und als Webdesigner ist man nicht mehr gezwungen, auf eine der wenigen websicheren Systemschriften zurückzugreifen. Dennoch erhalten auch diese einen Abschnitt im Webtypobuch.

Der größere Teil des Kapitels beschäftigt sich allerdings mit den Webfonts. In einem kleinen Ratgeber stellt der Autor die unterschiedlichen Arten vor, mit denen Webfonts in ein Webprojekte eingebunden werden können – Schriften mieten oder kaufen, über die Cloud einbinden oder selber hosten. Auch die unterschiedlichen Lizenzbedingungen, mit denen man konfrontiert wird, werden erörtert.

Wer sich mit dem Thema Webfonts noch gar nicht oder kaum auseinergesetzt hat, findet hier zahlreiche Informationen. Auch einen Überblick über verschiedene Anbieter von Webfonts – von kostenpflichtig bis kostenlos – gibt es.

Webtypobuch als E-Book, Website – oder gedruckt

Das Webtypobuch gibt es in unterschiedlichen Formaten. Neben der E-Book-Variante (kompatibel mit Apple iBook und dem Kindle) ist es auch als klassisches Buch erhältlich – jeweils für knapp 10 Euro. Außerdem steht das komplette Buch kostenfrei als Website zur Verfügung.

Fazit: Das Webtypobuch ist gut geschrieben und handelt sehr gut verständlich das Thema Webtypografie ab. Es ist seinen Preis auf jeden Fall wert. Wer sich davon selber überzeugen möchte, liest zunächst in die entsprechende Website hinein, unterstützt dann aber fairerweise den Autor durch den Kauf einer der kostenpflichtigen Varianten.

(dpe)

Kategorien
Design Essentials HTML/CSS Icons & Fonts

Typefacts vermittelt anschaulich die wichtigsten Regeln der Typografie – auch für Webdesigner

Typografie ist eine Wissenschaft für sich. Nicht ohne Grund gibt es zahlreiche Bücher, darunter Nachschlagewerke und dicke Wälzer, die sich mit dem Thema beschäftigen. Denn richtige Typografie ist aufgrund zahlreicher Regeln und Fallstricke keine einfache Sache. Hat man es früher im Internet mit korrekter Typografie nicht so ernst genommen (noch heute dient das Zoll-Zeichen oft als Anführungszeichen), werden mittlerweile auch Websites – vor allem dank Webfonts – typografisch immer ansprechender. Typefacts versucht, Typografie ansehnlich und verständlich zu vermitteln.


Typefacts

Die wichtigsten Regeln anschaulich erklärt

Typefacts, welches vom Schriftentwickler Christoph Köblin betrieben wird, richtet sich vor allem an jene, die mit Typografie bislang wenig am Hut hatten. Die wichtigsten typografischen Regeln werden daher sehr anschaulich und praxisbezogen erläutert. Auch wenn sich Typefacts nicht explizit an Webdesigner richtet, ist es eine gute Anlaufstelle, um einen Einstieg in das große Thema Typografie zu finden.


Schaubild auf Typefacts

Die Darreichungsform ist zudem auch für Kinder der Generation Sesamstraße mit extrem kurzen Aufmerksamkeitsspannen leicht verdaulich. In kleinen Beiträgen mit zahlreichen Bildern stellt Köblin das Regelwerk vor. Wer sich da durchgearbeitet hat, dem dürften grobe Schnitzer nicht mehr unterlaufen. Neben den bereits genannten Anführungzeichen wird unter anderem auf Binde- und Gedankenstriche, Ligaturen sowie das Apostroph eingegangen. Gerade beim Apostroph scheint Aufklärungsbedarf. Neben der Wahl des falschen Zeichens (Minutenzeichen oder Akzent) wird das Apostroph auch gerne an falscher Stelle eingesetzt (zum Beispiel bei der Pluralbildung oder im Falle des sogenannten Deppenapostroph).

Schriften und Zusatzinfos

Neben typografischen Regeln stellt Christoph Köblin auch einige Schriften vor. Zudem hat er eine kleine Rubrik eingerichtet, in der er Alternativen zu bekannten und viel verbreiteten Schriften auflistet. Denn nicht immer sind Helvetica oder Gill vorhanden, sodass auf adäquaten Ersatz zurückgegriffen werden will, wenn kann. Außerdem gibt es eine Übersicht namhafter Unternehmen und ihrer verwendeten Hausschriften.


Buchempfehlungen auf Typefacts

Darüber hinaus gibt es weitere nützliche Infoseiten. Es werden Tastenkombinationen für typografische Zeichen, die nicht auf der Tastatur zu finden sind, vorgestellt, sowie Symbole, die sich standardmäßig in vielen Schriften wiederfinden.

Fazit: Typefacts ist für Einsteiger und typografische Laien eine gute Anlaufstelle. Da es sich nicht explizit an Webdesigner richtet, fehlen spezifische Infos rund um Webfonts, Entities und CSS-Typografie; aber damit haben Webdesigner in der Regel ja keine Probleme.

(dpe)