1.8 HyperTypographie

Links

Verlinkungen stellen das Grundprinzip des Hypertexts und des Internets dar, durch sie entsteht das ›Net‹.

Das Ziel des Links wird über das Attribut href angegeben. Das Ziel kann ein HTML-Dokument (Website) im WWW sein oder aber auch ein HTML-Dokument, das zur gleichen Website gehört und auf dem gleichen Server liegt. Dies ist beispielsweise bei Navigationen der Fall.
Daneben empfielt es sich über das Attribut target zu definieren, wo der Link geöffnet werden soll. Externe Links werden meist in einem neuen Browser-Tab (target="_blank") geöffnet, während ›interne‹ Links einer Websites im gleichen Fenster (target="_self") geöffnet werden.


<a href="http://www.ortweinschule.at" target="_blank">Ortweinschule</a>  

Wie in InDesign Absatz- und Zeichenformate angelegt werden, so werden in CSS die Eigenschaften für Typografie in ihren einzelnen Parametern festgelegt.
Und wieder wird die Struktur, also der Text selbst und seine Untergliederung in Überschriften uns Absätze, in HTML erstellt und seine typografische Gestaltung in CSS festgelegt.

Aufgabe
Erstelle die folgenden Verlinkungen in nachfolgendem Code-Pen:

Wort 1Link 1
Wort 2Link 2
Wort 3Link 3

Text in HTML strukturieren

In HTML werden für die Verschiedenen strukturellen Teile von Texten unterschiedliche Tags verwendet:

Absätze

Ein Textabsatz wird mit dem p-Tag (›Paragraph‹) ausgezeichnet. Per Voreinstellung fügen Browser zwischen zwei aufeinanderfolgenden Absätzen einen Abstand ein (dies lässt sich bspw. mit margin: 0px;beheben). Am Ende jedes Absatzes erfolgt ein ›harter‹ Zeilenumbruch. FÜr einen ›geschützen‹ Zeilenumbruch verwendet man im Text den Tag <br>

See the Pen Typography Paragraph by Andreas (@ernasad) on CodePen.

Zeichen

Der Verwendung des span-Tags lässt sich mit den Zeichenformaten in InDesign vergleichen. Er wird verwendet um einzelne Worte oder Buchstaben zu stylen.

See the Pen Typography Span by Andreas (@ernasad) on CodePen.

Überschriften

Suchmaschinen verwenden Überschriften, um den Inhalt von Websites strukturiert zu erfassen. h-Tags dürfen auch aus diesem Grund nur für Überschriften verwendet werden, nicht um Textteile fett oder größer zu machen.Browser setzen um Überschriften automatisch Weißraum in Form eines margin. Möchte man das nicht, so muss man per CSS den margin verändern.

See the Pen Typography – Headers by Andreas (@ernasad) on CodePen.

Zitate

Zitate im Hypertext können durch den Tag blockquote ausgezeichnet werden.

Aufgabe
Strukturiere den Folgenden Text durch die gerade kennengelernten HTML-Tags

Typografische Gestaltung in CSS

CSS_Properties in Illustrator

www.spiegel.de (SpiegelOnline) vom 01. November 2011.Typografische Gestaltung rein durch websafe-Fonts.

Websafe Fonts

Schriften wurden nicht mit der Website übertragen. Daher konnten nur Systemfonts, die auf den Rechnern der SurferInnen installiert sind, für das Layout verwendet werden. Typische Schriften für Screendesign waren: Verdana, Tahoma, Georgia, Times, Arial, Helvetica. Diese Schriften waren sowohl auf Microsoft- als auch auf Apple-Betriebssystemen teil der Installation, daher konnte davon ausgegangen werden, dass sie auf den allermeisten Systemen vorhanden sind.

Eine Liste von Schriften, die ›Websafe‹, also auf allen Betriebssystemen vorhanden, sind, findet sich hier: Websafe Fonts

Schriftart wählen

Zur Sicherheit wurden jedoch stets mehrere Schriften (sog. Fallback-Schriften) angegeben. Das sollte man heute auch noch tun, falls ein alter Browser keine Webfonts unterstützt oder der Webfont nicht geladen werden kann (was Webfonts genau sind wird später noch erklärt). Dass die CSS-Anweisung font-FAMILY heisst erinnert an diese notwendige Mehrfachdefinition von Schrift.Konsequenz dieser Umstände war, dass Typographie im Web viel weniger eindeutig zu gestalten war als heute.

See the Pen Typography - font-family by Andreas (@ernasad) on CodePen.

Typographische Eigenschaften

Zur Gestaltung von Schrift stehen einige CSS-Anweisungen zur Verfügung. Einige sind durch den überarbeiteten CSS3-Standard zum ursprünglichen Repertoire hinzugekomenn, werden jedoch mittlerweile durch fast allen gängige Browserversionen unterstützt.

  • Ein geschickter Einsatz dieser Anweisungen erlaubt eine differenzierte typografische Gestaltung, die einer Gestaltung für den Print-Bereich nicht nachstehen muss.
  • Wie auch bei der Wahl der Schriftart muss jedoch auch hier wieder bedacht werden, dass das Endgerät, auf dem Surfer die Website abrufen, nicht einheitliche Eigenschaften hat. Die Größe und Auslösung des Display beeinflussen beispielsweise die Spaltenbreite und die Größendarstellung der Schrift. Dies wiederum macht dann weitere typographische Anpassungen nötig…
  • Darum werden Websites in der Praxis meist ›responsive‹ angelegt, sodass sie sich in ihrem CSS-Styling und damit in ihrem Aussehen dem Endgerät (Handy, Tablet, Laptop, Desktop) anpassen.

Anweisungen, die sich auf die Schrift beziehen

CSS-Anweisung Parameter Funktion
font-size in Pixel, Punkt, EM Größe der Schrift
font-weight 100 - 900 Schweregrad der Schrift
font-style italic, oblique Kursiv
font-variant Kapitälchen
letter-spacing in Pixel (Nachkommastellen) Laufweite
word-spacing in Pixel Wortabstand
text-decoration none, underline, … Unterstreichung etc.
text-shadow Abstand in PX, blur Schatten

Anweisungen, die sich auf Text-Absätze beziehen:

CSS-Anweisung Parameter Funktion
text-align center, left, right, … Ausrichtung
text-align-last Letzte Zeile bei Blocksatz
text-indent
word-wrap Worttrennung

Initialen

See the Pen Typo Initialen by Andreas (@ernasad) on CodePen.

Aufgabe
Baue den folgenden Screenshot/Scan eines Print-Layouts typographisch in HTML/CSS nach.