path: root/files/es/learn/css/styling_text/fundamentals/index.html

---
title: Fundamentos de texto y fuentes tipográficas
slug: Learn/CSS/Styling_text/Fundamentals
translation_of: Learn/CSS/Styling_text/Fundamentals
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div>

<p class="summary"><span class="seoSummary">En este artículo vas a iniciar tu viaje hacia el dominio la aplicación de estilos a textos con {{glossary("CSS")}}. </span> Aquí trataremos en detalle todos los fundamentos básicos del diseño del texto y las fuentes tipográficas, incluyendo la configuración de su grosor, la familia y el estilo de letra, las propiedades abreviadas para los tipos de letra, la alineación del texto, el espaciado entre líneas y letras, y otros efectos.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerrequisitos:</th>
   <td>Conocimientos básicos de informática, conceptos básicos de HTML (estudio de <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción al HTML</a>), conceptos básicos de CSS (estudio de <a href="/es/docs/Learn/CSS/First_steps">Introducción al CSS</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Aprender las propiedades y técnicas fundamentales necesarias para dar estilo al texto en las páginas web.</td>
  </tr>
 </tbody>
</table>

<h2 id="¿Qué_implica_aplicar_estilo_a_texto_en_CSS">¿Qué implica aplicar estilo a texto en CSS?</h2>

<p>Como ya habrás experimentado en tu trabajo con el HTML y el CSS, el texto incluido en un elemento se dispone dentro de la caja de contenido del elemento. Esta empieza en la parte superior izquierda del área de contenido (o en la esquina superior derecha, en el caso del contenido de los lenguajes RTL, o right-to-left, que se escriben de derecha a izquierda) y fluye hacia el final de la línea. Una vez que llega al final, baja a la línea siguiente y sigue, y luego continúa a la línea siguiente, hasta que todo el contenido se ha ubicado en la caja. El contenido de texto se comporta efectivamente como una serie de elementos en línea, distribuidos en líneas adyacentes entre sí, y sin crear saltos de línea hasta que se llega al final de la línea, a menos que se fuerce un salto de línea manual con el elemento {{htmlelement("br")}}.</p>

<div class="note">
<p><strong>Nota</strong>: Si el párrafo anterior te parece confuso, no te preocupes: vuelve atrás y revisa el artículo sobre el <a href="/es/docs/Learn/CSS/Building_blocks/El_modelo_de_caja">modelo de caja</a> antes de continuar.</p>
</div>

<p>Las propiedades CSS que se usan para aplicar estilo al texto pueden clasificarse generalmente en dos categorías, que veremos por separado en este artículo:</p>

<ul>
 <li><strong>Estilos del tipo de letra</strong>: Propiedades que afectan al texto (qué tipo de letra se usa, su tamaño, si es negrita, itálica, etc.).</li>
 <li><strong>Estilos de disposición del texto</strong>: Propiedades que afectan al espaciado y otras características relativas a la disposición del texto, lo que permite la elección de, por ejemplo, el espacio entre líneas y letras, y el modo como el texto se alinea dentro de la caja contenedora.</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: Ten en cuenta que el efecto se aplica sobre todo el texto que hay dentro de un elemento como si fuera una única entidad. No puedes seleccionar y dar estilo a subsecciones de texto, a menos que las delimites con algún elemento apropiado (como {{htmlelement("span")}} o {{htmlelement("strong")}}), o con un pseudoelemento específico para el texto como <a href="/es/docs/Web/CSS/::first-letter">::first-letter</a> (selecciona la primera letra del texto de un elemento), <a href="/es/docs/Web/CSS/::first-line">::first-line</a> (selecciona la primera línea del texto de un elemento), o <a href="/es/docs/Web/CSS/::selection">::selection</a> (selecciona el texto que está resaltado por el cursor).</p>
</div>

<h2 id="Tipos_de_letra">Tipos de letra</h2>

<p>Veamos las propiedades que permiten definir el estilo del tipo de letra. En este ejemplo aplicaremos algunas propiedades CSS diferentes al mismo ejemplo HTML, que presentamos a continuación:</p>

<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;

&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;

&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.&lt;/p&gt;</pre>

<p>Puedes ver el <a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">ejemplo completo en Github</a> (consulta también <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">el código fuente</a>.)</p>

<h3 id="Color">Color</h3>

<p>La propiedad {{cssxref("color")}} establece el color del contenido de los elementos seleccionados (que normalmente es texto, pero también puede incluir un par cosas más, como un subrayado o una línea superpuesta al texto con la propiedad {{cssxref("text-decoration")}} ).</p>

<p>La propiedad <code>color</code> puede admitir cualquier <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidad de color CSS</a>, por ejemplo:</p>

<pre class="brush: css notranslate">p {
  color: red;
}</pre>

<p>Esto mostrará el contenido de los párrafos en color rojo, en lugar del negro que es el estándar por defecto del navegador:</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;

&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;

&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.&lt;/p&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Color', '100%', 220) }}</p>

<h3 id="Familia_de_tipos_de_letras">Familia de tipos de letras</h3>

<p>Usamos la propiedad {{cssxref("font-family")}} para definir un tipo de letra diferente para nuestro texto. Esta propiedad indica al navegador el tipo de letra (o una lista de tipos de letra) que debe aplicar a los elementos seleccionados. El navegador solo aplica el tipo de letra si la máquina que accede al sitio web dispone de ella; en caso contrario, simplemente usa el tipo de letra que tiene definido por defecto ({{anch("Default fonts", "default font")}}). Aquí tienes un ejemplo sencillo:</p>

<pre class="brush: css notranslate">p {
  font-family: arial;
}</pre>

<p>Con esto, todos los párrafos de una página adoptan el tipo de letra Arial, que se encuentra en cualquier ordenador.</p>

<h4 id="Tipos_de_letra_seguros_para_la_web">Tipos de letra seguros para la web</h4>

<p>Solo hay un cierto número de tipos de letra que están disponibles en todos los sistemas en general, y que en consecuencia pueden utilizarse sin demasiadas preocupaciones. Son los llamados <em>tipos de letra seguros para la web</em>, o <em><strong>web safe fonts</strong></em>.</p>

<p>La mayor parte del tiempo, como desarrolladores web deseamos tener un control específico mayor sobre los tipos de letra con que se va a mostrar para mostrar nuestro contenido de texto. El problema está en encontrar una manera de saber de qué tipo de letra dispone el ordenador que se utiliza para acceder a nuestras páginas. No hay manera de saber esto en todos los casos, pero al menos contamos con que los tipos de letra seguros para la web están disponibles en casi todos los sistemas operativos más utilizados (las distribuciones Linux más comunes, Windows, Mac, Android, e iOS).</p>

<p>La lista de los tipos de letra seguros para la web cambia al ir evolucionando los sistemas operativos, pero es correcto considerar los tipos de letra siguientes como seguros para la web, al menos por ahora (muchos de ellos se han popularizado gracias a la iniciativa <em><a href="https://es.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the web</a></em> de Microsoft, de finales de la década de 1990 y principios de la del 2000):</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Nombre</th>
   <th scope="col" style="white-space: nowrap;">Tipo de letra genérico</th>
   <th scope="col">Observaciones</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Arial</td>
   <td>sans-serif</td>
   <td>A menudo se considera una buena práctica añadir también <em>Helvética</em> como opción preferida a <em>Arial</em> porque, aunque tienen casi el mismo aspecto y <em>Arial</em> está más ampliamente disponible, se considera que <em>Helvética</em> tiene una forma más agradable.</td>
  </tr>
  <tr>
   <td>Courier New</td>
   <td>monospace</td>
   <td>Algunos sistemas operativos cuentan con una versión alternativa (posiblemente más antigua) del tipo de letra <em>Courier New</em> llamado <em>Courier</em>. Se considera una buena práctica usar ambos, con <em>Courier New</em> como la opción preferida.</td>
  </tr>
  <tr>
   <td style="white-space: nowrap;">Georgia</td>
   <td>serif</td>
   <td></td>
  </tr>
  <tr>
   <td style="white-space: nowrap;">Times New Roman</td>
   <td>serif</td>
   <td>Algunos sistemas operativos cuentan con una versión alternativa (posiblemente más antigua) del tipo de letra <em>Times New Roman</em> llamado <em>Times</em>. Se considera una buena práctica usar ambos, con <em>Times New Roman</em> como la opción preferida.</td>
  </tr>
  <tr>
   <td>Trebuchet MS</td>
   <td>sans-serif</td>
   <td>Hay que tener cuidado al usar este tipo de letra porque no está ampliamente disponible en los sistemas operativos móviles.</td>
  </tr>
  <tr>
   <td>Verdana</td>
   <td>sans-serif</td>
   <td></td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Nota</strong>: Entre otros recursos, el sitio <a href="http://www.cssfontstack.com/">cssfontstack.com</a> mantiene una lista de tipos de letra seguros disponibles en los sistemas operativos para Windows y Mac, que puede ayudarte en la toma de decisiones acerca de lo que consideras seguro para tus propósitos.</p>
</div>

<div class="note">
<p><strong>Nota</strong>: Hay una manera de descargar un tipo de letra personalizado junto con la página web, que te permite personalizar el uso de los tipos de letra de la manera que desees: <strong>web fonts</strong>. Esto es un poco más complejo, y lo vamos a exponer más adelante en un <a href="/es/docs/Learn/CSS/Styling_text/Fuentes_web">artículo independiente</a> del módulo.</p>
</div>

<h4 id="Fuentes_predeterminadas">Fuentes predeterminadas</h4>

<p>CSS define cinco nombres genéricos para los tipos de letra <code>serif</code><font face="Open Sans, Arial, sans-serif">, </font><code>sans-serif</code>,<font face="Open Sans, Arial, sans-serif"> </font><code>monospace</code>, <code>cursive</code> y <code>fantasy</code>. Son muy genéricos y el tipo de letra exacto que se va a utilizar cuando se especifiquen dichos nombres dependerá de cada navegador y puede variar dependiendo del sistema operativo. Representa el <em>peor escenario posible</em>, en el que el navegador tratará de proporcionar al menos una fuente que parezca apropiada. <code>serif</code>, <code>sans-serif</code> y <code>monospace</code> son bastante predecibles y el navegador debería proporcionar algo razonable. Por otra parte, <code>cursive</code> y <code>fantasy</code> son menos predecibles y te recomendamos que las uses con cautela, y vayas probando a medida que avanzas.</p>

<p>Los cinco nombres se definen de la manera siguiente:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Nombre</th>
   <th scope="col">Definición</th>
   <th scope="col">Ejemplo</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>serif</code></td>
   <td>Tipos de letra que tienen <em><a href="https://es.wikipedia.org/wiki/Gracia_(tipograf%C3%ADa)">serifas</a></em> (pequeños adornos, en general en los extremos de los trazos de los caracteres tipográficos)</td>
   <td><span style="font-family: serif;">Mi gran elefante rojo</span></td>
  </tr>
  <tr>
   <td><code>sans-serif</code></td>
   <td>Tipos de letra que carecen de <em>serifas</em>.</td>
   <td><span style="font-family: sans-serif;">Mi gran elefante rojo</span></td>
  </tr>
  <tr>
   <td><code>monospace</code></td>
   <td>Tipos de letra en que cada carácter tiene el mismo ancho; se usan con frecuencia en las listas de sentencias de los códigos de programación.</td>
   <td><span style="font-family: monospace;">Mi gran elefante rojo</span></td>
  </tr>
  <tr>
   <td><code>cursive</code></td>
   <td>Tipos de letra que intentan emular la letra manuscrita, con trazos fluidos y conectados.</td>
   <td><span style="font-family: cursive;">Mi gran elefante rojo</span></td>
  </tr>
  <tr>
   <td><code>fantasy</code></td>
   <td>Tipos de letra que pensados para ser decorativos.</td>
   <td><span style="font-family: fantasy;">Mi gran elefante rojo</span></td>
  </tr>
 </tbody>
</table>

<h4 id="Listas_de_tipos_de_letra">Listas de tipos de letra</h4>

<p>Ya que no puedes garantizar la disponibilidad de los tipos de letra que deseas utilizar (incluso un tipo de letra seguro para la web podría fallar por alguna razón), puedes proporcionar un <strong>lista de tipos de letra</strong> para que el navegador tenga diversos tipos de letra entre los que elegir. Consiste simplemente en introducirlo como el valor de <code>font-family</code>, que consistirá en una lista de diversos nombres de tipos de letra separados por comas, por ejemplo.</p>

<pre class="brush: css notranslate">p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}</pre>

<p>En tal caso, el navegador comienza al principio de la lista y busca si el primer tipo de letra está disponible en la máquina. Si es así, aplica ese tipo de letra a los elementos seleccionados, y si no, lo intenta con el nombre siguiente de la lista; y así sucesivamente.</p>

<p>Es una buena idea proporcionar un nombre de tipo de letra genérico al final de la lista para que el navegador pueda al menos proporcionar algo aproximadamente adecuado en el caso de que ninguno de los tipos de letra que deseas esté disponible. Para ilustrar este punto: los navegadores asignan a los párrafos el tipo de letra <em>serif</em> por defecto, que normalmente es Times New Roman, si no hay ninguna otra opción disponible, pero esto no resulta conveniente cuando se espera un tipo de letra <em>sans-serif</em>!</p>

<div class="note">
<p><strong>Nota</strong>: Los nombres de los tipos de letra que están constituidos por más de una palabra (como <code>Trebuchet MS</code> ) han de ponerse entre comillas, por ejemplo <code>"Trebuchet MS"</code>.</p>
</div>

<h4 id="Un_ejemplo_con_font-family">Un ejemplo con font-family</h4>

<p>Vamos a introducir en nuestro ejemplo anterior una fuente de tipo sans-serif para los párrafos:</p>

<pre class="brush: css notranslate">p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}</pre>

<p>Esto nos da el resultado siguiente:</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;

&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;

&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.&lt;/p&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Un_ejemplo_con_font-family', '100%', 220) }}</p>

<h3 id="Tamaño_de_la_letra">Tamaño de la letra</h3>

<p>En el artículo sobre <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">Unidades y valores de CSS</a> de nuestro módulo anterior, revisamos las unidades de longitud y tamaño. El tamaño del tipo de letra (establecido con la propiedad {{cssxref("font-size")}}) puede tomar valores medidos en la mayoría de estas unidades (y en otras, como <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS#Porcentajes">porcentajes</a>). Sin embargo, las unidades más comunes que vas a usar para ajustar el tamaño del texto son:</p>

<ul>
 <li>Unidades <code>px</code> (píxeles): El número de píxeles de altura que deseas que tenga el texto. Esta es una unidad absoluta, da como resultado el mismo valor calculado final para el tipo de letra en la página en casi cualquier situación.</li>
 <li>Unidades <code>em</code>: 1em equivale al tamaño de tipo de letra que se haya establecido en el elemento padre del elemento activo al que aplicamos estilo (más específicamente, el ancho de una letra M mayúscula contenida dentro del elemento padre). Este puede ser complejo de resolver si hay muchos elementos anidados con diferentes tamaños de tipo de letra establecidos, pero es factible, como verás a continuación. Pero, ¿para qué molestarse en ello? Porque resulta bastante natural una vez que te acostumbras a ello, y puedes usar unidades <code>em</code> para establecer el tamaño de todo, no solo del texto. Puedes tener un sitio web completo dimensionado con unidades <code>em</code>, lo que facilita su mantenimiento.</li>
 <li>Unidades <code>rem</code>: Funcionan igual que las unidades <code>em</code>, excepto que 1<code>rem</code> equivale al tamaño del tipo de letra establecido en el elemento raíz del documento (es decir, en {{htmlelement("html")}}), no en el elemento padre. Esto facilita mucho los cálculos de los tamaños del tipo de letra, aunque te puede dar mucha guerra si quieres incluir navegadores que ya son muy antiguos porque las versiones de Internet Explorer 8 y anteriores no admiten la unidad <code>rem</code>.</li>
</ul>

<p>La propiedad <code>font-size</code> de un elemento se hereda del elemento padre. Todo comienza con el elemento raíz de todo el documento ({{htmlelement("html")}}) cuya propiedad <code>font-size</code> se establece a en 16px como estándar en todos los navegadores. Cualquier párrafo (o cualquier otro elemento que no tenga un tamaño diferente establecido por el navegador) dentro del elemento raíz tendrá un tamaño final de 16px. Otros elementos pueden tener diferentes tamaños predeterminados, por ejemplo un elemento {{htmlelement("h1")}} tiene de manera predeterminada un tamaño establecido de 2em, por lo que tendrá un tamaño final de 32px.</p>

<p>Las cosas se vuelven más complicadas cuando se empieza a alterar el tamaño del tipo de letra de los elementos anidados. Por ejemplo, si tu página incluye un elemento {{htmlelement("article")}} y estableces un tamaño de fuente de <code>1.5em</code> (que resultará en un tamaño final de 24px), y luego quieres que los párrafos dentro del elemento <code>&lt;article&gt;</code> tengan un tamaño de letra calculado de 20px, ¿qué valor de unidad <code>em</code> deberías usar?</p>

<pre class="brush: html notranslate">&lt;!-- El tamaño de letra base del documento es 16px --&gt;
&lt;article&gt; &lt;!-- Si mi tamaño de letra es 1.5em --&gt;
  &lt;p&gt;Mi párrafo&lt;/p&gt; &lt;!-- ¿Cómo calculo el tamaño del tipo de letra para que de 20px? --&gt;
&lt;/article&gt;</pre>

<p>Necesitarías establecer el valor en unidades <code>em</code> de 20/24, es decir, <code>0.83333333 em</code>. El cálculo puede ser complicado, por lo que hay que pensarlo bien a la hora de aplicar estilo a las cosas. Lo mejor es usar unidades <code>rem</code> donde se pueda, porque simplifican las cosas, y evitar establecer un tamaño de letra concreto para los elementos del contenedor, siempre que sea posible.</p>

<h4 id="Un_ejemplo_sencillo_de_definición_de_tamaños">Un ejemplo sencillo de definición de tamaños</h4>

<p>Al dimensionar el texto, en general es una buena idea establecer el tamaño básico del tipo de letra del documento (<code>font-size</code>) en 10 px, de modo que los cálculos son mucho más fáciles de resolver, puesto que entonces los valores (r)em que necesites son el tamaño del tipo de letra en píxeles dividido por 10, no por 16. Luego de hacer eso, puedes establecer con facilidad los diferentes tamaños de los tipos de letra de tu documento como desees. Es una buena idea hacer una lista de todos los conjuntos de reglas de tamaño de fuente (<code>font-size</code>) en una zona concreta de tu hoja de estilo para que resulten fáciles de encontrar.</p>

<p>Nuestro nuevo resultado es:</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;

&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;

&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.&lt;/p&gt;
</pre>
</div>

<pre class="brush: css notranslate">html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}</pre>

<p>{{ EmbedLiveSample('Un_ejemplo_sencillo_de_definición_de_tamaños', '100%', 220) }}</p>

<h3 id="Estilo_y_cuerpo_del_tipo_de_letra_efectos_y_decoración_del_texto">Estilo y cuerpo del tipo de letra, efectos y decoración del texto</h3>

<p>El CSS proporciona cuatro propiedades comunes para alterar el efecto visual / énfasis del texto:</p>

<ul>
 <li>{{cssxref("font-style")}}: Se usa para activar y desactivar el texto en cursiva. Los valores posibles son los siguientes (raramente usarás esto, a menos que desees desactivar algún estilo de cursiva por alguna razón):
  <ul>
   <li><code>normal</code>: Pone el texto en tipo de letra normal (desactiva la cursiva).</li>
   <li><code>italic</code>: Pone el texto en la versión cursiva del tipo de letra, si está disponible; si no está disponible, simulará cursiva con el modo <code>oblique</code> en su lugar.</li>
   <li><code>oblique</code>: Pone el texto en una versión de tipo de letra cursiva simulada, que se genera inclinando la versión normal.</li>
  </ul>
 </li>
 <li>{{cssxref("font-weight")}}: Establece el grueso o peso del texto. Puede haber muchos valores si dispones de muchas variantes de fuente (como <em>-light</em>, <em>-normal</em>, <em>-bold</em>, <em>-extrabold</em>, <em>-black</em>, etc.), pero en realidad raramente usarás alguna de ellas, más allá de los estilos <code>normal</code> y <code>bold</code>:
  <ul>
   <li><code>normal</code>, <code>bold</code>: Grueso del tipo de letra normal y <strong style="font-weight: bold;">negrita</strong></li>
   <li><code>lighter</code>, <code>bolder</code>: Establece el grueso de la negrita del elemento activo un nivel por debajo o por encima del grueso de su elemento padre.</li>
   <li><code>100</code>–<code>900</code>: Valores numéricos de negrita, que proporcionan un control más detallado que las palabras clave anteriores, si es necesario.</li>
  </ul>
 </li>
 <li>{{cssxref("text-transform")}}: Te permite practicar algunas transformaciones sobre tu tipo de letra. Los valores incluyen:
  <ul>
   <li><code>none</code>: Impide cualquier transformación.</li>
   <li><code>uppercase</code>: Transforma TODO EL TEXTO A MAYÚSCULAS.</li>
   <li><code>lowercase</code>: Transforma todo el texto a minúsculas.</li>
   <li><code>capitalize</code>: Transforma <span style="text-transform: capitalize;">Las Letras Iniciales De Cada Palabra A Mayúscula</span>.</li>
   <li><code>full-width</code>: Transforma todos los caracteres para cada uno quede <span style="text-transform: full-width;">dentro de una caja de ancho fijo</span>, similar a una fuente monoespaciada, lo que permite, por ejemplo, la alineación de caracteres latinos junto con caracteres asiáticos (chino, japonés, coreano.)</li>
  </ul>
 </li>
 <li>{{cssxref("text-decoration")}}: Activa/desactiva decoraciones en los tipos de letra (usarás esto principalmente para desactivar el subrayado por defecto de los enlaces al aplicarles estilo). Los valores disponibles son:
  <ul>
   <li><code>none</code>: Desactiva cualquier decoración de texto que presente.</li>
   <li><code>underline</code>: <u>Subraya el texto</u>.</li>
   <li><code>overline</code>: <span style="text-decoration: overline;">Proporciona al texto una línea superpuesta</span>.</li>
   <li><code>line-through</code>: Coloca un <s style="text-decoration: line-through;">tachado sobre el texto</s>.</li>
  </ul>
  Observa que {{cssxref("text-decoration")}} puede aceptar diversos valores a la vez, de modo que puedes incluir diversas decoraciones simultáneas, por ejemplo <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Ten encuenta también que {{cssxref("text-decoration")}} es una propiedad abreviada de {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} y {{cssxref("text-decoration-color")}}. Puedes utilizar combinaciones de los valores de esta propiedad para crear efectos interesantes, por ejemplo <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li>
</ul>

<p>Añadamos un par de estas propiedades a nuestro ejemplo. Nuestro nuevo resultado quedaría como este:</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;

&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;

&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.&lt;/p&gt;
</pre>
</div>

<pre class="brush: css notranslate">html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}</pre>

<p>{{ EmbedLiveSample('Estilo_y_cuerpo_del_tipo_de_letra_efectos_y_decoración_del_texto', '100%', 220) }}</p>

<h3 id="Textos_sombreados">Textos sombreados</h3>

<p>Puedes aplicar sombras a tus textos con la propiedad {{cssxref("text-shadow")}}. Esta propiedad puede tomar hasta cuatro valores, como se muestra en ejemplo siguiente:</p>

<pre class="brush: css notranslate">text-shadow: 1px 1px 1px red;</pre>

<p>Las cuatro propiedades son las siguientes:</p>

<ol>
 <li>El desplazamiento horizontal de la sombra desde el texto original; admite la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a> de que dispone CSS, pero lo más habitual es usar <code>px</code>. Es un valor obligatorio.</li>
 <li>El desplazamiento vertical de la sombra desde el texto original; se comporta básicamente igual que el desplazamiento horizontal, excepto porque mueve la sombra arriba/abajo, y no hacia derecha/izquierda. Es un valor obligatorio.</li>
 <li>El radio de desenfoque; cuanto más alto es este valor, mayor es la dispersión de la sombra. Si no se incluye este valor, el valor por defecto es 0, y no hay desenfoque. Esta propiedad admite la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a> de que dispone el CSS.</li>
 <li>El color de base de la sombra, que admite cualquier <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidad de color de que dispone CSS</a>. Si no se incluye este valor, el valor predeterminado es <code>negro</code>.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: Los valores con desplazamiento positivo mueven la sombra hacia la derecha o hacia abajo, mientras que los valores con desplazamiento negativo, por ejemplo <code>-1px -1px</code>, mueven la sombrea hacia la izquierda o hacia arriba.</p>
</div>

<h4 id="Sombras_múltiples">Sombras múltiples</h4>

<p>Puedes aplicar diversas sombras al mismo texto incluyendo múltiples valores de sombra separados por comas, por ejemplo:</p>

<pre class="brush: css notranslate"><code class="language-css"><span class="property token">text-shadow</span><span class="punctuation token">:</span> -<span class="number token">1</span>px -<span class="number token">1</span>px <span class="number token">1</span>px <span class="hexcode token">#aaa</span>,
             <span class="number token">0</span>px <span class="number token">4</span>px <span class="number token">1</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.5</span><span class="punctuation token">)</span>,
             <span class="number token">4</span>px <span class="number token">4</span>px <span class="number token">5</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.7</span><span class="punctuation token">)</span>,
             <span class="number token">0</span>px <span class="number token">0</span>px <span class="number token">7</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<p>Si aplicamos esto al elemento {{htmlelement("h1")}} de nuestro ejemplo <em>Tommy The Cat</em>, obtenemos esto:</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;

&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;

&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.&lt;/p&gt;
</pre>

<pre class="brush: css notranslate">html {
  font-size: 10px;
}

h1 {
  font-size: 26px;
  text-transform: capitalize;
  text-shadow: -1px -1px 1px #aaa,
               0px 2px 1px rgba(0,0,0,0.5),
               2px 2px 2px rgba(0,0,0,0.7),
               0px 0px 3px rgba(0,0,0,0.4);
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 14px;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}</pre>
</div>

<p>{{ EmbedLiveSample('Sombras_múltiples', '100%', 220) }}</p>

<div class="note">
<p><strong>Nota</strong>: Puedes ver más ejemplos interesantes del uso de <code>text-shadow</code> en el artículo de <em>Sitepoint</em> <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p>
</div>

<h2 id="Diseño_del_texto">Diseño del texto</h2>

<p>Una vez tratadas las propiedades básicas para los tipos de letra, echemos un vistazo a las propiedades que podemos usar para la disposición del texto.</p>

<h3 id="Alineación_del_texto">Alineación del texto</h3>

<p>La propiedad {{cssxref("text-align")}} se usa para controlar la forma en que el texto se alinea dentro de la caja que lo contiene. Los valores disponibles para esta propiedad son los siguientes, y funcionan de la misma forma que en una aplicación de procesamiento de texto:</p>

<ul>
 <li><code>left</code>: Alinea el texto por la izquierda.</li>
 <li><code>right</code>: Alinea el texto por la derecha.</li>
 <li><code>center</code>: Centra el texto.</li>
 <li><code>justify</code>: Varía los espacios entre las palabras para que todas las líneas de texto tengan el mismo ancho. Debes usar este valor con prudencia porque puede quedar terrible, especialmente si el párrafo al que se aplica contiene muchas palabras largas. Si tienes intención de utilizar esta propiedad, también deberías pensar en alguna otra, como {{cssxref("hyphens")}}, para dividir las palabras largas entre las líneas.</li>
</ul>

<p>Si aplicamos <code>text-align: center;</code> al elemento {{htmlelement("h1")}} de nuestro ejemplo, obtendremos esto:</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;

&lt;p&gt;Well I remember as though it were a meal ago...&lt;/p&gt;

&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.&lt;/p&gt;
</pre>

<pre class="brush: css notranslate">html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
  text-shadow: -1px -1px 1px #aaa,
               0px 2px 1px rgba(0,0,0,0.5),
               2px 2px 2px rgba(0,0,0,0.7),
               0px 0px 3px rgba(0,0,0,0.4);
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}</pre>
</div>

<p>{{ EmbedLiveSample('Alineación_del_texto', '100%', 220) }}</p>

<h3 id="Interlineado">Interlineado</h3>

<p>La propiedad {{cssxref("line-height")}} establece la altura entre cada línea de texto; esta propiedad admite la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a>, pero también puede tomar un valor sin unidades, que actúa como un multiplicador y generalmente se considera la mejor opción porque se multiplica la propiedad {{cssxref("font-size")}} para obtener la altura de la línea (<code>line-height</code>). El texto del cuerpo (<code>body</code>) generalmente se ve mejor y es más fácil de leer si hay más separación entre las líneas; la altura recomendada de la línea es entre 1.5-2 (a doble espacio). Por lo tanto, para configurar nuestras líneas de texto a 1.5 veces la altura de la fuente, deberías usar esto:</p>

<pre class="brush: css notranslate">line-height: 1.5;</pre>

<p>Aplicando esto a los elementos {{htmlelement("p")}} en nuestro ejemplo nos daría este resultado:</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;

&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;

&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.&lt;/p&gt;
</pre>

<pre class="brush: css notranslate">html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
  text-shadow: -1px -1px 1px #aaa,
               0px 2px 1px rgba(0,0,0,0.5),
               2px 2px 2px rgba(0,0,0,0.7),
               0px 0px 3px rgba(0,0,0,0.4);
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
}</pre>
</div>

<p>{{ EmbedLiveSample('Interlineado', '100%', 250) }}</p>

<h3 id="Espacio_entre_letras_y_espacio_entre_palabras">Espacio entre letras y espacio entre palabras</h3>

<p>Las propiedades {{cssxref("letter-spacing")}} y {{cssxref("word-spacing")}} te permiten establecer el espacio entre las letras y entre las palabras del texto. No los usarás a menudo, pero podría ser útil para obtener una apariencia determinada o para mejorar la legibilidad de un tipo de letra particularmente denso. Estas propiedades admiten la mayoría de las <a href="/es/docs/Learn/CSS/Building_blocks/Valores_y_unidades_CSS">unidades y magnitudes</a>.</p>

<p>Así, como ejemplo, podemos aplicar a la primera línea de los elementos {{htmlelement("p")}} de nuestro ejemplo lo siguiente:</p>

<pre class="brush: css notranslate">p::first-line {
  letter-spacing: 2px;
  word-spacing: 4px;
}</pre>

<p>y obtendremos:</p>

<div class="hidden">
<pre class="brush: html notranslate">&lt;h1&gt;Tommy the cat&lt;/h1&gt;

&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;

&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban
predator — Tommy the cat had many a story to tell. But it was a rare
occasion such as this that he did.&lt;/p&gt;
</pre>

<pre class="brush: css notranslate">html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
  text-shadow: -1px -1px 1px #aaa,
               0px 2px 1px rgba(0,0,0,0.5),
               2px 2px 2px rgba(0,0,0,0.7),
               0px 0px 3px rgba(0,0,0,0.4);
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p::first-line {
  letter-spacing: 2px;
  word-spacing: 4px;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
}</pre>
</div>

<p>{{ EmbedLiveSample('Espacio_entre_letras_y_espacio_entre_palabras', '100%', 250) }}</p>

<h3 id="Otras_propiedades_interesantes">Otras propiedades interesantes</h3>

<p>Las propiedades anteriores nos dan una idea de cómo empezar a aplicar texto a una página web, pero hay muchas más propiedades que puedes usar. Nuestro objetivo aquí es solo exponer las más importantes. Cuando te hayas acostumbrado a usar las propiedades anteriores, también deberías explorar las siguientes:</p>

<p>Aplicación de estilos a tipos de letra:</p>

<ul>
 <li>{{cssxref("font-variant")}}: Cambia entre las opciones de versalita y normal del tipo de letra.</li>
 <li>{{cssxref("font-kerning")}}: Activa/Desactiva las opciones de interletraje del tipo de letra.</li>
 <li>{{cssxref("font-feature-settings")}}: Activa/Desactiva diversas características de los tipos de letra <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a>.</li>
 <li>{{cssxref("font-variant-alternates")}}: Controla el uso de los caracteres alternativos para un tipo de letra dado.</li>
 <li>{{cssxref("font-variant-caps")}}: Controla el uso de los caracteres alternativos de las mayúsculas.</li>
 <li>{{cssxref("font-variant-east-asian")}}: Controla el uso de los caracteres alternativos en textos en idiomas del Asia Oriental, como el japonés y el chino.</li>
 <li>{{cssxref("font-variant-ligatures")}}: Controla qué ligaduras y formas contextuales se usarán en el texto.</li>
 <li>{{cssxref("font-variant-numeric")}}: Controla el uso de los caracteres alternativos para números, fracciones y marcadores de ordinales.</li>
 <li>{{cssxref("font-variant-position")}}: Controla el uso de los caracteres alternativos de tamaños más pequeños posicionados como subíndice y superíndice.</li>
 <li>{{cssxref("font-size-adjust")}}: Ajusta el tamaño visual del texto independientemente del tamaño real del tipo de letra.</li>
 <li>{{cssxref("font-stretch")}}: Cambia entre posibles versiones ampliadas de un tipo de letra determinado.</li>
 <li>{{cssxref("text-underline-position")}}: Especifica la posición de los subrayados con el valor <code>underline</code> de la propiedad <code>text-decoration-line</code>.</li>
 <li>{{cssxref("text-rendering")}}: Intenta optimizar la representación del texto.</li>
</ul>

<p>Estilos de disposición de los textos</p>

<ul>
 <li>{{cssxref("text-indent")}}: Especifica el espacio horizontal que debe dejarse antes del comienzo de la primera línea del contenido de texto.</li>
 <li>{{cssxref("text-overflow")}}: Define cómo se señala el contenido que los usuarios no ven porque desborda.</li>
 <li>{{cssxref("white-space")}}: Define cómo se usan los espacios en blanco y los saltos de línea asociados dentro del elemento.</li>
 <li>{{cssxref("word-break")}}: Especifica si se deben dividir las palabras a final de línea.</li>
 <li>{{cssxref("direction")}}: Define la dirección del texto (esto depende del idioma, y por lo general es mejor dejar que HTML maneje esa parte, porque está vinculada al contenido del texto).</li>
 <li>{{cssxref("hyphens")}}: Activa/Desactiva la separación de palabras en los idiomas admitidos.</li>
 <li>{{cssxref("line-break")}}: Relaja o refuerza el salto de línea en los idiomas asiáticos.</li>
 <li>{{cssxref("text-align-last")}}: Define cómo es la alineación de la última línea de un bloque o línea justo antes de un salto de línea forzado.</li>
 <li>{{cssxref("text-orientation")}}: Define la orientación del texto en una línea.</li>
 <li>{{cssxref("word-wrap")}}: Especifica si el navegador puede dividir palabras a final de línea para evitar desbordamientos del contenido.</li>
 <li>{{cssxref("writing-mode")}}: Define si las líneas de texto se disponen en horizontal o en vertical y la dirección en la que fluyen las líneas subsiguientes.</li>
</ul>

<h2 id="Propiedades_abreviadas_para_los_tipos_de_letra">Propiedades abreviadas para los tipos de letra</h2>

<p>Muchas propiedades relativas a los tipos de letra también pueden establecerse de forma abreviada con la propiedad {{cssxref("font")}}. Se escriben en el orden siguiente: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.</p>

<p>De entre todas estas propiedades, solo <code>font-size</code> y <code>font-family</code> son obligatorias al usar la propiedad abreviada de <code>font</code>.</p>

<p>Se debe colocar una barra inclinada (<em>slash</em>) entre las propiedades {{cssxref("font-size")}} y {{cssxref("line-height")}}.</p>

<p>Un ejemplo completo se vería así:</p>

<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre>

<h2 id="Aprendizaje_activo_Jugar_a_aplicar_estilos">Aprendizaje activo: Jugar a aplicar estilos</h2>

<p>En esta sección de aprendizaje activo no proponemos ningún ejercicio específico: Simplemente nos gustaría que juegues con algunas propiedades de diseño de tipo de letra / texto, ¡y a ver qué consigues! Puedes hacer esto con archivos HTML/CSS sin conexión, o puedes introducir tu código en el ejemplo editable en vivo a continuación.</p>

<p>Si te equivocas, puedes volver a empezar con el botón <em>Reinicio</em>.</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html notranslate">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
  &lt;h2&gt;HTML Input&lt;/h2&gt;
  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;
  &lt;p&gt;Some sample text for your delight&lt;/p&gt;&lt;/textarea&gt;

  &lt;h2&gt;CSS Input&lt;/h2&gt;
  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;p {

  }&lt;/textarea&gt;

  &lt;h2&gt;Output&lt;/h2&gt;
  &lt;div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/div&gt;
  &lt;div class="controls"&gt;
    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input");
const cssInput = document.querySelector(".css-input");
const reset = document.getElementById("reset");
let htmlCode = htmlInput.value;
let cssCode = cssInput.value;
const output = document.querySelector(".output");

const styleElem = document.createElement('style');
const headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>

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

<p>Esperamos que hayas disfrutado jugando con el texto en este artículo. El próximo artículo te enseñará todo lo que necesitas saber sobre la aplicación de estilos de lista en HTML.</p>

<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p>

<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Aplicar estilo al texto base y tipos de letra</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Aplicación de estilo a listas</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Aplicación de estilo a enlaces</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Tipos de letra para web</a></li>
 <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Escribir una página de inicio para la comunidad escolar</a></li>
</ul>