---
title: font-size
slug: Web/CSS/font-size
tags:
  - CSS
  - 'CSS:Referencias'
  - Todas_las_Categorías
translation_of: Web/CSS/font-size
---
<div>{{CSSRef}}</div>

<h2 id="Resumen" name="Resumen">Resumen</h2>

<p>La propiedad <code>font-size</code> especifica la dimensión de la letra. Este tamaño puede, a su vez, alterar el aspecto de alguna otra cosa, ya que se usa para calcular la longitud de las unidades <code>em</code> y <code>ex</code>.</p>

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

<h2 id="Sintaxis" name="Sintaxis">Sintaxis</h2>

<p><code>font-size:</code> <code>xx-small</code> | <code>x-small</code> | <code>small</code> | <code>medium</code> | <code>large</code> | <code>x-large</code> | <code>xx-large</code></p>

<p><code>font-size:</code> <code>smaller</code> | <code>larger</code></p>

<p><code>font-size:</code> &lt;longitud&gt; | &lt;porcentaje&gt; | {{ Cssxref("inherit") }}</p>

<h3 id="Valores" name="Valores">Valores</h3>

<dl>
 <dt>xx-small, x-small, small, medium, large, x-large, xx-large </dt>
 <dd>un grupo de palabras clave de dimensión absoluta en relación al que determina el usuario como tamaño por defecto (que es <code>medium</code>). De forma parecida a las sentencias HTML <code>&lt;font size="1"&gt;</code> hasta <code>&lt;font size="7"&gt;</code> donde el tamaño por defecto es <code>&lt;font size="3"&gt;</code>.</dd>
 <dt>larger, smaller </dt>
 <dd>más grande o más pequeño que el tamaño de letra del elemento padre, con aproximadamente el mismo ratio que el mencionado anteriormente.</dd>
 <dt><a href="es/CSS/length">&lt;longitud&gt;</a> </dt>
 <dd>una unidad positiva de <a href="es/CSS/length">longitud</a>.</dd>
</dl>

<dl>
 <dt>&lt;Porcentaje&gt; </dt>
 <dd>un porcentaje positivo del cuerpo de letra del elemento padre.</dd>
</dl>

<p>Es aconsejable evitar el uso de valores que no sean relativos al tamaño por defecto definido por el usuario, tales como <code>longitud</code> absoluta en unidades distintas a <code>em</code> o <code>ex</code>. Sin embargo, si hay que usar ese tipo de valores, es preferible utilizar unidades <code>px</code> (píxel), ya que su significado no varía en función de las características del sistema operativo (casi siempre erróneas) como la resolución del monitor.</p>

<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>

<p><a href="/samples/cssref/font-size.html">Ver El Ejemplo Vivo</a></p>

<pre>/* Ajusta el texto del párrafo a un cuerpo de letra muy grande. */
p { font-size: xx-large }

/* Ajusta la cabecera de nivel 1 (h1) a 2,5 veces del tamaño
 * del texto. */
h1 { font-size: 250% }

/* Ajusta el texto incluido en span a 16px */
span { font-size: 16px; }
</pre>

<h2 id="Notas" name="Notas">Notas</h2>

<p>Las unidades <code>em</code> y <code>ex</code> en la propiedad {{ Cssxref("font-size") }} son relativas al tamaño de letra del elemento padre (al contrario que todas las demás propiedades, en las que estas unidades son relativas al tamaño de letra del elemento). Esto quiere decir que las unidades <code>em</code> y los porcentajes se comportan de igual forma cuando hablamos de {{ Cssxref("font-size") }}.</p>

<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/CSS1#font-size">CSS 1 </a></li>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#propdef-font-size">CSS 2.1</a></li>
 <li><a class="external" href="http://www.w3.org/TR/css3-fonts/#font-size">css3-fonts</a></li>
</ul>