Schriftgestaltung mit HTML & CSS

Willkommen zum nächsten Artikel der Reihe {Coding Love}! 🙂

Die Grundlagen von HTML & CSS hast du ja bereits in Teil 1 und Teil 2 kennengelernt.
Heute wird es konkreter – du erfährst, wie du Texte mit verschiedenen HTML-Tags für Überschriften, Absätze, Aufzählungen und so weiter versiehst und wie du anschließend mit CSS die Schriftgröße und Schriftart, die Farbe, den Zeilenabstand und weitere tolle Dinge einstellst. 🙂

HTML-Tags für deine Texte

Wenn du dir so einen Blogartikel anschaust, besteht der ja aus vielen verschiedenen Arten von Text: es gibt die Überschrift, Angaben zum Datum und der Kategorie, den Artikelinhalt selber mit vielen Absätzen und vielleicht auch mit der ein oder anderen Auflistungund so weiter.

HTML gibt dir eine ganze Reihe von Tags an die Hand, mit denen du diese ganzen Inhalte auszeichnest – und zwar nicht nur, damit sie rein optisch unterschiedlich aussehen, sondern auch semantisch korrekt. Das heißt: ein h1-Tag, das eine Überschrift kennzeichnet, stellt diese nicht nur groß und fett dar. Es sagt nämlich auch etwas über die Bedeutung aus: „Yo, ich bin eine Überschrift!“

Vermutlich nutzt du zum Tippen deiner Blogartikel einen visuellen Editor, wo du den Text – ähnlich wie in Word – über verschiedene Buttons formatieren kannst, ohne jedesmal direktes HTML schreiben zu müssen. Die wichtigsten HTML-Tags solltest du trotzdem kennen. 🙂

Überschriften

Fangen wir denn doch mal tatsächlich am Anfang eines typischen Artikels an – mit der Überschrift. Für Überschriften stehen dir die Tags h1, h2, h3, h4, h5 und h6 zur Verfügung – h1 ist die wichtigste Überschrift, die anderen nutzt du für Zwischentitel. In der Praxis hast du meistens eine h1 für die Artikelüberschrift, einige h2s und vielleicht noch ein paar h3s pro Beitrag.

<h1>Haustiere</h1>
...
<h2>Hunde</h2>
...
<h3>Labrador</h3>
...
<h3>Pudel</h3>
...
<h2>Katzen</h2>
...
<h3>Siam</h3>
...
<h3>Hauskatze</h3>

Fließtext: Absätze und Zeilenumbrüche

Der größte Teil deines Blogartikels besteht vermutlich aus Fließtext – sprich, aus Absätzen, die Zeilenumbrüche beinhalten können.

Absätze umschließt du mit p-Tags. Zeilenumbrüche – bei denen also kein Leerraum zwischen den Zeilen entsteht – setzt du durch ein einzelnes br-Element:

<p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext.</p>
<p>Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen.<br>
Denn esse est percipi - Sein ist wahrgenommen werden.</p>

Auflistungen

Ebenfalls wichtig sind Aufzählungslisten – entweder unsortiert (ul) mit Punkten oder sortiert (ol) mit Zahlen oder Buchstaben.

• Hund
• Katze
• Pony

<ul>
   <li>Hund</li>
   <li>Katze</li>
   <li>Pony</li>
</ul>

1. Hund
2. Katze
3. Pony

<ol>
   <li>Hund</li>
   <li>Katze</li>
   <li>Pony</li>
</ol>

Hervorhebungen

Manchmal möchte man ja einzelne Wörter besonders hervorheben, indem man sie fett oder schräg setzt.

Theoretisch kannst du die beiden CSS-Eigenschaft (font-weight: bold; bzw. font-style: italic;) natürlich auf jedes beliebige HTML-Element anwenden. Aber zum inhaltlichen Betonen gibt es mit strong und em zwei eigene Tags dafür.

<p>Beispieltexte sind <strong>manchmal</strong> ganz schön <em>doof</em>.</p>

… und dann war da noch: span

Wenn du einzelne Bereiche auszeichnen willst, für die es keine semantisch passenden Tags gibt, dann hilft dir der Allrounder span, dem du sinnvollerweise auch immer eine Klasse mit auf den Weg gibst:

Dieser Beitrag wurde geschrieben von <span class="autor">Hans-Peter</span>.

So – das wichtigste Rüstzeug hast du jetzt bereits zusammen! 🙂
Es gibt natürlich noch weitere HTML-Elemente, mit denen du den Inhalt deiner Blogartikel auszeichnen kannst – beispielsweise für Zitate. Um den Rahmen dieses Beitrags nicht zu sprengen, werde ich darauf demnächst in gesonderten Artikeln eingehen. 🙂

Jetzt gucken wir uns erstmal das Styling im CSS an.

CSS – jetzt wird’s hübsch 😉

Wie gesagt, der Browser stellt deinen Text erstmal nur als schwarze Schrift auf weißem Grund dar, Links sind blau und besuchte Links haben dieses unsägliche Lila. Zeit, das etwas aufzuhübschen. 😉

Schriftfarbe: color

color ist dein Buddy in Sachen Schriftfarbe!

p {
   color: #666;
}

Tipp: die Farbwerte kannst du dir in Photoshop o.Ä. heraussuchen – oder beispielsweise in den Paletten der Colourlovers stöbern.

Schriftart: font-family

Über die Angabe font-family legst du die Schriftart fest.

body {
   font-family: Georgia, 'Times New Roman', serif;
}

Dabei gibt es ein paar Dinge zu beachten: es gibt ein recht kleines Set von Schriftarten, die mit an Sicherheit grenzender Wahrscheinlichkeit auf jedem Rechner unter jedem Betriebssystem vorhanden sind – sei es nun Windows, Mac oder Linux -, sodass deine Seite dann auch überall mit genau dieser Schriftart dargestellt wird.
Gibst du eine ausgefallenere Schriftart an, funktioniert die nur bei Leuten, die sie eben auch auf ihrem Rechner installiert haben. Andernfalls wird ein Fallback genommen, also eine andere Schrift. Deswegen solltest du zur Sicherheit immer zwei, drei Schriftarten angeben und ganz grundlegend definieren, ob du eine serifenlose Schrift (wie etwa Verdana) oder eine mit Serifen (wie Georgia) verwenden möchtest.

Seit es Webfonts gibt – beispielsweise über Google Fonts – ist die Sache erheblich einfacher geworden. Hier wählst du aus einem riesigen Fundus von Schriftarten aus, bindest einfach den nötigen Code ein und kannst dir sicher sein, dass diese Schrift auf jedem Rechner angezeigt wird, eben weil sie als Ressource im Internet bereitsteht. Ich liebe Webfonts! ^^

Schriftgröße: font-size

Die Schriftgröße kannst du in verschiedenen Einheiten angeben, beispielsweise Pixel, em, rem oder Prozent. Da es in diesem Artikel nur um die Grundlagen geht, verwende ich jetzt einfach mal Pixel, da die empfehlenswerteren Varianten einiges an Erklärungsbedarf haben. 😉

h2 {
   font-size: 16px;
}

Zeilenabstand: line-height

Eng verwandt mit der Schriftgröße ist der Zeilenabstand: es macht einen Text ganz einfach leserlicher, wenn die einzelnen Zeilen nicht so eng aneinander kleben.

p {
   line-height: 1.5;
}

Auch den Zeilenabstand kannst du wieder in verschiedenen Werten angeben, beispielsweise mit einer festen Pixelzahl, in Prozent oder mit einer Zahl (wie im obigen Beispiel), die mit der Schriftgröße multipliziert den Zeilenabstand ergibt.

Schriftgewicht: font-weight

Über font-weight: bold; setzt du einen Text in fetter Schrift (und normal hebt das Ganze wieder auf).
Je nachdem, in wie vielen Schriftstärken eine Schriftart vorliegt, kannst du aber auch mit weit mehr Abstufungen spielen – font-weight: 700; zum Beispiel.

Schön siehst du die Unterschiede etwa, wenn du dir die verschiedenen Varianten von OpenSans in Google Fonts anschaust:

Schriftlage: font-style

Kursive Schrift hast du weiter oben ja bereits kennengelernt:

font-style: italic;

Großbuchstaben & Kapitälchen: text-transform & font-variant

Besonders für Überschriften und andere eher kurze, prominente Passagen eignet sich komplett in Großbuchstaben oder in Kapitälchen gesetzte Schrift:

h1 {
  text-transform: uppercase;
}

h2 {
   font-variant: small-caps;
}

Die richtige Richtung: text-align

Normalerweise wird Text linksbündig (left) dargestellt – du kannst daraus aber natürlich auch rechtsbündigen Text machen (right), ihn zentrieren (center) oder in einen Blocksatz (justify) verwandeln:

p {
   text-align: justify;
}

So… das waren jetzt erstmal die wichtigsten Anweisungen, mit denen du schon verdammt weit kommst. 🙂

Wie gesagt – diese Auflistung hier erhebt keinen Anspruch auf Vollständigkeit und möchte dir einfach erstmal einen groben Überblick verschaffen.
Es gibt noch eine ganze Reihe weiterer Elemente und Formatierungsmöglichkeiten, und wenn du mit dem Coding etwas vertrauter bist, kannst du zum Beispiel auch mehrere Font-Angaben zusammenfassen. Darauf gehe ich mal in einem späteren Artikel ein. 🙂

Ich hoffe, dass dir dieser Beitrag schon mal weitergeholfen hat – in dem Fall freue ich mich natürlich, wenn du ihn teilst. 🙂

Hast du gerade an irgendeiner Stelle Fragezeichen über dem Kopf schwirren? – Lass es mich in einem Kommentar wissen!