kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Typografie


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

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

Webfonts mit einem Webfont-Generator erstellen

Wer keine Systemschriften verwenden oder auf Webfont-Anbieter zurückgreifen möchte, kann selbst aus einer vorliegenden Desktop-Schrift einen Webfont erzeugen. In diesem Fall kann die Schrift sehr individuell für die Website ausgewählt werden. Allerdings solltet ihr in Bezug auf das Lizenzmodell der Ausgangsschrift einiges beachteten. Wie ihr mithilfe eines Webfont-Generators eine Schrift in das passende Dateiformat umwandelt, beschreiben wir in diesem Artikel. Beitrag zu Ende lesen

Webfonts – eine Einführung in moderne Web Typografie

Wem Webdesign im Sinne von guter Gestaltung am Herzen liegt, der verzweifelte lange Zeit am eingeschränkten Schriftangebot. Eine ausgefallene Schriftart musste bisher meist in eine Grafik eingebettet werden. Das hat den Nachteil, dass Suchmaschinen den Text nicht lesen können. Mit der Entwicklung von Webfonts besteht die Möglichkeit, Schriften mittels CSS einzubinden, die nicht auf dem Computer des Anwenders installiert sein müssen. Die Auswahl an Schriften in der Webtypografie ist dadurch ähnlich umfangreich wie im Printdesign.

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

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

Spiegelungen im Webdesign – Die Grundlagen als Screencast

Die Photoshop-Profis haben ein Video zum Thema "Spiegelungen" von mir veröffentlicht. In Folge 93 des Podcasts beschreibe ich die Grundlagen der Spiegelung von zweidimensionalen und dreidimensionalen Objekten, und gehe auf häufige Fehlerquellen ein. Am Beispiel des Wet-Floor-Effektes werden darüber hinaus die typischen handwerklichen Techniken beschrieben.

Das Thema Spiegeleffekte habe ich in der Vergangenheit bereits in meinem Artikel "10 Tipps zu Spiegelungen im Webdesign" behandelt. Einen fortgeschrittenen Screencast zum Thema Wasserspiegelung findet ihr hier.

Beitrag zu Ende lesen

Silbentrennung im Browser mit CSS, HTML oder JavaScript

Wer im Internet typografisch ansprechende Texte gestalten möchte, hatte es lange Zeit nicht leicht. Mit dem Einzug der Webfonts stehen Webdesignern mittlerweile viele gelungene Schriftarten zur Verfügung und es gibt sogar Möglichkeiten Ligaturen und Kerning im Browser zu aktivieren. Was häufig Probleme bereitet, ist die klassische Silbentrennung, die lange Zeit ebenfalls nur über externe Scripte und Workarounds umständlich zu realisieren war. In diesem Beitrag fassen wir zusammen, welche Möglichkeiten es gibt Silbentrennung im Browser zu verwenden.

Beitrag zu Ende lesen