Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: font-size, Kategorien: Schrift (allgemein), Fonts (CSS 2.1)

Schriftgröße

Steuert die Schriftgröße, sowohl Angaben in Form von Schlüsselworten als auch in absoluten oder relativen sind Werten möglich.

CSS-Eigenschaft: font-size
KurzbeschreibungWerteStandardwertKategorieHinweis
Schriftgröße
  • <length>
  • <percentage>
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large
  • larger
  • smaller
medium
Allgemein:
Schrift
CSS 2.1:
Fonts
 

Folgendes ist beim Einsatz von font-size zu beachten:

  • Im Grunde nicht viel ;-)
  • Als Schlüsselworte für absolute Schriftgrößen sind xx-small, x-small, small, medium, large, x-large, xx-large verwendbar, als relative Größen stehen smaller und larger zur Verfügung.
  • font-size kann ebenfalls als Zahl mit Maßeinheit angegeben werden (5px, 2em, 12pt) oder als prozentuale Angabe (80%). Relative Maßeinheiten verhalten sich relativ zur Schriftgröße des Elternelements.
  • Aus Gründen der Barrierefreiheit werden skalierbare Schriftengrößen benötigt, damit Menschen mit Seh-Einschränkungen Webseiten ansehen können. Skalierbare Schriften sind über EM oder % definiert (im Grunde sind diese beiden Schreibweisen entsprechend, 1.4em sind 140%). Da aktuelle Browser neben dem eigentlichen Text-Zoom auch den Bildschirm-Zoom beherrschen, ist diese Anforderung (eher unbemerkt) etwas in den Hintergrund getreten. Soll eine Webseite barrierefrei sein und hat man den IE6 noch auf der Anforderungsliste stehen, müssen skalierbare Einheiten verwendet werden.
  • Die Grundeinstellung der Schriftgröße ist bei den gängigen Browsern 16px, was auf kaum einer Webseite so verwendet wird. Häufig findet man im CSS die font-size-Angabe von body {font-size: 75%} oder {font-size: 0.8em}. Darüber wird die generelle Schriftgröße einer Seite festgelegt. Das ist fast schon eine Best-practice.
  • Für Druckstyles hingegen sind fixe Maßeinheiten zu empfehlen, PT gehört hier zur Druckausgabe, aber auch PX-Angaben sind möglich.
  • font-size ist eine sich vererbende Eigenschaft. Bei einer relativen Angabe für ein konkretes HTML-Tag potenzieren sich die Angaben, wenn gleiche HTML-Elemente ineinander geschachtelt sind.
  • Im Bespiel Nr. 8 wird diese Vererbung deutlich. Ein <span> hat dort eine Schriftgröße von 150%. Mehrere <span> sind verschachtelt, die inneren <span> verwenden die Schriftgröße des umgebenden <span> als Bezugsschriftgröße. Das 1. <span> hat 16px*150%=24px, das 1. verschachtelte <span> hat also eine Schriftgröße von 150% von 150% der normalen Schriftgröße ((16px*150%)*150%)= 36px, usw.: 54px, 81px. Im Beispiel Nr. 9 sieht man, wie man diesen Effekt verhindern kann: Man setzt das 1. verschachtelte Element auf 100%.
Browserunterstützung von font-size
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu font-size:



Beispiele

HTML:

<div>
   <p>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>

CSS:

/* Standardeinstellung */

Beispiel Nr. 1 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<div>
   <p class="doPx">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>

CSS:

p.doPx {
   font-size: 25px;
}
/* Absolute Schriftgrößenangabe mit PX. */

Beispiel Nr. 2 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<div>
   <p class="doEm">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>

CSS:

p.doEm {
   font-size: 2.5em;
}
/* Relative Schriftgröße per EM. */

Beispiel Nr. 3 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<div>
   <p class="doPerc">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>

CSS:

p.doPerc {
   font-size: 75%;
}
/* Relative Angabe, diese bezieht sich immer auf die Schriftgröße des Elternelement, hier auf die des BODY. */

Beispiel Nr. 4 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<div>
   <p class="doXXL">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>

CSS:

p.doXXL {
   font-size: xx-large;
}
/* Verwendung eines absoluten Schlüsselwortes. Selten in der Praxis zu finden. */

Beispiel Nr. 5 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<div>
   <p class="doXS">Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.</p>
</div>

CSS:

p.doXS {
   font-size: x-small;
}
/* Verwendung eines anderenn Schlüsselwortes. Schlüsselworte sind in der Praxis generell bei Schriftgrößen selten zu beobachten. */

Beispiel Nr. 6 So sieht's aus:

Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird.

 

HTML:

<div>
   <p>Es hat lange gedauert, <span class="doRelL">bis ich begriffen habe</span>, was es bedeutet, ein blinder Text zu sein.</p>
</div>

CSS:

.doRelL {
   font-size: larger;
}
/* Verwendung eines relativen Schlüsselwortes. */

Beispiel Nr. 7 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein.

 

HTML:

<div>
   <p class="doInherit">Es hat lange gedauert, bis
     <span>ich begriffen habe, was es bedeutet,
       <span>ein blinder Text zu sein.
          <span>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen,</span>
        da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird. </span>
      Es hat lange gedauert, bis ich begriffen</span>
    habe, was es bedeutet, ein blinder Text zu sein. </p>
</div>

CSS:

p.doInherit span {
   font-size: 150%;
}
/* Im HTML sind drei SPANs ineinander verschachtelt. Jede Ebene erbt die Schriftgröße vom direkten Elternelement, eine relative Schriftgröße potenziert sich. */

Beispiel Nr. 8 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein. Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein.

 

HTML:

<div>
   <p class="doInheritNot">Es hat lange gedauert, bis
     <span>ich begriffen habe, was es bedeutet,
       <span>ein blinder Text zu sein.
          <span>Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen,</span>
        da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird. </span>
      Es hat lange gedauert, bis ich begriffen</span> habe, was es bedeutet, ein blinder Text zu sein. </p>
</div>

CSS:

p.doInheritNot span {
   font-size: 200%;
}
p.doInheritNot span span {
   font-size: 1em;
}
/* Das erste SPAN erhält die 200% der Schriftgröße des P-Tags. Das zweite SPAN bekommt eine Schriftgröße von 1em (^= 100%), damit wird das Potenzieren der Schriftgröße wie im Beispiel Nr. 8 vermieden. */

Beispiel Nr. 9 So sieht's aus:

Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein. Auch wenn ein Text nur kurz ist, sollte trotzdem irgendwie versucht werden, eine nachvollziehbare Wortfolge anzuzeigen, da man mit zehn Mal fünf bis acht aneinanderhängende X keine reale Ausspielung erzeugt wird. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein.

 

Fehler melden

Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.

Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!

Vielen Dank!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 26. 11. 2017
Render Time: 0.144 sec.

Browser-Marktanteile