path: root/files/de/web/css/font-size/index.html

---
title: font-size
slug: Web/CSS/font-size
tags:
  - CSS
  - CSS Font
  - CSS-Eigenschaft
  - CSS-Schrift
  - Reference
translation_of: Web/CSS/font-size
---
<div>{{CSSRef}}</div>

<p>Die <strong><code>font-size</code></strong>-<a href="/de/docs/Web/CSS">CSS</a>-Eigenschaft spezifiziert die Schriftgöße. Eine Änderung der Schriftgröße kann die Größe anderer Partien beeinflussen, da sie dazu benutzt wird, den Wert der <code>em</code>- und <code>ex</code>-{{cssxref("&lt;length&gt;")}}-Einheiten zu berechnen.</p>

<pre class="brush:css no-line-numbers">/* &lt;absolute-size&gt;-Werte */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* &lt;relative-size&gt;-Werte */
font-size: smaller;
font-size: larger;

/* &lt;length&gt;-Werte */
font-size: 12px;
font-size: 0.8em;

/* &lt;percentage&gt;-Werte */
font-size: 80%;

/* Globale Werte */
font-size: inherit;
font-size: initial;
font-size: unset;
</pre>

<div class="hidden" id="font-size">
<pre class="brush: html">&lt;div id="container"&gt;
  &lt;p id="xx-small"&gt;xx-small&lt;/p&gt;
  &lt;p id="x-small"&gt;x-small&lt;/p&gt;
  &lt;p id="small"&gt;small&lt;/p&gt;
  &lt;p id="medium"&gt;medium&lt;/p&gt;
  &lt;p id="large"&gt;large&lt;/p&gt;
  &lt;p id="x-large"&gt;x-large&lt;/p&gt;
  &lt;p id="xx-large"&gt;xx-large&lt;/p&gt;
  &lt;p id="twelve-px"&gt;12px&lt;/p&gt;
  &lt;div id="parent-twelve-px"&gt;
    12px
    &lt;p id="smaller"&gt;smaller&lt;/p&gt;
    &lt;p id="larger"&gt;larger&lt;/p&gt;
    &lt;p id="zero-dot-eight-em"&gt;0.8em&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="parent-twenty-four-px"&gt;
    24px
    &lt;p id="smaller"&gt;smaller&lt;/p&gt;
    &lt;p id="larger"&gt;larger&lt;/p&gt;
    &lt;p id="zero-dot-eight-em"&gt;0.8em&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: css">#container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

div &gt; p {
  border: 1px solid black;
  display: flex;
  align-items: center;
  margin: 8px;
  padding: 8px;
}

#parent-twelve-px,
#parent-twenty-four-px {
  display: flex;
  border: 1px solid black;
  padding: 8px;
  margin: 8px;
}

#parent-twelve-px {
  font-size: 12px;
}

#parent-twenty-four-px {
  font-size: 24px;
}

#xx-small {
  font-size: xx-small;
}

#x-small {
  font-size: x-small;
}

#small {
  font-size: small;
}

#medium {
  font-size: medium;
}

#large {
  font-size: large;
}

#x-large {
  font-size: x-large;
}

#xx-large {
  font-size: xx-large;
}

#smaller {
  font-size: smaller;
}

#larger {
  font-size: larger;
}

#twelve-px {
  font-size: 12px;
}

#zero-dot-eight-em {
  font-size: 0.8em;
}
</pre>
</div>

<p>{{EmbedLiveSample("font-size", 1200, 180, "", "", "example-outcome-frame")}}</p>

<p>{{cssinfo}}</p>

<h2 id="Syntax">Syntax</h2>

<p>Die <code>font-size</code>-Eigenschaft kann auf zwei Weisen spezifiziert werden:</p>

<ul>
 <li>durch ein einzelnes Schlüsselwort, das entweder eine <a href="#absolute-size">absolute</a> oder <a href="#relative-size">relative</a> Größe darstellt</li>
 <li>durch einen <code><a href="#&lt;length-percentage>">&lt;length-percentage&gt;</a></code>-Wert</li>
</ul>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><a id="absolute-size"><code>xx-small, x-small, small, medium, large, x-large, xx-large</code></a></dt>
 <dd>Ein Satz von Schlüsselwörtern absoluter Größe, basierend auf der vom Benutzer festgelegten Schriftgröße (welche <code>medium </code>entspricht). Ähnlich der HTML-Tags <code>&lt;font size="1"&gt;</code> bis <code>&lt;font size="7"&gt;</code>, bei denen die benutzerdefinierte Größe <code>&lt;font size="3"&gt;</code> entspricht.</dd>
 <dt><a id="relative-size"><code>larger, smaller</code></a></dt>
 <dd>Größer oder kleiner als die Schriftgröße des Elternelements; grob das Verhältnis, das benutzt wird, um die obigen absoluten Schlüsselwörter zu unterscheiden.</dd>
 <dt><a id="&lt;length-percentage>"><code>&lt;length-percentage&gt;</code></a></dt>
 <dd>
 <p>Ein positiver {{cssxref("&lt;length&gt;")}}- oder {{cssxref("&lt;percentage&gt;")}}-Wert. Werden die Einheiten der <code>&lt;length&gt;</code>-Werte durch <code>em</code> oder <code>ex</code> spezifiziert, ist die Größe relativ definiert zur Schriftgröße des Elternelements des gefragten Elements. Zum Beispiel entspricht 0.5em der Hälfte der Schriftgröße des aktuellen Elternelements. Werden die Einheiten in <code>rem</code> spezifiziert, ist die Größe relativ definiert zur Schriftgröße des {{HTMLElement("html")}}-(Wurzel-)Elements.</p>

 <p>&lt;percentage&gt;-Werte beziehen sich auf die Schriftgröße des Elternelements.</p>
 </dd>
</dl>

<p>Am Besten werden Werte benutzt, die relativ zur benutzerdefinierten Schriftgröße stehen. Absolute Werte in Form von Längen mit Einheiten, außer <code>em</code> oder <code>ex</code>, sollten vermieden werden. Müssen trotzdem solche absoluten Werte benutzt werden, ist <code>px</code> anderen Einheiten vorzuziehen, weil seine Bedeutung nicht abhängig davon, was das Betriebssystem (meist fälschlicherweise) für die Bildschirmauflösung hält, variiert.</p>

<h3 id="Formale_Syntax">Formale Syntax</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Mögliche_Ansätze">Mögliche Ansätze</h2>

<p>Es gibt einige verschiedene Arten, die Schriftgröße zu spezifizieren, in Form von Schlüsselwörtern oder numerischen Werten für Pixel oder ems. Je nachdem, was die Ansprüche einer Webseite sind, kann die richtige Methode gewählt werden.</p>

<h3 id="Schlüsselwörter">Schlüsselwörter</h3>

<p>Schlüsselwörter sind eine gute Möglichkeit die Größe von Schriften im Web festzulegen. Indem ein Schlüsselwort für die Schriftgröße des body-Elements festgelegt wird, ist es möglich überall auf der restlichen Webseite relative Schriftgrößen zu benutzen, was einen befähigt, auf einfache Weise die Schrift auf der ganzen Seite entsprechend zu vergrößern oder zu verkleinern.</p>

<h3 id="Pixel">Pixel</h3>

<p>Das Festlegen der Schriftgröße in Pixel-Werten (<code>px</code>) ist eine gute Wahl, wenn Pixel-Genauigkeit gefordert ist. Ein px-Wert ist statisch und stellt eine Möglichkeit dar, die unabhängig von Betriebssystem und Browser ist und dem Browser unveränderlich mitteilt, die Buchstaben in genau der spezifizierten Höhe an Pixeln darzustellen. Das Ergebnis kann sich je nach Browser leicht unterscheiden, da diese eventuell verschiedene Algorithmen verwenden, um den selben Effekt zu erzielen.</p>

<p>Verschiedene Schriftgrößeneinstellungen können auch kombiniert werden. Zum Beispiel, wenn ein Elternelement <code>16px</code> festlegt und sein Kindelement <code>larger</code> spezifiziert, dann wird das Kindelement größer dargestellt als das Elternelement auf der Seite.</p>

<div class="note"><strong>Anmerkung:</strong> Die Schriftgröße in Pixeln festzulegen, ist <em><a href="https://de.wikipedia.org/wiki/Barrierefreies_Internet">nicht barrierefrei</a></em>, weil der Benutzer infolge dessen die Schriftgröße nicht über den Browser ändern kann. Zum Beispiel möchten Benutzer mit Sehschwäche die Schriftgröße vielleicht viel größer einstellen als vom Web-Designer ausgewählt. Die Benutzung von Pixeln für Schriftgrößen sollte vermieden werden, wenn ein allumfassendes Design gefordert ist.</div>

<h3 id="Ems">Ems</h3>

<p>Eine weitere Möglichkeit, die Schriftgröße festzulegen, ist die Verwendung von <code>em</code>-Werten. Die Größe eines <code>em</code>-Wertes ist dynamisch. Beim Spezifizieren der <code>font-size</code>-Eigenschaft entspricht ein <code>em</code> der für das gefragte Elternelement festgelegten Schriftgröße. Wird die Schriftgröße nirgendwo anders auf der Seite festgelegt, dann gilt die vom Browser definierte Größe, die oft 16px entspricht. Demnach gilt im Normalfall 1em = 16px, also 2em = 32px. Wenn dem body-Element eine Schriftgröße von 20px zugewiesen wird, dann gilt 1em = 20px und 2em = 40px. Es ist zu beachten, dass der Wert 2 notwendigerweise ein Multiplikator der aktuellen em-Größe ist.</p>

<p>Um das em-Äquivalent für einen beliebigen benötigten Pixel-Wert zu berechnen, kann die folgende Formel benutzt werden:</p>

<pre class="brush: plain">em = gewünschter Pixel-Wert des Elements / Elternelementschriftgröße in Pixeln</pre>

<p>Angenommen die Schriftgröße des Body der Seite entspricht 16px. Wenn die gewünschte Schriftgröße 12px ist, dann sollten 0.75em spezifiziert werden (da 12/16 = 0,75). Es verhält sich ähnlich, wenn eine Schriftgröße von 10px gewollt ist; dann sollte 0.625em spezifiziert werden (10/16 = 0,625) und für 22px sollten es 1.375em (22/16) sein.</p>

<p>Em ist eine sehr nützliche CSS-Einheit, da es seine Länge automatisch relativ zur vom Leser gewählten Schrift anpasst.</p>

<p>Ein wichtiger Hinweis: em-Werte können zu bisweilen auch extremen Steigerungen führen wie das folgende HTML und CSS zeigen:</p>

<pre class="brush: css">html {
  font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */
}
span {
  font-size: 1.6em;
}</pre>

<pre class="brush: html">&lt;div&gt;
&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;
&lt;/div&gt;
</pre>

<p>Das Ergebnis ist:</p>

<p>{{EmbedLiveSample("Ems", 400, 40)}}</p>

<p>Angenommen, dass <code>font-size</code> vom Browser als 16px festgelegt wird, dann würden die Wörter "outer" mit 16px dargestellt, das Wort "inner" aber mit 25.6px. Das liegt daran, dass die Schriftgröße des inneren Spans 1.6em entspricht, was relativ zum Elternelement gilt, welches wiederum relativ zu dessen Elternelement steht. Dieses Verhalten wird auch <strong>compounding</strong> (Steigerung/Aufzinsung) genannt.</p>

<h3 id="Rems">Rems</h3>

<p><code>Rem</code>-Werte wurden eingeführt, um das compunding-Problem zu umgehen. <code>Rem</code>-Werte sind relativ zum <code>html</code>-Wurzelelement, nicht zum Elternelement. Mit anderen Worten ermöglicht es, eine Schriftgröße in einer relativen Weise zu spezifizieren ohne durch das Elternelement beeinflusst zu werden und so das Compunding zu verhindern.</p>

<p>Das folgende CSS ist nahezu identisch mit dem vorherigen Beispiel. Die einzige Ausnahme ist, dass die Einheit nun <code>rem</code> ist.</p>

<pre class="brush: css">html {
  font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */
}
span {
  font-size: 1.6rem;
}
</pre>

<p>Anschließend wird dieses CSS auf das selbe HTML angewandt, das wie folgt aussieht:</p>

<pre class="brush: html">&lt;span&gt;Outer &lt;span&gt;inner&lt;/span&gt; outer&lt;/span&gt;</pre>

<p>{{EmbedLiveSample("Rems", 400, 40)}}</p>

<p>Bei diesem Beispiel erscheinen die Worte "outer inner outer" alle mit 16px (angenommen, dass die Schriftgröße des Browsers beim Standardwert von 16px verblieben ist).</p>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Beispiel_1">Beispiel 1</h3>

<pre class="brush: css">/* Paragrafentext auf sehr groß setzen */
p { font-size: xx-large }

/* h1-(level 1 heading)-Text auf 2,5 mal die Größe
 * des umliegenden Textes setzen */
h1 { font-size: 250% }

/* setzt in span-Tags eingeschlossenen Text auf 16px */
span { font-size: 16px; }
</pre>

<h3 id="Beispiel_2">Beispiel 2</h3>

<pre class="brush: css">.small {
	font-size: xx-small;
}
.larger {
	font-size: larger;
}
.point {
	font-size: 24pt;
}
.percent {
	font-size: 200%;
}
</pre>

<pre class="brush: html">&lt;h1 class="small"&gt;small-H1&lt;/h1&gt;
&lt;h1 class="larger"&gt;larger-H1&lt;/h1&gt;
&lt;h1 class="point"&gt;24pt-H1&lt;/h1&gt;
&lt;h1 class="percent"&gt;200%-H1&lt;/h1&gt;</pre>

<h4 id="Live-Test">Live-Test</h4>

<p>{{EmbedLiveSample('Beispiel_2','600','200')}}</p>

<h2 id="Bemerkungen">Bemerkungen</h2>

<p><code>Em</code>- und <code>ex</code>-Einheiten in der {{Cssxref("font-size")}}-Eigenschaft verhalten sich relativ zur Schriftgröße des Elternelements (im Gegensatz zu allen anderen Einheiten, die relativ zur Schriftgröße des Elements sind). Das bedeutet, dass <code>em</code>-Einheiten und Prozentangaben das selbe als Wert für {{Cssxref("font-size")}} bewirken.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>Keine Veränderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}</td>
   <td>{{Spec2('CSS3 Transitions')}}</td>
   <td>Definiert <code>font-size</code> als animierbar.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Keine Veränderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#font-size', 'font-size')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>

{{Compat("css.properties.font-size")}}