RSS
 

Posts Tagged ‘Typografie’

Schönere Unterstreichungen

11 Mrz

Regelmäßig stören mich Die recht hässlichen und Typografisch gar nicht tollen Unterstreichungen die normalerweise im Web zu finden sind.  Konkret stört  mich daran, dass die Unterlängen der Zeichen durchgestrichen sind und das Ganze dadurch sehr gedrängt wirkt. Aus diesem Grund bin ich dazu über gegangen das eigentlich dafür vorgesehene und übliche CSS Tag text-decoration:underline; zu boykottieren. Viel schöner finde ich das Unterstreichungen über den Befehl border-bottom zu realisieren.

Aus Typografischer Sicht ist das zwar immer noch nicht die optimale Lösung, da sich die Unterlängen und die Unterstreichung nicht treffen. Daher könnte man den Rahmen noch ein Pixel weiter nach unten setzen. Je nach verwendeter Schriftart, Schriftgröße und Zeilenabstand kann das aber zu viel Platz verschlingen. Daher verwende ich auf dieser Siete keinen Abstand.

Die 3 Varianten im Vergleich:

?View Code HTML
text-decoration:underline;
border-bottom: 1px solid;
border-bottom: 1px solid; padding-bottom:1px;

Typografie

… nicht so schön

Typografie

… in dieser Darstellung perfekt, bei kleineren Schriftgrößen berühren sich aber auch hier Unterlängen und Unterstreichung.

Typografie

… für kleine Schriftgröen meißt die Beste Wahl

Das ist diesesmal zwar nur ein kleiner aber dafür aus meiner Sicht kleiner Hinweis und damit starte ich gleich den Aufruf für “schönere Unterstreichungen”. Abgesehen davon gibt es allerdings noch viele weitere Typografische Sünden im Web, dazu aber ein anderes mal.

 
No Comments

Posted in Grafik & Design

 

Typografie: Schrifteinbettung auf Websites

17 Feb

Nachdem das leidige Thema der begrenzten Schriftauswahl auf Websites konnte zwar immer noch nicht gänzliche gelöst werden, aber immerhin scheint es jetzt etwas Licht am Ende des Tunnel zu geben. Nachdem Safari 3.1 als erster Browser einem Methode zur Schrifteinbindung auf Websites unterstützt hat wird jetzt Firefox ab Version 3.1 nachziehen. Grund genug die aktuellen und zukünftigen Möglichkeiten der Schrifteinbindung näher zu beleuchten.

Aktuell wurden “Nicht-Standard-Schriften” meist als Bilder (via z.B. PHP generiert) oder als Flashdateien eingebunden. Diese Workarounds funktionieren zwar, sind aber weder für Suchmaschinen noch aus Performancesicht optimal. Um dem entgegenzuwirken gibt es in der CSS 3 Definition den netten Style “@font-face”. Über diesen Befehl ist es möglich Schriftarten direkt auf die Website einzubinden.

Dazu müssen zuerst die Schriften bzw. die gewünschten Schriftschnitte definiert werden. Anschließend können die definierten Schriftschnitte wie gewohnt im Stylesheet verwendet werden.
Das Ganze könnte dann etwa so aussehen:

?View Code HTML
@font-face{
font-family:'Fontin-Regular';
src: url('Fontin-Regular.otf') format('opentype');
}
 
h1 {
font-family:'Fontin-Regular', Georgia, serif;
}

Grundsätzlich werden TrueType-, OpenType PS- und OpenType TT Fonts unterstützt. Allerdings muss neben der noch relativ geringen Browserunterstützung (IE hinkt wiedermal hinterher) auch die Lizenzrechtliche Seite beachtet werden. Es dürfen nämlich bei weiten nicht alle Schriftarten auf dem Webserver abgelegt werden. Daher empfiehlt es sich die Nutzungsrechte für die Schrift die verwendet werden soll genau zu hinterfragen. Daher bieten sich aktuell vorallem Fonts die über die Open-Font Lizenz vertrieben werden an.

Fazit:
Nachdem das ganze Thema zeitweise wenig Beachtung erhalten hatte, scheint wieder etwas Bewegung in das Thema gekommen zu sein. Mit dem Erscheinen von Firefox 3.1 wird Firefox die Nase knapp vor Safari haben, da Firefox im Gegensatz auch Ligaturen unterstützen wird. Auch wenn bei diesen 2 Browsern auch noch einige Details verbesserungswürdig sind, so ist die Unterstützung von @font-face doch ein gutes Zeichen. Ganz nebenbei werden auch andere Browserhersteller unter Druck gesetzt und Früher oder Später wird es hoffentlich auch ein Unterstützung im Internet Explorer geben.

Weiterführende Links:
W3C Definition
Vergleich Safari / Firefox
Typografie.info – Fonteinbettung in Webseiten

 
No Comments

Posted in Grafik & Design

 

Typografisch korrekte Anführungszeichen

09 Jan

Nach dem es in letzter Zeit häufig um Analytics und Marketing gegangen ist, wird es höchste Zeit wieder mal einen Artikel zum Thema Typografie zu verfassen.

Die Verwendung von falschen Anführungszeichen zählt wohl zu den häufigsten Typografiefehlern. Je nach Sprache des gesetzten Textes sollten die korrekten Varianten verwendet werden. Im Internet werden jedoch sehr oft fälschlicher Weise Zollzeichen (“) als Anführungszeichen verwendet. Das ist nicht korrekt, anstelle dessen sollten folgende Varianten verwendet werden. Unbestätigten Gerüchten nach sollen sich solche falschen Anführungszeichen auch in diesem Blog hier tummeln ;o) – Aber nichts desto trotz will ich darauf hinweisen wie es korrekter Weise sein sollte.

Deutsche Anführungszeichen
In deutschen Texten ähneln die Anführungszeichen den Zahlen 99 und 66. Am Beginn wird ein Anführungszeichen unten „ und am Ende ein Anführungszeichen “ oben gesetzt. Als Alternative Variante bzw. falls Anführungszeichen innerhalb von bestehenden Anführungszeichen verwendet werden stehen die einfachen Varianten dieser und der nachfolgenden Anführungszeichen zur Verfügung ( ‚ ‘ ).

Nachdem diese Zeichen auf der Tastatur nicht zur Verfügung stehen können die entsprechenden Zeichen via Tastenkombinationen erzeugt werden.

Anführungszeichen am Beginn:
- Windows: ALT + 0132
- Mac OS: Wahltaste + ˆ

Ausführungszeichen am Ende:
- Windows: ALT + 0147
- Mac OS: Wahltaste + 2

Auf Websites wird zur korrekten Darstellung folgender Code benötigt:
„Text“ 

Diese Variante der Anführungszeichen wird auch in anderen Sprachen wie z.B. Isländisch, Bulgarisch, Rumänisch, Slowakisch, Slowenisch, etc. verwendet.

 

Alternative deutsche Anführungszeichen
Als Alternative wird in deutschen Texten des Öfteren folgende Variante verwendet. » «
Diese Variante wird gerne verwendet, da sich dies Zeichen sehr schön in den Text integrieren und dadurch der Textfluss nicht durch Weißräume unterbrochen wird.

Über folgende Tastenkombinationen können diese Zeichen erzeugt werden:

Anführungszeichen am Beginn:
- Windows: ALT + 0187
- Mac OS: Umschalt + Wahltaste + Q

Ausführungszeichen am Ende:
- Windows: ALT + 0171
- Mac OS: Wahltaste + Q

Auf Websites wird zur korrekten Darstellung folgender Code benötigt:
„Text“ 

Englische Anführungszeichen
In englischsprachigen Texten werden andere Anführungszeichen verwendet. Hier lautet der Merksatz 66 – 99, allerdings werden beide Zeichen oben dargestellt. Am Beginn erhält man so dieses Zeichen “ und am Ende Folgendes ”. Die entsprechenden Tastenkombinationen lauten:

Anführungszeichen am Beginn:
- Windows: ALT + 0147
- Mac OS: Wahltaste + 2

Ausführungszeichen am Ende:
- Windows: ALT + 0148
- Mac OS: Wahltaste + Shift + 2

Auf Websites wird zur korrekten Darstellung folgender Code benötigt.
“Text” 

 

Französische Anführungszeichen (Guillemets)
Guillemets werden die französischen Anführungszeichen genannt. Im Gegensatz zur deutschen Alternativvariante zeigen die Spitzen inder Französischen Variante vom Text weg. Dadurch erhält man folgende Zeichen: « »

Die entsprechenden Tastenkombinationen lauten:

Anführungszeichen am Beginn:
- Windows: ALT + 0171
- Mac OS: Wahltaste + Q

Ausführungszeichen am Ende:
- Windows: ALT + 0187
- Mac OS: Umschalt + Wahltaste + Q

Auf Websites wird zur korrekten Darstellung folgender Code benötigt:
«Text» 

Diese Variante der Anführungszeichen wird auch in anderen Sprachen wie z.B. Griechisch, Portugiesisch, Arabisch, etc. verwendet.

 
No Comments

Posted in Grafik & Design