Typografie

Gelungene Typografie war im Internet lange Zeit kaum zu realisieren. Dank moderner Technologien wie Webfonts können mittlerweile allerdings nahezu alle Schriften auch im Web genutzt werden. Das Rendering der Schriften unter Windows und das Lizenzmodell des Fonts sollten allerdings beachtet werden. Darüber hinausgehende Gestaltungsmöglichkeiten wie Kerning, Ligaturen, Text-Transformationen usw. sind mit JavaScript oder CSS3 möglich.

Web-Typografie: Perfekte Zeilenlängen im Responsive Design

responsive-typo

Das Layout einer Website hat u.a. die Aufgabe, Informationen bestmöglich zugänglich zu machen. Insbesondere die Web-Typografie spielt dabei eine wichtige Rolle. Damit ein Text gut lesbar ist, sollten die Zeilen eine optimale Länge haben. Im Responsive Design muss dazu meist die Schriftgröße über die verschiedenen Displaygrößen hinweg verändert werden, damit die Zeilen auf allen Geräten im optimalen Bereich liegen. Auf Smartphones ist Text daher i.d.R. kleiner als auf großen Monitoren.

Beitrag zu Ende lesen

CSS Regions mit Adobe Edge Reflow

css-regions-reflow-grafik

CSS Regions sind eine CSS-Technologie mit deren Hilfe Inhalte durch verschiedene Container geleitet werden können. Sollte euch das Konzept hinter CSS Regions unbekannt sein, lest bitte zunächst meine Einführung in dieses Thema. In Adobe Edge Reflow – einem Design-Tool für Responsive Web Design – sind CSS Regions nun ebenfalls verfügbar. Die Einführung in Edge Reflow findet ihr wiederum hier.

In diesem Beitrag erkläre ich wie CSS Regions in Edge Reflow aktiviert und eingesetzt werden können.

Beitrag zu Ende lesen

Text mit Verlauf überlagern in CSS

text-gradient-css3

In Photoshop lässt sich ein Text unkompliziert mit Hilfe einer Verlaufsüberlagerung optisch aufwerten. Doch wie sieht es in CSS aus? Verläufe lassen sich grundsätzlich in CSS3 herstellen, nur auf Texten funktioniert es leider nicht so einfach. Hier kann kein Verlauf als Farbe angegeben werden, es sind daher nur einfarbige Texte möglich. Mit folgendem Trick könnt ihr zumindest in Webkit-Browsern (Chrome, Safari, Safari mobile, Android Browser) einen Verlauf als Textfarbe festlegen. In inkompatiblen Browsern wird der Text einfarbig dargestellt.

Beitrag zu Ende lesen

Absatzformate und Zeichenformate in Photoshop nutzen und exportieren

absatzformate-zeichenformate-cs6

Aufgrund vieler Nachfragen habe ich ein Video zum Thema Absatz- und Zeichenformate von PS CS6 erstellt. In diesem Screencast zeige ich euch wie ihr die Formate einsetzen könnt, und wie ihr häufige Probleme im Umgang mit diesen Werkzeugen vermeidet. Da insbesondere die Export-Funktion häufig angefragt wurde, gehe in diesem Zusammenhang auch auf den Export/Import von Absatzformaten ein. Ich hoffe das Video hilft euch weiter, dieses wirklich hilfreiche Werkzeug endlich auch produktiv zu nutzen

Beitrag zu Ende lesen

Sollte text-indent: -9999px; ersetzt werden?

text-verstecken-css-intend

Ich behaupte einfach mal, dass wohl jeder Webdesigner schon Text mit der CSS-Eigenschaft text-indent: -9999px; versteckt hat. Die aus heutiger Sicht schon fast antike Technik entstammt noch Zeiten, in denen wir ausgefallene Schriftarten mit Hilfe von Grafiken einbetten mussten. Da es Webfonts noch nicht gab, wurden Schmuckschriften in Bildern gespeichert. Anschließend wurde einem Element die Grafik als Hintergrundbild zugewiesen; der für die Suchmaschinen enthaltene „echte“ Text wurde versteckt. Mit Hilfe von text-indent: -9999px; wurde er um 9999 Pixel aus dem sichtbaren Bereich heraus verschoben.

Beitrag zu Ende lesen

Kerning für Webfonts – Type Butter jQuery-Plugin

Type Butter

Vor einiger Zeit habe ich bereits einen Artikel über Kerning und Ligaturen im Browser geschrieben - heute möchte ich das Thema noch einmal aufgreifen. Type Butter ist ein neues jQuery-Plugin, mit dem ihr das Kerning der Schriftarten eurer Website verbessern könnt.
Im Moment liegen große Überschriften ja voll im Trend. Doch gerade bei großen Schriftgrößen entstehen häufig unschöne Abstände zwischen den Buchstaben. Mit Type Butter könnten sie der Vergangenheit angehören.

Beitrag zu Ende lesen

Style Tiles – Design-Konzepte für responsive Websites entwickeln

logo-style-tiles

Wenn man gemeinsam mit einem neuen Kunden ein Webdesign-Projekt plant, möchte man einerseits ein ansprechendes und zuverlässiges visuelles Konzept ausarbeiten, andererseits aber wenig Zeit mit Entwürfen vergeuden, die dem Kunden nicht gefallen. An dieser Stelle setzen die sog. »Style Tiles« von Samantha Warren an und füllen die Lücke zwischen schnellen aber ungenauen, und detaillierten aber zeitintensiven Techniken. Style Tiles sind sozusagen ein Mockup für die Gestaltung.

Beitrag zu Ende lesen