Schriftgröße/Textgröße festlegen über CSS font-size:

Die Schriftgröße kann in CSS über font-size: festgelegt werden. Die Vorgaben vom Browser zeigen schon die unterschiedlichen Überschriften und Absätze in einer vom Browser vorgegebenen Größe an. Wenn man diese Textgrößen ändern möchte, kann man dies sehr einfach über CSS realisieren.

Im folgenden Beispiel wird für die h1-Überschrift über CSS eine Größe festgelegt:

h1 {
    font-size: 20pt;
}

Werte und Einheiten bei Schriftgrößen

Im Beispiel wurde die Einheit „pt“ verwendet. Für Websites sollte man allerdings immer die relativen Maßeinheiten wie „em“ verwenden.

Warum relative Maßeinheiten? Weil einige Display eine extrem große Auflösung haben und die Anzeige dann über die relativen Angaben viel einfach ideal für die großen Auflösungen umgerechnet werden können. Wenn Beispielsweise das Display eine Auflösung von 2390 x 1920 Pixel (WQXGA) haben und wir festlegen würden, dass die Schrift nur 20 Pixel groß ist, würde diese sehr sehr klein auf diesem Display dargestellt (je nachdem, ob wie der Hardware-Hersteller mit dem Betriebssystem zusammenarbeitet). Daher also am besten keine absoluten Angaben der Schriftgröße verwenden.

Maßeinheit „em“ für Schriftgrößen

Sehr gut geeignet ist die Angabe von „em“. „Em“ steht für „equal M“ sprich das große M der gewählten Schrift wird für die Größenberechnung genutzt.

Die Größe bei von einem EM entspricht vom Grundlayout 16 Pixel. Die ist bei normal auflösenden Displays. Herstellern von extrem hochauflösenden Displays rechnen dann intern um und 1 EM entspricht dann z. B. dem 3-fachen von 16 Pixel (das würde hier zu weit führen). Wichtig ist einfach, wenn wir die Maßeinheit „em“ verwenden haben wir keine Probleme zu erwarten.

Unser Beispiel von oben wäre also besser mit:

h1 {
    font-size: 2em;
}

Wichtig für die unterschiedlichen Überschriften (h1 - h6) und Absatz p

Sehr wichtig ist, dass der Besucher eine klare visuelle Unterscheidung zwischen den verschiedenen Überschriften hat, um die Wichtigkeit der entsprechenden Überschrift einschätzen zu können. Dies wird meistens mit der Schriftgröße gemacht – man kann allerdings auch mischen mit Schriftgröße und Schriftfarbe.

Aufgabe Schriftgröße

Bitte 3 Überschriften mit h1, h2 und h3 ausgeben lassen und diesen unterschiedliche Schriftgrößen über die CSS-Anweisung font-size: mitgeben. Dabei soll bitte zusätzlich den Absätzen (die nach den Überschrifte kommen) auch eine Größe mitgegeben werden. Dazu einmal versuchsweise dem Absatz die Schriftgröße der Überschrift h2 mitgeben.

Testen!