Kapitälchen ästhetisch in HTML simulieren

Bei esse est percipi gibt es prak­ti­sche HTML-Tipps rund um die Kapitälchen. Wir lernen, warum auto­ma­ti­sche Small Caps zu vermeiden sind und wie man(n) mit einem (Handarbeit-)Trick trotzdem zum Ziel kommt. Schön geschrieben. Danke.


6 Kommentare

  1. nicetype

    Mache ich auch immer so, und bei Blogger sind 85% einge­stellt für eine Größe kleiner, das geht auch wunderbar :)

  2. Ano Nym

    Unfug! Entweder akzep­tiert man, dass dem Ausgabegerät beim Nutzer über­lassen wird, wie die wahren Kapitälchen
    auszu­sehen haben, oder man verzichtet auf die typo­gra­fi­sche Spielerei.

    Davon, dass der Schuss des Ästheten nach hinten losgeht, über­zeuge man sich bitte auf folgendem Screenshot:

    http://​de​.tinypic​.com/​v​i​e​w​.​p​h​p​?​p​i​c​=​m​c​b​v​a​a​&​s=3

  3. Sebastian Nagel

    Die Theorie hatte ich ja mal auch, dass man, dank geringer Auflösung und Hinting, falsche Kapitälchen am Bildschirm aussehen lassen kann wie echte Kapitälchen, da die Strichstärke der meisten Schriften in Lesetext-Größe nur einen Pixel beträgt ein Runterskalieren um sagen wir 15% sich also in der Strichstärke effektiv nicht auswirkt. Mit cachie­renden Maßnahmen wir Laufweitenerhöhung sähe das ganz gut aus.

    Praxis: Je nach Browser, System und Schriftversion und Darstellungsgröße kommt da alles mögliche zwischen wunder­schön bis grausig raus.

  4. Karsten

    Ich füg doch kein extra Quelltext ins HTML-Dokument ein, um das Aussehen einzelner Wörter zu bestimmen. Das ist ganz ganz schlechter Stil. In anderen Worten: Geht gar nicht.

    So etwas gehört ins CSS-File. Getrennt vom Inhalt.

    Wenn ich etwas in einem Text hervor­heben will, dann markiere ich das mit dem Strong-Tag. Alles mehr wäre Unfug. „Strong“ bedeutet in der Standardeinstellung der Browser, dass erst einmal der fette Schnitt gewählt wird. Eigentlich aber liegt es in der Hand des WebDesigners.

    Man könnte darüber nach­denken, dass man diese Idee per JavaScript umsetzt. Also im Nachhinen den Code inner­halb des Strong-Tags mani­pu­liert. Dann bekommen die meisten Benutzer es korrekt zu sehen, aber der logi­sche Zusammenhang wird nicht ausein­ander gerissen.

Kommentarfunktion ist deaktiviert.

<em>kursiv</em>   <strong>fett</strong>   <blockquote>Zitat</blockquote>
<a href="http://www…">Link</a>   <img src="http://bildadresse.jpg">