1. Girly Style und Bakery Logos

Der Girly-Style ist vor allem bei Bäckerei- und Café Logos sehr beliebt. Pastellfarben, Muffins und Schriften mit dünnen, oft geschwungenen Linien im Art Deco-Stil passen super zu diesem Trend.

Logo Inspirationen

Passende Free-Fonts für Logos im Girly-Style

2. Asiatische Logos

Asiatisches Design ist immer sehr stilvoll. Als Schrift für dein Logo im Asia-Style kannst du z.B. eine Schrift mit kalligrafischem Pinselstrich oder eine ganz minimalistische, serifenlose Schrift verwenden.

Logo Inspirationen

Passende Schriften für Logos im asiatischen Stil

3. Futuristisch, minimalistische Logos

Für ein Logo im futuristischen Computer-Stil eignet sich eine dünne, serifenlose Schriften besonders gut. Oft wird hier auch komplett auf Großbuchstaben verzichtet.

Logo Inspirationen

Passende Free-Fonts für futuristische Logos

4. Bubble Style Logos

Der Bubble-Style ist spätestens mit den Logos von Twitter und Skype zum Kult geworden. Die Wirkung ist der Logos ist modern mit einer netten, freundlichen nicht zu kühlen Komponente. Kein Wunder das dieser Stil im Web so beliebt ist.

Logo Inspirationen

Kostenlose Schriften im Bubble Style

6. Retro und klassische Logos

Immer wieder schön sind klassische Logos mit einem modernen, zeitlosen Twist. Für den klassischen Stil findest du jede Menge wunderschöne Free Fonts, meist passen Serifen-Schriften am besten.

Logo Inspirationen

Passende Schriften für den klassischen Logo-Stil

Wie gefallen dir die Logos und Schriften? Kennst du weitere schöne Free-Fonts, die zu diesen Logo-Stilen sehr gut passen würden? Über deine Tipps und dein Feedback freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Über die Kraft von Symbolen, und wie du das passende Symbol für dein Logo findest
2. 25 köstliche Logo Inspirationen zum Thema Essen
3. 25 Logos inspired by Nature
4. 10 WordPress-Plugins für Typografie-Liebhaber
5. Slab Serif Free-Fonts – die schönsten serifenbetonten Schriften im Überblick

1. Text und Bilder

Bilder sind eines der wichtigsten Elemente, um einen längeren Text oder Artikel aufzulockern. Dabei solltest du darauf achten, dass der Abstand zwischen Bild und Text immer gleichmäßig und in einem angenehmen Abstand gesetzt ist (CSS margin).

Außerdem kannst du Bilder rechts oder linksbündig setzen und den Text (mit floating) darum fliessen lassen.

Dabei ist es aber sehr wichtig, dass die Textbreite nicht zu schmal wird.

1.1. Vorschaubilder (thumbnails)

Eine tolle Option (die du z.B. bei WordPress-Blogs ganz einfach einfügen kannst, hier eine kleine Anleitung) sind Vorschaubilder (thumbnails) für deine Artikel. Ein Vorschaubild macht es dem Leser leichter, einen Einstieg in den Artikel zu finden.

1.2. Bilder mit oder ohne Rahmen

Bilder kannst du mit oder ohne Rahmen einfügen. Die Entscheidung, ob du einen Rahmen verwenden möchtest, hängt stark vom Hintergrund der Seite ab. Wichtig ist, dass sich die Bilder genug vom Hintergrund abheben. Bei dunklen Bildern auf dunklem Hintergrund (oder hellen Bildern auf hellem Hintergrund) ist die Kante des Bildes nicht mehr deutlich zu erkennen. Wenn du möchtest, kannst du aber auch gerade diesen Effekt als Stilmittel einsetzen.

Ein Beispiel für Bilder auf dunklem Hintergrund. Hier wäre ein Rahmen überflüssig.

Ein Bild auf hellem Hintergrund, dass ebenfalls ohne Rahmen auskommt.

1.3. Bildunterschriften (Captions)

Ein weiteres, hilfreiches Stilmittel beim Arbeiten mit Text und Bild sind die Bildunterschriften (Captions). Diese sind oft kleiner als die eigentliche Textgröße und eventuell in einer leicht helleren Farbe gesetzt. Du kannst auch kursiven Text für deine Captions verwenden.

Beispiel einer Bildunterschrift innerhalb des Rahmens.

Hier kommt eine kursive Schrift zum Einsatz.

2. Listen

Inhalte in Listen zu unterteilen ist ebenfalls sehr hilfreich, um Texte zu ordnen. Listen verdeutlichen die Struktur eines Textes. Der Leser kann leichter überschauen, was ihn im Text erwartet.

Du kannst deine Listenelemente entweder in einer »Unordered List« (HTML-tag ul) sortieren, oder in einer »Ordered List« (ol).

2.1. Unordered List

Eine »Unordered List« ist nicht nummeriert, sondern wird durch verschiedene Listenzeichen (Bullets) markiert. Es gibt unterschiedliche CSS-Elemente, die du den Listenelementen (HTML-tag li) deiner Unorderd List mit dem CSS-Style »list-type« zuweisen kannst.

Falls du deine eigenen Bullets gestalten möchtest, kannst du auch ein Image erstellen und es als Bullet einfügen.

Eine Liste mit kreativen Sternchen.

Hast du einen relativ breiten Text, kannst du das Listenelement auch noch ein wenig nach rechts einzurücken. So hebt sich die Liste deutlicher vom übrigen Text ab. Außerdem ist es sinnvoll zwischen Fließtext und Listenelement, sowie zwischen den einzelnen Elementen innerhalb der Liste, einen gwissen Abstand zu halten. So wirkt die Liste nicht gequetscht und die einzelen Listenelemente sind optisch angenehm voneinander getrennt.

2.2. Ordered List

Bei einer Ordered List kannst du deine Listenelemente z.B. mit Zahlen, Buchstaben oder römischen Zahlen nummerieren.

Hier findest du eine Zusammenstellung aller CSS-Styles für Listenelemente.

3. Initiale (große Anfangsbuchstaben) setzen

Den ersten Buchstaben deines Artikels kannst du als einleitendes Element in Großbuchstaben setzen. Entweder verwendest du dafür ein Image, oder du stylst den ersten Buchstaben im Text mit in einer größeren Schrift. Du solltest allerdings darauf achten, das der Abstand ziwschen Initiale und Fließtext angenehm gestaltet ist.

4. Zitate und Textpassagen hervorheben

Ein sehr schönes Stilmittel ist es auch, besondere Textpassagen (z.B. Zitate, die wichtigste Ausage eines Textes etc.) durch Schriftgröße, Hintergrund oder kursiven Text hervorzuheben.

4.1. Zitate

Zitate markierst du in deinem Code durch »blockquotes«. Um Zitate hervorzuheben, kannst du ihnen eine besondere Schrift- oder Hintergrundfarbe geben, sie in kursiv setzen und eine größere Schrift verwenden. Wenn du möchtest, kannst du auch eine andere Schriftart einsetzen (z.B. eine Serifenschrift).

Ein Trend im Webdesign ist es auch, Zitate mit einem Balken links vom Text zu markieren oder besonders große Anführungszeichen zu verwenden. Allgemein ist es sinnvoll Zitate ein wenig rechts und links einzurücken.

4.2. Mit Pullquotes Inhalte hervorheben

»Pullquotes« sind hervorgehobene Textpassagen oder Säzte, die du aus deinem Text herausziehst, um so die Aussage des gesamten Textes besonders zu unterstreichen. Der Unterschied zu »blockquotes« ist, dass der Text wiederholt wird (also im Fießtext noch einmal vorkommt).

Oft sind »pullquotes« rechts oder linksbündig vom Textblock platziert, und in einer größeren oft fetten Schrift gesetzt.

Du solltest Zitate und hervorgehobenen Text nur dezent einsetzen. Hast du zu viele Zitate in einem Text, geht der Effekt verloren und der Textfluß wird zu stark unterbrochen.

4. Code anzeigen

Hast du eine Webseite oder einen Blog auf dem du auch Code-Beispiele zeigen möchtest, solltest du diesen ebenfalls besonders gestalten.

Ein sehr schönes Beispiel für die Gestaltung von Code kannst du dir auf der Webseite Perishable Press anschauen.

Die HTML-tags um Code in Text zu kennzeichnen sind pre und code.

Da sich der Code vom übrigen Text abheben soll ist es hilfreich, wenn du einen Rahmen oder eine Hintergrundfarbe verwendest. Eine geläufige Methode ist auch, eine farbige Border an der linken Seite zu setzen. Für die Darstellung von Code solltest du eine eigene Schriftart verwenden. Meist werden für Code Monospaced Fonts (nichtproportionale Schriftart) verwendet.

Hast du eine WordPress-Webseite kannst du natürlich auch ein Plugin installieren, um Codeschnipsel auf deiner Seite anzuzeigen. Beim Plugin »Syntax Highlighter Evolved« hast du z.B. die Möglichkeit die Codezeilen zu nummerieren und den Code farblich zu unterscheiden. Außerdem können deine Leser den Code ausdrucken, kopieren oder sich in einem extra Fenster anzeigen lassen.

So sieht Code mit Hilfe des WordPress-Plugin aus.

Wie du siehst gibt es jede Menge Möglichkeiten deine Webtexte ansprechend und übersichlich zu gestalten. Kennst du weitere Techniken, um Texte attraktiv darzustellen? Über dein Feedback und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Kostenlose Grafik- und Bildbearbeitungs-Programme für Webdesigner
2. Typo-Tipps für Webdesigner (Teil 2): Fließtexte gestalten
3. Typo-Tipps für Webdesigner (Teil 1): Styling der Überschriften
4. 10 WordPress-Plugins für Typografie-Liebhaber
5. 15 praktische Typografie- und Font-Tools für Webdesigner

1. Die Schriftart wählen

Auch beim Fließtext stellt sich dir wieder die gleiche Frage, wie schon bei der Schriftwahl der Überschriften: Verwendest du eine serifen- oder eine serifenlose Schrift?

Eine Serifenschrift hat den Vorteil, dass sie auch bei längeren Textabschnitten gut lesbar ist. Eine serifenlose Schrift ist dagegen zeitloser und passt eventuell besser zu deinem restlichen Webdesign. Ein Trick (den du besonders gut bei Texten fürs Web anwenden kannst) ist es großzügig Absätze einzubauen, um die Textpassagen so kürzer und überschaubarer zu gestalten.

Du solltest auch daran denken, dass Texte im Internet eher vom Leser abgescannt werden, als von Anfang bis Ende durchgelesen.

2. Die passende Schriftgröße

Nachdem du dich für eine Schriftart entschieden hast, musst du dich nun noch für eine passende Schriftgröße entscheiden. Über die passende Größe von Webtexten wird ganz gerne diskutiert. Meiner Meinung nach tendieren viele Webdesigner dazu, eine zu kleine Schriftgröße zu verwenden (weil sie finden das es schicker aussieht oder besser zum übrigen Design ihrer Seite passt).

Doch was bringt der beste Text, wenn er nicht angenehm zu lesen ist? Daher würde ich beim Fließtext eher zu einer größeren font-size raten. Kleiner als 12px-13px sollte der Fließtext also wirklich nicht sein, eher größer. Ich denke eine Standard-Schriftgröße zwischen 14-16 Pixeln ist (je nach Schriftart) ideal.

3. Der Zeilenabstand (line-height)

Nicht nur die Schriftgröße ist für die Lesbarkeit eines Textes wichtig, auch der Abstand zwischen den einzelnen Text-Zeilen. Du solltest darauf achten, das der Text einen angenehmen Fluss bildet, und du beim Lesen mit den Augen leicht von einer Zeile in die nächste springen kannst. Bei zu geringem Zeilenabstand wirkt der Text gequetscht und man verrutscht beim Lesen leicht in der Zeile.

4. Die Textbreite bestimmen

Ein weiterer, wichtiger Punkt ist die richtige Textbreite für deinen Fließtext zu bestimmen. Diese sollte nicht zu schmal, aber auch nicht zu breit sein.

Bei einer zu schmalen Textbreite kann kein Rhythmus beim Lesen entstehen, da der Leser ständig den Text unterbrechen muss, um in die nächste Zeile zu wechseln.

Bei einem zu breitem Text verrutscht der Leser leicht mit dem Auge (während er in die nächste Zeile springt) und weiss dann nicht mehr, in welcher Zeile er weiter lesen muss.

Ist die Textbreite dagegen richtig gewählt, kann der Leser dem Text entspannt folgen, ohne sich besonders anstrengen zu müssen.

5. Kontrast zwischen Schrift und Hintergrund schaffen

Um zu Vermeiden, dass die Augen beim Lesen unnötig angestrengt werden, ist es auch wichtig einen gewissen Kontrast zwischen Schriftfarbe und Hintergrund zu erzeugen. Bei ähnlichen Farben für Text und Hintergrund ist der Text sehr schwer zu lesen.

Grundsätzlich ist es für das Auge angenehmer, dunkle Schrift auf hellem Hintergrund zu lesen. Helle Schrift auf dunklem Hintergrund ist vor allem für kurze Textpassagen oder besonders hervorgehobenen Text geeignet.

6. Absätze für bessere Lesbarkeit

Gerade im Web ist es wichtig den Text aufzulockern, und genügend Weißraum zwischen den einzelnen Absätzen beizubehalten. So kann der Leser auch an einer beliebigen Stelle im Text einsteigen, und eventuell nur für ihn relevante Absätze des Artikels lesen.

7. Textelemente hervorheben

Um bestimmte Wörter oder Sätze zu betonen, verwendest du am besten kursiven oder fett gesetzten Text.

Willst du einen ganzen Satz betonen, kannst du diesen auch kursiv setzen und zusätzlich einrücken. So hebt sich die Textpassage noch mehr vom restlichen Text ab.

Du solltest Text (der kein Link) ist, allerdings nicht durch Unterstreichen betonen, da unterstrichene Elemente in Webtexten als Links gesehen werden.

8. Text-Links stylen

Wie gerade schon erwähnt gelten unterstrichene Wörter als Links. Zusätzlich kannst du einen Link noch durch eine spezielle Linkfarbe hervorheben. Diese kann entweder im Normal-Zustand heller sein als bei Hover, oder anders herum.

Eine sehr beliebte Alternative zur durchgezogenen Linie (text-decoration: underline) ist, den Link mit einer gepunkteten Border zu unterstreichen (text-decoration: none; border: dotted;).

Natürlich kannst du deine Links auch nur mit einer Signal-Farbe markieren, und dann bei Hover unterstreichen oder eine Hintergrundfarbe setzen.

9. Abstände zu Elementen (margin, padding)

Als letzten Punkt möchte ich noch kurz darauf hinweisen, wie wichtig der Abstand zwischen Text und anderen Elementen im Artikel (z.B. Bilder oder Überschriften) ist. Du solltest bei deinem CSS-Styling der margins und paddings darauf achten, dass immer ein gleichmäßiger Abstand zwischen den jeweiligen Elementen eingehalten wird.

Haben dir diese Typo-Tipps weiter geholfen? Kennst du noch weitere wichtige Punkte, die bei der Gestaltung von Texten im Web unbedingt zu beachten sind? Über dein Feedback und deine Tipps freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten
2. Typo-Tipps für Webdesigner (Teil 1): Styling der Überschriften
3. 15 praktische Typografie- und Font-Tools für Webdesigner
4. 20 Google Chrome Extensions für Webdesigner und Programmierer
5. 10 praktische Online-Tools für Webdesigner

1. Die Überschriften-Hierarchie

Genau wie in Zeitschriften-Layouts gibt es auch auf Blogs eine Hierarchie für die Überschriften. Die erste Überschrift (mit dem HTML-Tag h1) wird dabei für die Blog-Überschrift (bzw. für dein Logo) verwendet. Sie sollte also auf jeder Seite nur einmal vorkommen. Die zweite Überschrift in der Hierarchie (mit dem HTML-Tag h2) kannst du dann für deine Artikel-Überschriften einsetzen.

Für die bessere Strukturierung deines Artikels kann es (vor allem bei längeren Artikeln) hilfreich sein, weitere Unterüberschriften einzusetzen. Diese sind in der Schriftgröße kleiner als die Artikel-Überschrift. Die Schriftart solltest du aber für alle Überschriften beibehalten.

2. Weißräume bewusst einsetzen

Um die Überschriften deines Artikels hervorzuheben ist nicht nur die Schriftgröße von Bedeutung, sondern auch der Abstand zwischen Überschrift und dem Artikel-Text (margin und padding).
Diesen Abstand solltest du so wählen, dass zwar deutlich wird zu welchem Text die Überschrift gehört, aber gleichzeitig die Überschrift nicht »eingequetscht« wirkt.

Vor allem bei Web-Texten musst du beachten, dass der Leser deinen Text erst mit dem Auge abscannt, bevor er an einer Textstelle intensiver zu lesen beginnt. Daher ist es wichtig, dass die Überschriften lesbar, und deutlich als solche zu erkennen sind.

Und nicht nur die Abstände zwischen der Überschrift und dem übrigen Artikel-Text sind wichtig, sondern auch der Abstand der einzelnen Überschrift-Zeilen (line-height). Beim Testen des richtigen Abstandes verwende ich immer eine Überschrift die ein g, und ein Ü enthält. So kann ich sicher sein, dass der Abstand auch bei besonders überlappenden Buchstaben noch ausreichend ist.

3. Serifen oder Serifenlos

Als nächstes solltest du entscheiden, ob du eine Schrift mit Serifen (z.B. Georgia oder Times New Roman) oder eine serifenlose Schriftart (z.B. Arial oder Verdana) für deine Überschriften verwenden möchtest. Um einen Kontrast zwischen Überschrift und Fließtext zu erzeugen, kannst du für deine Überschriften eine Serifenschrift wählen, und für den Fließtext eine serifenlose Schrift (oder umgekehrt).

Eine Serifen-Schrift bringt meist mehr Charakter mit sich.

Eine serifenlose Schrift wirkt dagegen moderner und ist vielseitiger einzusetzen.

Du kannst dich natürlich auch nur für einen Schrifttyp im gesamten Layout entscheiden. Deine Überschriften könntest du dann auch durch fette Schrift (font-weight: bold oder 700) speziell hervorheben.

Eine weitere Alternative wäre den Überschriften den CSS-Wert text-transform:uppercase; zu geben, und so alle Überschriften in Großbuchstaben zu setzen. Wenn du oft lange Überschriften für deine Artikel verwendest, ist ein Text in Großbuchstaben allerdings nicht unbedingt zu empfehlen, da dieser schwerer lesbar ist.

4. Verwendung von Farbe

Ein weiteres Element mit dem du deine Überschriften hervorheben kannst, ist der Einsatz von Farbe. Hierbei solltest du allerdings beachten, dass du Farbe auch sehr gut als Link-Style verwenden kannst. Daher solltest du mit Farbe dezent umgehen.

Du könntest beispielsweise einen dezenteren Ton deiner Link-Farbe als Farbe der Überschriften verwenden.

Oder du verzichtest im normalen Zustand deiner Überschriften auf Farbe und bringst diese erst beim Hover-Zustand zum Einsatz.

5. Überschriften als Links

Wie gerade schon erwähnt eignet sich eine Farbe besonders gut für die Markierung von Links. Auf der Startseite deines Blogs sind alle Überschriften Links zum jeweiligen Artikel. Diese Überschriften-Links kannst du bei Hover entweder mit einer Farbe, unterstrichen oder mit einer Hintergrundfarbe besonders hervorheben.

Hast du dich für eine Link-Farbe entschieden, ist es sinnvoll diese Farbe auch bei deinen weiteren Links wieder zu verwenden.

6. Datum, Kategorie, Schlagwörter und Autor des Artikels

Soweit es für deinen Blog sinnvoll ist, kannst du all diese Zusatz-Elemente oberhalb oder unterhalb deiner Artikel-Überschrift einfügen. Du solltest darauf achten das die Infos übersichtlich angeordnet sind, und den Fokus nicht von der Überschrift nehmen.
Viele Webdesigner nutzen diese Meta-Daten auch, um den Artikeln eine individuelle Note zu verleihen. Besonders bei der Darstellung des Datums gibt es viele kreative Lösungen.

Um nicht zu sehr von den Überschriften abzulenken, kannst du die Meta-Daten (die keine Links sind) auch in einem leichterem Farb-Ton darstellen, z.B. einem hellen Grau.

Findest du diese Tipps hilfreich oder kennst du weitere Tricks, um Blog-Überschriften besonders zu gut zu stylen? Über dein Feedback freue ich mich sehr!

Ähnliche Artikel zu diesem Thema

1. Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten
2. Typo-Tipps für Webdesigner (Teil 2): Fließtexte gestalten
3. 10 WordPress-Plugins für Typografie-Liebhaber
4. 15 praktische Typografie- und Font-Tools für Webdesigner
5. CSS Grid-Systeme und Grid-Generatoren für Webdesigner

1. I Love Typography

Auf dem Blog I Love Typography erfährst du alles, was du je über Typografie wissen wolltest. Es gibt regelmäßig Interviews, Bücher-Empfehlungen, Infos zu neuen Schriften und vieles mehr.

2. Typographica

Auf der Webseite Typographica werden neue Schriften und Bücher zum Thema Typografie besprochen.

3. Slanted

Slanted ist ein deutscher Blog und Print-Magazin mit jeder Menge Infos über Typografie, Design und Illustration.

4. Ministry of Type

Ein toller Blog mit wunderbarer Typo-Inspiration.

5. Typophile

Die Typophile-Webseite bietet News, ein TypoWiki und ein tolles Forum, indem du dich mit Gleichgesinnten Typo-Fans austauschen kannst.

6. TypoJungle

TypoJungle ist eine tolle Ressourcenquelle rund um Typografie und Design. Es werden auch neue Bücher und Ausstellungen vorgestellt.

7. we love typography

we love typography ist ebenfalls eine Inspirations-Seite mit vielen Fotos, Typografie- und Designarbeiten.

8. Typography Served

Typography Served bietet eine inspiriernende Sammlung kreativer typografischer Arbeiten.

9. typo/graphic posters

typo/graphic posters stellt jede Menge kreative Posterdesigns vor.

10. Type for you

Ein weiterer Blog mit tolles Insights zum Thema Typografie.

11. Free Typography

Der Blog stellt die besten Free Fonts vor. Eine tolle Ressource!

12. TYPEinspire

Jede Menge Inspiration für Schrift und Typography findest du auch auf der Ressoucenseite TYPEinspire.

Kennst du weitere inspirierende Webseiten zum Thema Typografie? Dann schreibe mir doch einfach einen Kommentar. Ich freue mich auf deine Tipps!

Ähnliche Artikel zu diesem Thema

1. Webdesign Inspiration: 20 mobile Webseiten für iPhone, Android & Co
2. So findest du die passende Schrift für dein Logo
3. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
4. Webdesign Inspiration: 30 minimalistische WordPress-Blogs
5. 20 grandiose Webseiten-Header, die deine Kreativität beflügeln

1. wp Typography

wp Typography ist ein »Must have Plugin« für alle Typo-Liebhaber! Das Plugin ermöglicht Silbentrennung in zahlreichen Sprachen, erleichtert den Umgang mit Sonderzeichen, und ermöglicht es Absätze und Spalten genauer zu definieren.

2. WP Cufon

Die Verwendung von Non-Websafe Fonts ist zur Zeit DER Renner im Webdesign. Mit dem WP Cufon Plugin wird es zum Kinderspiel Cufon auf deine WordPress-Seite zu integrieren, um so alternative Schriften zu nutzen.

3. WP sIFR

Möchtest du sIFR für die Verwendung Nicht-Websicheren Schriften verwenden? Mit dem WP sIFR-Plugin kannst du so ziemlich alle sIFR-Funktionen direkt von deinem WordPress Adminbereich einstellen, und so ganz bequem die verschiedensten Schriften auf deiner Webseite integrieren.

4. Any Font

Mit dem Any Font-Plugin kannst du jede beliebige True Type oder OpenType Schrift laden, und diese z.B. als Überschriften mit Hilfe von Image Replacement auf deiner WordPress-Seite verwenden.

5. Facelift Image Replacment (FLIR)

FLIR ersetzt mit Hilfe von JavaScript deine Schriften durch Bilder, welche du direkt im Adminbereich von WordPress erstellen kannst. Und etliche Free-Fonts sind beim Plugin gleich schon mit dabei.

6. Font Burner Control Panel

Mit Fontburner kannst du ganz einfach über 1000 Fonts von der Fontburner-Webseite nutzen, um sie auf deiner WordPress-Seite zum Einsatz zu bringen. Toll ist, dass du Farben und Größe deiner Fonts direkt im Admin-Panel anpassen kannst

7. Disable Auto Formatting

Das Plugin deaktiviert die Standard-Formatierung von WordPress.

8. Syntax Highlighter and Code Colorizer for WordPress

Mit diesem Plugin kannst du Code in deinen Artikeln anzeigen, was besonders für Tutorials sehr nützlich ist.

9. Simple Pull Quotes

Mit dem Simple Pull Quote-Plugin schaffst du ganz leicht, Zitate in deinem Blog besonders hervorheben.

10. WP Footnotes

Du benötigst oft Fußnoten für deine Blog-Artikel? Dann ist das WP Footnotes Plugin genau das Richtige für dich!

Kennst du noch weitere Plugins, die den Umgang mit Typografie und Schrift auf WordPress-Blogs verbessern? Dann schreibe mir doch deine Tipps in einem Kommentar. Ich freue mich auf dein Feedback!

Ähnliche Artikel zu diesem Thema

1. So findest du die passende Schrift für dein Logo
2. Die besten Webseiten und Blogs für Typografie-Liebhaber
3. 15 praktische Typografie- und Font-Tools für Webdesigner
4. 14 Security-Plugins, die deine WordPress-Installation sicherer machen
5. Kreative Free-Fonts im Handmade-Style

1. CopyPasteCharacter

Eine tolle Seite und definitiv ein Browser-Lesezeichen wert, wenn du auf der Suche nach HTML-Codes für Sonderzeichen bist. Und wenn du ein wahrer Fan von Sonderzeichen bist, ist der CopyPasteCharacter-Kaffeebecher ja vielleicht sogar etwas für dich ;-)

2. What the Font

Du hast ein Schriftzug oder Logo im Netz gefunden und möchtest wissen, welche Typo verwendet wurde? Dann lade doch einfach bei »What the Font« ein Image hoch, und es wird dir eine Liste der möglichen Schriften angezeigt.

3. Typechart

Bei Typechart kannst du dir Web-Fonts in verschiedensten Styles ansehen, die Unterschiede zwischen der Ansicht auf Mac und Windows vergleichen, und den dazugehörigen CSS Code kopieren.

4. Fontstruct

Fontstruct ist ein kostenloser Online-Editor für Schriften. Deinen fertigen Schrift-Entwurf kannst du als TrueType-Font für Mac und Windows speichern.

5. TypeTester

Mit dem TypeTester kannst du bis zu drei Font-Styles parallel vergleichen. Du kannst aus einer Liste von Web-Safe, Windows und Mac-Fonts wählen und u.a. die Werte von Schriftgröße, Farbe und Hintergrund anpassen.

6. Fonttester

Fonttester ist ein praktisches Tool, um mehrspaltigen Text anzulegen. Du kannst etliche Schrift-Werte anpassen, und dir den CSS Code für deine Auswahl generieren lassen.

7. CSS Typeset

Ein super simples und übersichtlich gestaltetes Font-Tool, mit dem du schnell den passenden CSS Code für deine Styles generieren kannst.

8. Em Calculator

Du willst deine Schriftgrößen von Pixel in EM umwandeln? Dann ist dieses Tool dein neuer bester Freund ;-)

9. PxtoEM

Das praktische Online-Tool PxtoEM konvertiert dir jede Schriftgröße von Pixel zu EM und andersrum.

10. Blindtext Generator

Um dein Design-Layout oder dein Theme mit Blindtext zu füllen, kannst du dir die passenden Texte mit dem Blindtext Generator erstellen.

11. Lorem Ipsum Generator Chrome Extension

Und falls du mit Google Chrome arbeitest, ist die Lorem Ipsum Generator Extension ein toller Tipp.

12. HTML Ipsum

Wenn du Blindtext direkt in deinen Code einfügen möchtest, kannst du dir bei HTML Ipsum bereits fertig generierte Texte kopieren.

13. Color Contrast Checker

Mit diesem Tool kannst du herausfinden, wie gut eine bestimmte Text- und Hintergrundfarbe miteinander harmonieren, und ob sich der Text genügend vom Hintergrund absetzt.

14. STC fontBrowser

Der STC fontBrowser ist ein geniales Tool um Schriften miteinander zu vergleichen, die du auf deinem Computer installiert hast.

15. CSSTXT

Ein weiteres hilfreiches Online-Tool, um den CSS Code deiner Schriftauswahl online zu generieren.

Wie gefallen dir diese Font-Tools für Webdesigner? Arbeitest du selbst mit den Tools, oder kennst du weitere hilfreiche Webseiten für Typografie und Schrift? Ich freue mich schon auf deine Tipps!

Ähnliche Artikel zu diesem Thema

1. Mach dich fit für CSS3 mit diesen praktischen CSS3 Online-Tools
2. 16 praktische Cheat Sheets für Webdesigner
3. Die besten Webseiten und Blogs für Typografie-Liebhaber
4. 10 WordPress-Plugins für Typografie-Liebhaber
5. 10 praktische Online-Tools für Webdesigner

1. Chunk Five

2. Charis SIL

3. Charrington

4. Tonky

5. Alexandria

6. Covington SC

7. Akenaten

8. Museo Slab

9. Orchidee

10. Love Ya Like a Sister

11. Kontrapunkt

12. Nadia Serif

13. Rough Rockys

14. Academic M54

15. Lifestyle Marker M54

Slab Serifen im Einsatz

Hier einige schöne Beispiele für die Verwendung von SlabSerifen im Webdesign.

1. Second And Park

2. Brookyn Fare

3. Jeroen Homan

Wie gefallen dir serifenbetonte Schriften im Webdesign? Kennst du weitere schöne Slab-Serfifen Fonts, die du unbedingt weiterempfehlen kannst? Dann schreibe mir doch einfach einen Kommentar, ich freue mich auf deine Nachricht!

Ähnliche Artikel zu diesem Thema

1. So findest du die passende Schrift für dein Logo
2. Die 10 schönsten JavaScript-Plugins für dein Portfolio
3. 10 WordPress-Plugins für Typografie-Liebhaber
4. Kreative Free-Fonts im Handmade-Style
5. Webdesign Inspiration: 25 kreativ gestaltete Online-Shops

1. Eraser

2. Idolwild

3. Sketchetica

4. Tinet

5. FFF Tusj

6. Journal

7. Little Days

8. Hand Test

9. Honey I stole your Font

10. Gorillaz

11. Sketchy Times

12. Mia’s Scribbling

13. Simon Script

14. Coert Schrift

15. April 16

16. Rodeo King

17. Rai

18. Brushed

19. Sketch Block

20. WC Roughtrad

Handmade Fonts im Einsatz

Und hier noch ein paar Inspirationsquellen, was sich mit Handmade-Schriften so alles anstellen lässt.

Kennst du noch weitere tolle Handmade Free Fonts oder inspirierende Webseiten im Handmade Style? Dann schreib doch einfach einen Kommentar, ich freue mich auf deine Tipps!

Ähnliche Artikel zu diesem Thema

1. So findest du die passende Schrift für dein Logo
2. 10 WordPress-Plugins für Typografie-Liebhaber
3. Slab Serif Free-Fonts – die schönsten serifenbetonten Schriften im Überblick
4. 20 schöne Schreibschrift Free-Fonts für Webdesigner
5. Schriften mit @font-face einbetten, so funktioniert’s

1. Marketing Script

2. Creampuff

3. Learning Curve Pro

4. Ballpark

5. Deftone Stylus

6. BlackJack

7. Heather

8. Miama

9. Magesta Script Mix

10. Prelude

11. Sloe Gin Rickey

12. Black Rose

13. The King & Queen Font

14. Adorable

15. Carrington

16. Lauren Script

17. Coventry Script

18. Hawaii Lover

19. Brock Script

20. Ginga

Ich hoffe dir gefällt diese Font-Sammlung, und du kannst die eine oder andere Schrift in Zukunft für deine Designs verwenden.

Kennst du noch weitere schöne Schreibschrift Free-Fonts? Ich freue mich auf deine Tipps :-)

Ähnliche Artikel zu diesem Thema

1. So findest du die passende Schrift für dein Logo
2. Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten
3. Typo-Tipps für Webdesigner (Teil 1): Styling der Überschriften
4. Kostenlose Icons, Fonts & Texturen – die 20 besten Ressourcen für Webdesigner
5. 10 WordPress-Plugins für Typografie-Liebhaber

Alle modernen Browser unterstützen das Einbetten von Schriften mit @font-face bereits, und für ältere Browser kann man immer auf eine Websafe-Font wie Arial, Verdana oder Georgia zurück greifen. Eigentlich in Ordnung, wenn man sich erst einmal an den Gedanken gewöhnt hat, dass eine Webseite nicht in jedem Browser gleich angezeigt wird.

@font-face Free-Font Kits

Bevor du eine Schrift einbettest, musst du dich informieren, ob das Einbetten mit @font-face für deine Wunsch-Schrift erlaubt ist. Infos dazu findest du in der Schrift-Lizenz. Am einfachsten ist es, du wählst eine Free-Font. Auf Font-Seiten wie Fontsquirrel findest du jede Menge kostenlose Schriften, die bereits mit einem @font-face Kit fürs Einbetten vorbereitet sind.

Das Kit enthält die generierten Schriften TrueType .ttf, und OpenType .otf für Firefox, Safari, Chrome, und Opera und .eot für den Internet Explorer. Außerdem bekommst du eine Beispiel HTML-Datei und den CSS-Code gleich mit dazu.

Fontsquirrel @font-face Generator

Ist deine Wunsch-Schrift noch nicht als fertiges Kit zu haben, kannst du den @font-face Generator von Fontsquirrel verwenden.

Hier lädst du einfach deine Schrift von deinem Computer hoch (vorher solltest du unbedingt die Lizenz durchlesen), und markierst die Formate, in die du deine Schrift konvertieren möchtest. Zusätzlich zu TrueType, OpenType und EOT gibt es noch SVG für iPhones und WOFF für Firefox ab Version 3.6.

Mit einem Häkchen bei »Subsettings« kannst du noch bestimmen, welche Sonderzeichen du benötigst.

Die generierten Schriften musst du jetzt lediglich auf deinen Server hochladen (ich sortiere sie immer in einen eigenen »fonts«-Ordner).
Jetzt fügst du den Beispiel CSS-Code aus dem Kit am Anfang deiner CSS-Datei ein (vergiss dabei nicht den Pfad anzupassen, falls du die Font-Formate in einen extra Ordner einsortiert hast).

Beispiel-Code für die Free-Font CalligraphyFLFRegular:

@font-face {
	font-family: 'CalligraphyFLFRegular';
	src: url('CalligraphyFLF.eot');
	src: local('CalligraphyFLF Regular'), local('CalligraphyFLF'), url('CalligraphyFLF.ttf') format('truetype');
}

Anschließend kannst du die Schrift ganz normal mit font-family einfügen. Du solltest aber immer eine websafe-font als Alternative auswählen.

h1.fontface {font-family: 'CalligraphyFLFRegular', Arial, sans-serif;}

Das war’s schon! So einfach kannst du deine Lieblingsschrift in dein neues Webdesign einbauen :-)

Hast du eine Frage zum Schriften-Einbetten mit @font-face, oder kennst du besonders schöne Free-Fonts, die man mit @font-face einbetten kann? Dann schreibe mir doch, ich freue mich auf deine Tipps!

Ähnliche Artikel zu diesem Thema

1. So findest du die passende Schrift für dein Logo
2. Kostenlose Icons, Fonts & Texturen – die 20 besten Ressourcen für Webdesigner
3. Die besten Webseiten und Blogs für Typografie-Liebhaber
4. 10 WordPress-Plugins für Typografie-Liebhaber
5. 15 praktische Typografie- und Font-Tools für Webdesigner

1. Goudy Bookletter 1911

2. Droid Serif

3. Museo Slab

4. League Gothic

5. Fontin

6. Mido

7. Steinem

8. Yanone Kaffeesatz

9. Walkway

10. Delicious

Wie gefallen dir die Fonts? Kennst du weitere tolle Schriften, die sehr gut im Webdesign eingesetzt werden können? Schreibe mir doch einfach einen Kommentar, ich freue mich schon auf deine Tipps!

Ähnliche Artikel zu diesem Thema

1. Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten
2. 16 praktische Cheat Sheets für Webdesigner
3. Kostenlose Icons, Fonts & Texturen – die 20 besten Ressourcen für Webdesigner
4. 10 WordPress-Plugins für Typografie-Liebhaber
5. 15 praktische Typografie- und Font-Tools für Webdesigner

1. Disgusting Behaviour

2. Ginga

3. Broken 15

4. Misproject

5 Nasty

6. Black Casper

7. Tiza

8. Hawaii Lover

9. Body Hunter

10. Beyond Wonderland

Ich hoffe dir gefällt diese kleine Auswahl. Kennst du weitere tolle Schriften? Dann schreibe mir doch einfach einen Kommentar. Ich freue mich schon auf deinen Tipps, und wünsche dir ganz viel Spaß beim kreativen Werkeln mit Grunge-Effekten!

Ähnliche Artikel zu diesem Thema

1. Kostenlose Grafik- und Bildbearbeitungs-Programme für Webdesigner
2. So findest du die passende Schrift für dein Logo
3. Kostenlose Icons, Fonts & Texturen – die 20 besten Ressourcen für Webdesigner
4. Die besten Webseiten und Blogs für Typografie-Liebhaber
5. 15 praktische Typografie- und Font-Tools für Webdesigner

1. Lemiesz

2. Deftone-Stylus

3. DayPosterBlack

4. Airstream

5. Chocolate Box

6. Noir-et-Blanc

7. Omnibus

8. Landsdowne

9. Pupcat

10. MinstrelPoster

Ich hoffe, dir gefällt diese Auswahl an Retro-Schriften. Wenn du noch weitere schöne Free-Fonts kennst, schreib doch einfach einen Kommentar. Ich freue mich auf deine Tipps!

Ähnliche Artikel zu diesem Thema

1. So findest du die passende Schrift für dein Logo
2. Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten
3. 16 praktische Cheat Sheets für Webdesigner
4. Kostenlose Icons, Fonts & Texturen – die 20 besten Ressourcen für Webdesigner
5. 10 praktische Online-Tools für Webdesigner

1. Museo

Museo von Jos Buivenga gibt es bei MyFonts in den Schnitten 300, 500 und 700 zum kostenlos download (du musst dich allerdings erst ein Account bei Myfonts einrichten).

2. ChunkFive

Manuels neuer Favorit :-) Die slab-serife ChunkFive funktioniert super für Überschriften, und erinnert an alte amerikanische Zeitungs-Headlines.

3. Marketing Script

Marekting Script ist eine sehr schöne Kalligrafie-Schrift, die dezent eingesetzt schöne Kontraste im Web-Layout bildet.

4. Parisian

Die Parisian von George Williams ist eine super Schrift für Logos, oder extravagante Überschriften.

5. Forque

Forque ist eine tolle Schrift für Headlines oder Logos im Industrial-Style.

6. Alexandria

Alexandria ist eine schlanke, slap-serifen Schrift von Casady & Greene. Du kannst dir verschiedene Schnitte der Schrift bei Fontsquirrel runterladen.

7. Quicksand

Quicksand ist eine sehr schöne, serifenlose Schrift von Andrew Paglinawan, mit besonders vielen Schnitten.

8. Brosse Demonstrator

Brosse Demontrator von Paul James Lloyd ist eine weitere serifen-betonte Schrift, und erinnert an amerikanische Werbeplakte der 1950er Jahre.

9. District Thin

Die District Thin ist eine elegante, serifenlose Schrift von GarageFonts.

10. Amerika

Die extravagante Amerika ist ein echter Hingucker, und eine spannende Mischung aus modernen und traditionellen Schriftelementen.

Und welches sind deine Lieblings-FreeFonts? Schreib uns doch einfach einen Kommentar, wir freuen uns schon auf deine Empfehlungen!

Ähnliche Artikel zu diesem Thema

1. Kostenlose Grafik- und Bildbearbeitungs-Programme für Webdesigner
2. So findest du die passende Schrift für dein Logo
3. Typo-Tipps für Webdesigner (Teil 2): Fließtexte gestalten
4. Typo-Tipps für Webdesigner (Teil 1): Styling der Überschriften
5. Kostenlose Icons, Fonts & Texturen – die 20 besten Ressourcen für Webdesigner

Beautiful Web Typography (#5) – eine Slideshow von Pascal Klein

Diese Slideshow bietet einen genialen Überblick über Web-Typografie und Typografie allgemein. Vielen Dank an Pascal Klein :-)

Verschiedene Methoden, um non-web-safe Fonts einzusetzen

• SIFR, eine Methode die den Schriftzug mit Hilfe von Flash und Javascript ersetzt.
• Cufon, ist einfacher zu nutzen als SFIR, und kommt ohne Flash aus.
• @font-face, eine reine CSS-Methode, die von immer mehr Browsern unterstützt wird. Bei Font Squirrel gibt es jede Menge kostenlose @font- face Fonts zum downloaden.
• Image Replacement, die »klassische« Methode, um non-web-safe Fonts in dein Webdesign zu integrieren. Chris Coyier von CSS-Tricks erklärt und testet in seinem Artikel »Nine Techniques for CSS Image Replacement « verschiedene Methoden.

Nick La von WebdesignerWall hat erst vor ein paar Tagen den tollen Artikel »The Next Serif Trend« über den Trend von Serifen-Schriften geschrieben, indem er u.a. auch über den Einsatz von non-web-safe Fonts schreibt, und interessante Beispiel-Webseiten zeigt.

Im Smashing Magazine Artikel »50 Useful Design Tools for beautiful Web Typography« findest du jede Menge Infos und Tools rund ums Thema Web-Typografie. Und natürlich werden hier auch die Methoden, non-web-safe Fonts in dein Design zu integrieren, besprochen.

Das sind meine Tipps, um sich über die neusten Trends in der Web-Typografie zu informieren. Kennst du weitere Webseiten und Infos zu diesem Thema? Dann schreib doch einfach einen Kommentar, ich bin schon sehr gespannt auf deine Tipps :-)

Ähnliche Artikel zu diesem Thema

1. Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten
2. Webdesign meets Soccer: 15 Webseiten zum Thema Fußball
3. Die besten Webseiten und Blogs für Typografie-Liebhaber
4. 10 WordPress-Plugins für Typografie-Liebhaber
5. 15 praktische Typografie- und Font-Tools für Webdesigner

1. Squared Eye

Einfach wunderschön, die Webseite von Matthew und Amy Smiths »Squared Eye«.

2. Able

Die Webseite von Able ist ebenfalls ein Projekt von Squared Eye. Die ausgestanzte Typo ist einfach faszinierend und wieder wunderschön :-).

3. Stack Overflow von Carsonified

Wenn es um Innovationen geht, darf Carsonified natürlich nicht fehlen. Hier mit der Event-Seite Stack Overflow.

4. Future of Web Design von Carsonified

Auch die FoWD-Events-Seite von Carsonified ist immer wieder ein echtes Highlight. Jedes mal denkt man, das ist nicht zu toppen, und sie tun es doch immer wieder ;-).

5. Jason Santa Maria

Jason Santa Maria hat u.a. die Webseite des Happy Cog Studios gestaltet. Wieder einmal, wunderschöne Typo!

6. Elliot Jay Stocks

Die neue Seite von Elliott Jay Stocks hat uns vor allem auf den zweiten Blick wahnsinnig fasziniert und inspiriert. Und die Suche ist einfach nur wow!

7. Tiffani Jones

Matt Brown von Things that are Brown hat diese wunderbar große und offene Webseite für seine Frau Tiffani gestaltet.

8. 24 Ways

Die Webseite 24 Ways ist ein Projekt von Tim van Damme, dem belgischen Designer des Studios Made by the Elephant.

Ich hoffe du fühlst durch meine kleine Sammlung wunderbar inspiriert, und bist bereit in ein entspanntes und kreatives Wochenende zu starten. Ich wünsche dir ganz viel Spaß dabei, und freue mich über dein Feedback!

Ähnliche Artikel zu diesem Thema

1. Webdesign Inspiration: 20 mobile Webseiten für iPhone, Android & Co
2. Webdesign Inspiration: 30 deutschsprachige WordPress-Webseiten und -Blogs
3. Webdesign Inspiration: 30 minimalistische WordPress-Blogs
4. Webdesign Inspiration: 40 kreative Kontaktformulare
5. 25 Logos inspired by Nature

1. Font Squirrel

Font Squirrel ist unsere Lieblingsseite für Free-Fonts. Hier findest du tolle, und vor allem hochwertige Fonts zum downloaden. Viele der Free-Fonts gibt es auch zum runterladen als @Font-Face Kit.

2. MyFonts

Bei MyFonts findest du ebenfalls jede Menge hochwertige Fonts zum runterladen. Einige der Fonts sind kostenpflichtig. Mit einem kostenlosen Account, gibt es aber auch über 400 Free-Fonts zum downloaden.

3. Dafont

Eine nicht ganz so hochwertige, aber dafür riesige Auswahl an kostenlosen Fonts findest du bei Dafont. Besonders gut gefällt mir, dass man die Schriften gleich mit dem eigenen Text, und praktischen Voreinstellungen durchsuchen kann.

4. WhatTheFont

Ein superpraktisches Tool von MyFonts ist WhatTheFont. Falls du wissen möchtest, welche Schrift z.B. bei einem Logo verwendet wurde, kannst du ein Image des Logos einreichen. Das Tool generiert dir eine Auswahl möglicher Fonts. Genial :-)

5. CSSTypeSet

CSSTypeSet ist ein kleines, hilfreiches Tool, um Websafe-Fonts (z.B. für deinen Fließtext) zu testen, und gleich den CSS Code zu bekommen. Oder anders herum: Um deinen CSS Code zu testen, und wenn nötig zu korrigieren.

6. TypeTester

Mit Typetester kannst du ebenfalls den Fließtext für dein Web-Layout testen, und mit anderen Schriften vergleichen. Auch den CSS Code gibt’s gleich wieder dazu.

7. FontTester

FontTester ist ein ähnliches Tool, wie Typetester. Zusätzlich gibt es aber noch ein paar Extra-Optionen, wie eine Character-Map und etliche CSS Optionen.

8. HTML-ipsum

Bei HTML-ipsum kannst du verschiedene Blindtexte, praktisch als HTML-Version vorbereitet kopieren, und in dein HTML einzusetzen.

Ich hoffe, du hast so viel Spaß wie wir mit diesen Font-Tools. Kennst du noch weitere Tools und Webseiten, zum Thema Web-Typografie?

Dann schreib doch einfach unten einen Kommentar. Ich freue mich schon, auf deine Tipps.

Ähnliche Artikel zu diesem Thema

1. Die besten Webseiten und Blogs für Typografie-Liebhaber
2. 15 praktische Typografie- und Font-Tools für Webdesigner
3. 10 praktische Online-Tools für Webdesigner
4. Kreative Free-Fonts im Handmade-Style
5. Jede Menge kostenlose e-Commerce Icon-Sets

UNIQLOCK

Ich muss gestehen, ich habe immer noch nicht hundert Prozent verstanden, worum es auf dieser Seite eigentlich geht (irgendwas mit Tanz, Weltuhr, und Musik). Vom Stil bin ich aber immer wieder schwer beeindruckt.

The Brooklyn Fare

The Brooklyn Fare, Webseite eines bekannten New Yorker Cafes/Restaurants. Besonders schön sind die Farben, und die große Typografie, natürlich.

FL2

FL2 ist eine Medien-Agentur aus Denver, mit einer wirklich beeindruckenden Webseite. Wunderbar anders!

Twitter Visualiser von Fl2

Der Twitter Visualiser »Oops I tweeted my pants« ist ebenfalls von FL2. Und wieder mit toller Typo!

Gummi Sig

Das Portfolio des isländischen Webdesigers Guðmundur Bjarni Sigurðsson, kurz Gummi Sig, kombiniert einen malerischen Aquarellstil mit schön, großer Typo. I like it :-)

Ryan Kaiser

Das Portfolio von Freelance-Webdesigner Ryan Kaiser ist bunt, groß und irgendwie erfrischend!

Carsonified

Die neue Seite von Carsonified ist nicht groß, sondern eher riesig. Mal wieder echt was ganz anders, und es gefällt mir richtig gut!

Finch

Finch ist das Portfolio des amerikanische Webdesigners Francisco Inchauste. Sein simples, klares Design tut nach dem ganzen Farbschock auch mal gut.

Kennst du noch weitere schöne Typodesign-Webseiten? Dann schreib uns doch unten einen Kommentar!

Ähnliche Artikel zu diesem Thema

1. Typo-Tipps für Webdesigner (Teil 2): Fließtexte gestalten
2. Typo-Tipps für Webdesigner (Teil 1): Styling der Überschriften
3. Webdesign Inspiration: 40 kreative Kontaktformulare
4. 12 wunderschöne jQuery-Plugins, die du auf keinen Fall verpassen solltest
5. 25 kreative Logos zum Thema Kaffee

Falls es dir ähnlich geht wie mir, hier eine Übersicht, die ein wenig Licht ins Dunkel bringen soll. Damit dir die Entscheidung für eine Schrifteinheit, bei deinem nächsten Projekt auf keinen Fall mehr Kopfzerbrechen bereitet.

Pixel (px)

Ein Pixel ist die kleinste Einheit einer Rastergrafik, bzw. deren Bildschirmdarstellung. Eine Schrift in 14px, ist also auf deinem Monitor 14 Pixel hoch, ganz egal welche Schriftart du verwendest.

Pixel ist also eine statische Einheit. Sie verändert sich nicht. Egal ob du dir die Schrift auf Windows oder Mac, oder in unterschiedlichen Browsern anschaust.

Pixel verändern sich auch nicht in verschachtelten (cascading) Parent-Child-Elementen. Wenn du also in einen Parent-Element mit 18px ein Child-Element mit 16px platzierst, bleibt das Child-Element 16px groß.

Willst du sicher gehen, dass dein Design, auch auf unterschiedlichen Systemen und Browsern, genau so aussieht, wie du es auf deinem eigenen Rechner angelegt hast, dann erreichst du das sicher am besten mit Pixeln.

em

Die Schrifteinheit em (aus dem Schriftsatz: equal to M) hat im Gegensatz zu Pixeln keinen festen Wert, da em immer relativ zur definierten Schriftgröße in Pixeln steht.
Wenn du also in deinem CSS Style Sheet die Textgröße mit 10px definierst, ist 1em=10px. Soll deine h1-Überschrift dann 30px groß sein, sind das 3em. Eigentlich gar nicht so schwierig, oder?

Wenn du allerdings nirgends in deinem CSS eine feste Textgröße definiert hat, orientiert sich em an der standardmäßigen Browser-Einstellung, die bei den meisten Browsern bei 16px liegt. 1Em wäre dann also dann =16px.

Du kannst dir bestimmt schon vorstellen, dass diese Rechnung auch komplizierter werden kann. Vor allem wenn du in deinem Style Sheet eine ganze Reihe unterschiedlicher Schriftgrößen verwendest.
Ein beliebter Trick ist deshalb, die Textgöße nicht auf einen festen Pixelwert zu setzen, sondern auf 62.5%. Denn wenn die Standard-Browsereinstellung 16px ist, macht das bei 62.5% =10px. So wird eine Schriftgröße von 21px zu 2.1em, was die Rechnung sehr viel einfacher macht.

Was sind die Vor- und Nachteile?

Ein großer Vorteil der Einheit em ist, dass em, im Gegensatz zu Pixeln, in Internet Explorer 6 oder noch älteren Browsern in der Größe veränderbar ist.

Ems sind außerdem auch auf Webseiten mit elastischen Layouts im Einsatz. Hier werden alle Elemente der Webseite in em definiert, so dass alle Elemente im Verhältnis zueinander stehen.
Das heißt: Wenn du deine Schriftgröße veränderst, passen sich alle Elemente auf deiner Seite an. Das macht ein elastisches Layout natürlich enorm flexibel.

Vorsichtig solltest du allerdings sein, wenn du em vor allem als Ersatz für Pixel verwenden willst. Ems stehen immer in Relation zu ihrem Parent-Element. Das bedeutet, sie verändern ihren Wert, sobald zwei Elemente ineinander verschachtelt sind (wenn du z.B. ein List-Element li in einem Paragraph-Element p setzt). Was zu einem ganz schönen durcheinander führen kann, wenn du viele Elemente ineinander verschachtelst.

Nützliche kleine Helfer

Beim praktischen Pixel zu Em-Umwandler bekommst du den CSS Code für deine Schriften auch gleich mit dazu.

Der Pixel zu Em Rechner ist ein kleines, aber hilfreiches Javascript-Tool.

Mit Typetester kannst du Schriften in verschiedenen Größen, Farben, und Fonts testen, und bekommst auch gleich den CSS Code für deine Auswahl generiert.

Noch mehr Lesestoff

»How to size Text in CSS« ein Artikel von Richard Rutter von A List Apart.com.

Einen tolle Übersicht über Pixel, Em, Prozent und Punkt gibt Chris Colier von CSS-Tricks in seinem Artikel »px-em-%-keyword«.

Ähnliche Artikel zu diesem Thema

1. Praktische Widgets, um Twitter, Facebook, Zootool & Co auf deinem Blog zu promoten
2. Mach dich fit für CSS3 mit diesen praktischen CSS3 Online-Tools
3. Typo-Tipps für Webdesigner (Teil 3): Texte spannender gestalten
4. Typo-Tipps für Webdesigner (Teil 2): Fließtexte gestalten
5. Typo-Tipps für Webdesigner (Teil 1): Styling der Überschriften