2 2 3 21 0 0 0

Textformatierung

... bietet reichlich Stoff zur Gestaltung und Diskussion. Wie aus Layoutprogrammen mögliche Schriftgestaltungen lange bekannt sind, ziehen auch CSS-Spezifikationen nach. Interressante Textgestaltungen findet man nur in Ausnahmefällen. Arial beherrscht den Schrifttyp, bold und italic kommen hin und wieder zum Einsatz. Das wars! Naja, zwei oder drei Schriftgrößen zusätzlich zum Absatzformat durch vorformatierte Überschriften sind noch gebräuchlich. Eigentlich beherrscht eine gestalterische große lange Weile das Web. Das lösen auch viele Bilder nicht auf. Und ganz schlimm wird es, wenn die jenigen Text in ein jpg-Bildchen packen, weil sie es nicht besser wissen.

Mögliche Ursachen will ich aber innerhalb dieses Themas nicht hinterfragen.

Neben bold für wichtig und italic für Zitate ist mit dem Zeichenabstand auch noch was drinn, Unterstreichnungen an Textstellen, so sie nicht Verweise markieren, sind bloß irreführend.

Kapitälchen

... in Überschriften kann ich mir gut vorstellen. font-variant: small-caps;
Damit ist bereits eine handhabbare und ersteinmal ausreichende Palette an Werkzeugen vorhanden, die ... ja, das kann man so sagen, nur minimalistisch Anwendung findet. Es grenzt daher schon an Überbau, Texteinzüge folgend zu erwähnen.

Texteinzug

Das ist auch irgendwie aus dem Schriftsatz gefallen. Im Printbereich noch bei Tageszeitungen anzutreffen, hat es bei WebDesignern kaum Wertschätzung erhalten. Das mag wohl auch daran liegen, dass kaum jemand aus dem Textsatz oder Layout in die Webgestaltung/Programmierung wechselte. Vielleicht wird es auch nur als „out“ betrachtet. Hin wie her gehört es zum klassischen Textsatz. Mit text-indent: (-)wertpx; wird der Einzug der ersten Zeile eines Absatzes formatiert und erhält erst mit einer Abfolge von Absätzen seinen typischen Charakter.

Mal ehrlich: so schlecht kommt die Optik nicht daher. Es belebt!
Es entspricht kaum noch den Sehgewohnheiten, ja wenn es Mainstream wäre, ja denn ... !

Textschatten

Der Aufwand zwei einzeilige Absätze gleichen Inhaltes absolut zu positionieren und unterschiedliche index-Ebenen einzurichten mit einem Versatz war vertretbar. Allein die Lösung fand ich nie professionell. Für Schriften ab 18px somit für Überschriften oder einzeilige Absätze ist es ein gutes Gestaltungsmittel und nun kommt auch wirklich Schatten ins Spiel


//{ text-shadow: x-Versatz y-Versatz Weichnzeichner Farbe }
.shadow { text-shadow: 2px 2px 2px #000; }
//<span style="color: #cde; font-size: 18px;" class="shadow">Ich habe mir einen Schatten mitgebracht.<span>

Ich habe mir einen Schatten mitgebracht.

... und die Lösung ist viel eleganter.

Textkontur

Bereits im header-Element für <h1>angewendet.


.outline{ text-shadow: 0 -1px #fff, 1px 0 #000, 0 1px #000, -1px 0 #fff;}

Eine eigene Eigenschaft ist vorgesehen: text-outline: thickness blur color;,die aber bisher von keinem Browser unterstützt wird. Und ob sie Standart im CSS wird? Und wenn ich mich schon wieder wiederholen muss: Ein Werkzeug reicht doch völlig aus!

Webschriften mittels @font-face

Ich habe mich auf das Schriftformat: .woff (web-open-font-format) eingeschossen. Im <h1> des <header>s verwende ich eine Schrift, die keiner auf seinem Rechner haben kann. Die ist von mir nachempfunden. Gern als Schriften- und Plakatmaler in den 70ger und 80ger Jahren benutzt und ohne mich heute daran erinnern zu können, wie sie heißt und ob sie im Detail so aussah, habe ich am Rechner versucht, diese zu rekonstruieren und eine woff-Schrift daraus generiert. Dafür gibt es Programme.
Es ist ja richtig, kein Wusel an Schriften unterzubringen. Für etwas mehr Belebung bin ich aber schon.


// die src: local('...') Angabe ist für die eingesetzte Schrift zwar Unsinn - die kann keiner haben ...
// und ich gehe davon aus, dass es keine gleichen Namens gibt.
// Richtig wäre die src: local-Angabe, wäre die Schrift verbreitet 
und die Schrift auf dem Rechner des Clients anzunehmen sei.
// Ich belasse es bei der vollständigen Benennung. @font-face { font-family: 'Roehl'; src: local('Roehl-Regular'), url(relativer Pfad/woff/Roehl-Regular.woff) format('woff');} //auch als Klasse zur Verfügung stellen .roehl { font-family: Roehl; }



Dokument geändert am: 07. Mär. 2023 14:04