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. 🙂

Tipp: Sofern du keine eigenen CSS-Anweisungen hinterlegst, greifen die Standardeinstellungen des Browsers: Überschriften werden automatisch größer dargestellt als der Fließtext, Verlinkungen bekommen ihre berühmte blaue Farbe.
Einige dieser Verhaltensweisen wirst du vielleicht übernehmen wollen, andere hingegen willst du sicherlich überschreiben. Da die Standarddarstellungen der einzelnen Browser voneinander abweichen, empfiehlt es sich, zu Beginn eine normalize.css-Datei einzubinden. Diese sorgt dafür, dass die Basisversion deines Codes in allen Browsern gleich dargestellt wird.

Ü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>
Hinweis für Fortgeschrittene: früher durfte jede Seite nur ein einziges h1-Element beinhalten, was üblicherweise für den Seitentitel + Logo verwendet wurde, während die oberste Artikelüberschrift eine h2 wurde. Seit HTML5 hat sich dies geändert – jede Sinneinheit steht für sich und beginnt mit h1. Das heißt, wenn du jeden Artikel in ein article-Tag packst, sollte jeder eine h1 haben.

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>
Hinweis für Fortgeschrittene: neben strong und em gibt es auch noch b und i.
In HTML4 hatten b und i keine semantische Bedeutung, in HTML5 haben sie die wiedererlangt. Hier kannst du Genaueres dazu nachlesen.

… 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:

Verschiedene Schriftstärken von OpenSans

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!

Anne Schwarz | Bloggerin auf Bloghexe

Anne Schwarz

Hey, ich bin Anne - Multipassionate, waschechtes Dorfkind, Pferdemädchen und Bloggerin aus Leidenschaft.

Ich blogge seit beinahe 20 Jahren und liebe es einfach. Hier auf der Bloghexe teile ich mit dir meine Tipps und Erfahrungen - damit auch dein Blog zauberhaft wird!

» mehr über mich & die Bloghexe

Dieser Beitrag wurde bereits 9mal kommentiert - was denkst du?

Lies weiter:

CSS und WordPress - Bloglayout anpassen

9 Kommentare

  1. Wie ich die Texte zu der Reihe immer nur überfliegen will, weil ich ja eigentlich schon alles weiß was du erzählst, aber dann komm ich doch am Ende an weil ich alles gelesen habe. Du schreibst das wirklich sehr interessant, so dass man dran bleibt und trotzdem einfach genug für Neulinge im Thema. 🙂 Hut ab!

  2. hihi, mir geht es genau wie Sumi. Ich les dir Artikel aber auch immer durch, obwohl ich schon alles weiss.
    Und dann finde ich doch was neues. Zum Beispiel den super Tipp mit mehreren H1 Tags in HTML5. Von der Diskussion hatte ich die Tage schon mal gehört aber was nun genau richtig ist, wusste irgendwie keiner. Daher danke für deinen super knackigen Tipp.

    • Gerne! 🙂 Ich versuch halt auch immer, so über ein Thema zu schreiben, dass Neulinge einen Plan bekommen, aber auch für alte Hasen noch etwas dabei ist. 😉

  3. Gwen

    Ich liebe deine Beiträge einfach! Alles ist immer so super verständlich erklärt- wirklich toll!

  4. Wieder sehr toll und vor allem ausführlich erklärt. Leider für mich jetzt nichts neues Dabei 😀 Ja doch ok das B und I wieder gehen statt strong und em. Aber mittlerweile ist zweiteres so ins Blut gegangen das ich b und i nicht mehr nutze 😛

    lg Sabrina

    • Ging mir eine ganze Zeitlang ähnlich. ^^ Vielleicht widme ich diesem Thema mal einen eigenen Artikel, das ist nämlich eigentlich wirklich spannend. 🙂

  5. Rückblick KW 20 & 21 | Kaddyverse

    […] nur die Blogreihe Coding Love von Anne ans Herz legen. In ihrem aktuellen Beitrag schreibt sie über HTML-Tags und CSS-Codierungen, die die Textformatierung betreffen. Für mich nichts unbedingt neues aber trotzdem toll zu […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert