path: root/files/ca/learn/css/estilitzar_text/text_fonamental/index.html

---
title: Text fonamental i estil de font
slug: Learn/CSS/Estilitzar_text/Text_fonamental
tags:
  - Article
  - Beginner
  - CSS
  - Guide
  - Style
  - Text
  - alignment
  - family
  - font
  - shorthand
  - spacing
  - weight
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">En aquest article t'iniciem en el viatge cap al domini de l'aplicació d’estil a text amb {{glossary("CSS")}}. Aquí passarem amb detall per tots els fonaments bàsics de l'aplicació d’estil a textos / tipus de lletra, inclosos el gruix, la família i l'estil del tipus de lletra, les propietats abreviades per al tipus de lletra, l'alineació del text i altres efectes, i l’interlineat i l’interlletratge.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Requisits previs:</th>
   <td>Coneixements bàsics d'informàtica, fonaments bàsics d'HTML (consulta l’article <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), fonaments de CSS (consulta l’article <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objectiu:</th>
   <td>Aprendre les propietats i tècniques bàsiques necessàries per a l'aplicació d’estil al text de les pàgines web.</td>
  </tr>
 </tbody>
</table>

<h2 id="Què_implica_laplicació_d’estil_al_text_en_CSS">Què implica l'aplicació d’estil al text en CSS?</h2>

<p>Com ja deus conèixer d’haver treballat amb l’HTML i el CSS, el text dins d'un element es defineix dins de la caixa de contingut de l'element. Comença a la part superior esquerra de l'àrea de contingut (o a la part superior dreta, en el cas de contingut en idiomes RTL, o right-to-left, que s'escriuen de dreta a esquerra) i flueix cap al final de la línia. Quan arriba al final, passa a la línia següent i continua; i després, a la següent línia, fins que tot el contingut s'ha col·locat a la caixa. El contingut de text es comporta en efecte com un seguit d'elements en línia, es distribueix en línies adjacents entre si, i no crea salts de línia fins que s’ateny el final de la línia, o tret que s'obligui a un salt de línia manual de l'element {{htmlelement("br")}}.</p>

<div class="note">
<p><strong>Nota</strong>: Si el paràgraf anterior et sembla confós, no t’hi amoïnis, torna enrere i fes un repàs de la teoria del model de caixa que s’explica en l’article <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixa</a> abans de continuar.</p>
</div>

<p>Les propietats CSS que s'utilitzen per a escriure text generalment es divideixen en dues categories, que veurem per separat en aquest article:</p>

<ul>
 <li><strong>Els estils dels tipus de lletra</strong>: són les propietats que afecten el tipus de lletra que es fa servir per al text, que afecta el tipus de lletra que s’empra, la mida, els formats de negreta, cursiva, etc.</li>
 <li><strong>Els estils de text en el disseny de pàgina</strong>: són les propietats que afecten l'espaiat i altres funcions de disseny de pàgina relacionades amb el text, que permeten la manipulació de, per exemple, l'espai entre línies i lletres, i la manera com s’alinea el text dins de la caixa de contingut.</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: Tingues en compte que les propietats que afecten el text dins d'un element hi actuen com una única entitat. No pots seleccionar i modificar l'estil de les subseccions de text si no les etiquetes amb un element apropiat (com ara {{htmlelement("span")}} o {{htmlelement("strong")}}) o utilitzes un pseudoelement específic per a text com <a href="/ca/docs/Web/CSS/::first-letter">::first-letter</a> (selecciona la primera lletra del text d'un element), <a href="/ca/docs/Web/CSS/::first-line">::first-line</a> (selecciona la primera línia del text d'un element) o <a href="/ca/docs/Web/CSS/::selection">::selection</a> (selecciona el text que el cursor ressalta en aquell moment).</p>
</div>

<h2 id="Tipus_de_lletra">Tipus de lletra</h2>

<p>Continuem endavant per veure les propietats d'estil dels tipus de lletra. En aquest exemple aplicarem algunes propietats CSS diferents a la mateixa mostra d’HTML, que té l’aspecte següent:</p>

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

&lt;p&gt;I remember as if 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>Podeu trobar l'<a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">exemple acabat en GitHub</a> (vegeu-ne també <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">el codi font</a>).</p>

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

<p>La propietat {{cssxref("color")}} estableix el color del contingut de primer pla dels elements seleccionats (que normalment és el text, però també pot incloure un parell d'altres coses, com ara un subratllat o un sobreratllat en el text, amb la propietat {{cssxref("text-decoration")}}).</p>

<p>La propietat <code>color</code> pot acceptar qualsevol <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitat de color CSS</a>, per exemple:</p>

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

<p>Això fa que els paràgrafs es converteixin en vermells, en comptes del negre estàndard per defecte del navegador, així:</p>

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

&lt;p&gt;I remember as if 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="Famílies_de_tipus_de_lletra">Famílies de tipus de lletra</h3>

<p>Per a establir un tipus de lletra diferent en el teu text, utilitza la propietat {{cssxref("font-family")}}; això et permet especificar un tipus de lletra (o una llista de tipus de lletra) perquè el navegador l'apliqui als elements seleccionats. El navegador només aplica un tipus de lletra si està disponible en la màquina amb què s’accedeix al lloc web. Si no, només usarà un {{anch("Default fonts", "tipus de lletra predeterminat")}} del navegador. Un exemple senzill és el següent:</p>

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

<p>Això fa que tots els paràgrafs d'una pàgina adoptin el tipus de lletra Arial, que es troba en qualsevol ordinador.</p>

<h4 id="Tipus_de_lletra_segurs_per_a_la_xarxa_web">Tipus de lletra segurs per a la xarxa web</h4>

<p>Parlant de la disponibilitat dels tipus de lletra, només una certa quantitat de tipus de lletra es troben generalment disponibles en tots els sistemes i, per tant, es poden utilitzar sense gaires preocupacions. Són els anomenats <strong>tipus de lletra segurs per a la xarxa web</strong>.</p>

<p><span id="result_box" lang="ca">La majoria de les vegades, com a desenvolupadors web, volem tenir un control més específic sobre els tipus de lletra que s’utilitzen per a mostrar el contingut del text. El problema és trobar una manera de saber quin tipus de lletra està disponible en l'ordinador que es fa servir per a accedir a les nostres pàgines web. No hi ha manera de saber-ho en tots els casos, però se sap que els tipus de lletra segurs per a la web estan disponibles en gairebé totes les instàncies dels sistemes operatius més utilitzats (Windows, Mac, les distribucions més habituals de Linux, Android i iOS).</span></p>

<p>La llista de tipus de lletra segurs per a la xarxa web reals canvia a mesura que evolucionen els sistemes operatius, però és convenient considerar els tipus de lletra segurs per a la xarxa web següents, almenys ara com ara (molts d'ells s’han popularitzades gràcies a la iniciativa de Microsoft <em><a href="https://ca.wikipedia.org/wiki/Core_fonts_for_the_Web">Tipus de lletra principals per a la xarxa web</a></em>, de finals dels anys 1990 i principis dels anys 2000):</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Nom</th>
   <th scope="col" style="white-space: nowrap;"><span class="short_text" id="result_box" lang="ca"><span>Tipus de lletra genèric</span></span></th>
   <th scope="col">Observacions</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Arial</td>
   <td>sans-serif</td>
   <td>Sovint es considera una bona pràctica afegir també el tipus de lletra <em>Helvetica</em> com una alternativa preferent a <em>Arial</em>; encara que són gairebé idèntiques, es considera que <em>Helvetica</em> té una forma més agradable, tot i que <em>Arial</em> està més disponible.</td>
  </tr>
  <tr>
   <td>Courier New</td>
   <td>monospace</td>
   <td>Hi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra <em>Courier New</em> anomenada <em>Courier</em>. Es considera una bona pràctica utilitzar-les totes dues, amb <em>Courier New</em> com l’opció preferent.</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>Hi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra <em>Times New Roman</em> anomenada <em>Times</em>. Es considera una bona pràctica utilitzar-les totes dues, amb <em>Times New Roman</em> com l’opció preferent.</td>
  </tr>
  <tr>
   <td>Trebuchet MS</td>
   <td>sans-serif</td>
   <td>Has de tenir cura amb l'ús d'aquest tipus de lletra perquè no està àmpliament disponible en sistemes operatius mòbils.</td>
  </tr>
  <tr>
   <td>Verdana</td>
   <td>sans-serif</td>
   <td></td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Nota</strong>: Entre els diversos recursos, el lloc web <a href="http://www.cssfontstack.com/">cssfontstack.com</a> manté una llista de tipus de lletra segurs per a la web disponibles en sistemes operatius Windows i macOS, que poden ajudar-te a prendre la decisió sobre el que consideris segur per al teu ús.</p>
</div>

<div class="note">
<p><strong>Nota</strong>: Hi ha una manera de descarregar un tipus de lletra personalitzat juntament amb una pàgina web, que et permet personalitzar l'ús del tipus de lletra de la manera que vulguis: <strong>web fonts</strong>. Això és una mica més complex, i ho exposarem en un <a href="/ca/docs/Learn/CSS/Estilitzar_text/Fonts_Web">article separat</a> més endavant en el mòdul.</p>
</div>

<h4 id="Tipus_de_lletra_predeterminats">Tipus de lletra predeterminats</h4>

<p>CSS defineix cinc noms genèrics per als tipus de lletra: <code>serif</code>, <code>sans-serif</code>, <code>monospace</code>, <code>cursive</code> i <code>fantasy</code>. Són noms molt genèrics i l’aspecte exacte del tipus de lletra usat quan s'utilitzen aquests noms genèrics correspon a cada navegador i pot variar per a cada sistema operatiu amb què s'executa. Representa un pitjor escenari, en què el navegador tracta de fer el possible per a oferir almenys un tipus de lletra que es consideri adequat. <code>serif</code>, <code>sans-serif</code> i <code>monospace</code> són bastant previsibles i han de proporcionar alguna cosa raonable. D'altra banda, <code>cursive</code> i <code>fantasy</code> són menys previsibles i et recomanem utilitzar-les amb molta cura i provar-les cada vegada.</p>

<p>Els cinc noms es defineixen de la manera següent:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Nom</th>
   <th scope="col">Definició</th>
   <th scope="col">Exemple</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>serif</code></td>
   <td>Tipus de lletra que tenen serifes (les floritures i altres petits detalls que es veuen en els extrems dels traços en algunes tipografies).</td>
   <td><span style="font-family: serif;">My big red elephant</span></td>
  </tr>
  <tr>
   <td><code>sans-serif</code></td>
   <td>Tipus de lletra que no tenen serifes.</td>
   <td><span style="font-family: sans-serif;">My big red elephant</span></td>
  </tr>
  <tr>
   <td><code>monospace</code></td>
   <td>Tipus de lletra en què cada caràcter ocupa la mateixa amplada, normalment s’utilitza en les llistes d’instruccions que constitueixen el codi informàtic.</td>
   <td><span style="font-family: monospace;">My big red elephant</span></td>
  </tr>
  <tr>
   <td><code>cursive</code></td>
   <td>Tipus de lletra que tenen com a objectiu emular l'escriptura manuscrita, amb moviments fluids i connectats.</td>
   <td><span style="font-family: cursive;">My big red elephant</span></td>
  </tr>
  <tr>
   <td><code>fantasy</code></td>
   <td>Tipus de lletra amb intencions decoratives.</td>
   <td><span style="font-family: fantasy;">My big red elephant</span></td>
  </tr>
 </tbody>
</table>

<h4 id="Llistes_de_tipus_de_lletra">Llistes de tipus de lletra</h4>

<p>Com que no pots garantir la disponibilitat dels tipus de lletra que vols utilitzar en les teves pàgines web (fins i tot un tipus de lletra segur per a la xarxa web <em>podria</em> fallar per alguna raó), pots proporcionar una <strong>llista de tipus de lletra</strong> perquè el navegador tingui diversos tipus de lletra per poder triar. Això només implica introduir un atribut <code>font-family</code> amb un valor que consti de diversos noms de tipus de lletra separats per comes, per exemple:</p>

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

<p>En aquest cas, el navegador comença pel principi de la llista i mira si el primer tipus de lletra està disponible en la màquina. Si és així, s'aplica aquesta font als elements seleccionats. En cas contrari, es passa al tipus de lletra següent, i així successivament.</p>

<p>És recomanable proporcionar al final de la llista un nom de tipus de lletra genèric que sigui adequat perquè el navegador pugui almenys proporcionar alguna cosa adequada aproximada si cap dels tipus de lletra de la llista estan disponibles. Per il·lustrar aquest punt, els navegadors presenten els paràgrafs en un tipus de lletra serifa predeterminada, que normalment és Times New Roman, si no hi ha cap altra opció disponible; però això no és bo quan s’espera un tipus de lletra sans-serif!</p>

<div class="note">
<p><strong>Nota</strong>: Els noms dels tipus de lletra que tenen més d'una paraula, com <code>Trebuchet MS</code> s’han d’escriure entre cometes.</p>
</div>

<h4 id="Un_exemple_de_font-family"><span id="result_box" lang="ca">Un exemple de <code>font-family</code></span></h4>

<p><span id="result_box" lang="ca">Afegim les línies següents al nostre exemple anterior per a donar als paràgrafs un tipus de lletra sans-serif</span>:</p>

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

<p><span id="result_box" lang="ca">Això ens dona el resultat següent</span>:</p>

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

&lt;p&gt;I remember as if 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_exemple_de_font-family', '100%', 220) }}</p>

<h3 id="La_mida_de_la_lletra"><span id="result_box" lang="ca">La mida de la lletra</span></h3>

<p>En l'article de <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">valors i unitats en CSS</a> del mòdul anterior, hem revisat les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i mida</a>. La mida de la lletra (que s’estableix amb la propietat {{cssxref("font-size")}} pot prendre valors que es mesuren en la majoria d'aquestes unitats (i d’altres, com ara <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS#Percentatges">percentatges</a>), però les unitats més comunes que faràs servir per a la mida del text són:</p>

<ul>
 <li><code>px</code> (píxels): L’alçada expressada en nombre de píxels que vols que tingui el text. Aquesta és una unitat absoluta; dona sempre el mateix valor final calculat per al tipus de lletra de la pàgina en qualsevol situació.</li>
 <li><code>em</code>: 1 <code>em</code> és igual a la mida de la lletra que s’ha establert per al tipus de lletra de l'element pare de l'element al qual apliquem estil (més concretament, l'amplada d'una lletra M majúscula continguda dins de l'element pare). Això pot arribar a ser complicat de calcular si hi ha molts elements imbricats amb mides de tipus de lletra establertes diferents, però és factible, com veuràs a continuació. Així, doncs, per què t’ha de preocupar? Resulta força natural una vegada que t’hi acostumes i pots fer servir unitats <code>em</code> per a dimensionar-ho tot, no només text. Pots tenir un lloc web complet definit amb mides en unitats <code>em</code>, i així se simplifica molt el manteniment.</li>
 <li><code>rem</code>: Aquestes unitats funcionen igual que les unitats <code>em</code>, excepte que 1 <code>rem</code> és igual a la mida de lletra del tipus de lletra que s’ha establert per a l'element arrel del document (és a dir, {{htmlelement("html")}}), no l'element pare. Això facilita força els càlculs per a esbrinar la mida de la lletra, però malauradament les unitats <code>rem</code> no són compatibles amb Internet Explorer 8 o anteriors. Si necessites compatibilitat amb navegadors antics per al teu projecte, pots utilitzar unitats <code>em</code> o <code>px</code>, o bé utilitzar un {{glossary("polyfill")}} com <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a>.</li>
</ul>

<p>L’atribut <code>font-size</code> d'un element s'hereta de l'element pare d'aquest element. Tot comença amb l'element arrel del document, {{htmlelement("html")}}, en què l’atribut <code>font-size</code> està establert en 16 px de manera estàndard en els navegadors. Qualsevol paràgraf (o un altre element que no tingui una mida diferent establerta pel navegador) de l'interior de l'element arrel tindrà una mida final de 16 px. Altres elements poden tenir mides predeterminades diferents, per exemple, un element {{htmlelement("h1")}} té una mida de 2 <code>em</code> establerta per defecte, de manera que tindrà una mida final de 32 píxels.</p>

<p>Les coses es tornen més difícils quan es comença a alterar la mida del tipus de lletra dels elements imbricats. Per exemple, si en la teva pàgina hi ha un element {{htmlelement("article")}} i hi estableixes la mida del tipus de lletra en 1,5 <code>em</code> (que donaria una mida final de 24 px), i llavors vols que els paràgrafs de dins de l'element <code>&lt;article&gt;</code> tinguin una mida de lletra computada de 20 px, quin valor <code>em</code> hem d’utilitzar?</p>

<pre class="brush: html notranslate">&lt;!-- document base font-size is 16px --&gt;
&lt;article&gt; &lt;!-- If my font-size is 1.5em --&gt;
  &lt;p&gt;My paragraph&lt;/p&gt; &lt;!-- How do I compute to 20px font-size? --&gt;
&lt;/article&gt;</pre>

<p>Hauràs d'establir el valor <code>em</code> en 20/24 o 0,83333333 <code>em</code>. Els càlculs poden complicar-se, de manera que cal tenir cura a l’hora de com aplicar estils. El millor és utilitzar unitats <code>rem</code> on puguis per mantenir les coses senzilles i evitar establir la mida de la lletra dels elements del contenidor quan sigui possible.</p>

<h4 id="Un_exemple_senzill_de_dimensionament">Un exemple senzill de dimensionament</h4>

<p>Quan dimensiones el teu text, normalment és una bona idea establir l’atribut base <code>font-size</code> del document en 10 px, de manera que resulta molt més senzill de fer els càlculs, perquè llavors els valors <code>(r)em</code> són la mida de la lletra en píxels dividida per 10, no per 16. A continuació, pots dimensionar fàcilment els diferents tipus de text del document si ho vols. És una bona idea fer una llista de tot el conjunt de regles <code>font-size</code> en una zona determinada del teu full d'estil, i així són fàcils de trobar.</p>

<p>El nostre nou resultat és així:</p>

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

&lt;p&gt;I remember as if 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_exemple_senzill_de_dimensionament', '100%', 220) }}</p>

<h3 id="Estils_i_gruixos_de_lletra_transformacions_i_decoracions_del_text"><span id="result_box" lang="ca">Estils i gruixos de lletra, transformacions i decoracions del text</span></h3>

<p>CSS proporciona quatre propietats comunes per a alterar el gruix visual / l’èmfasi del text:</p>

<ul>
 <li>{{cssxref("font-style")}}: s'utilitza per a activar i desactivar el text en cursiva. Els valors possibles són els següents (rarament es farà servir això, tret que vulgueu desactivar algun estil de cursiva per alguna raó):
  <ul>
   <li><code>normal</code>: Estableix per al text el tipus de lletra normal (activa les cursives).</li>
   <li><code>italic</code>: Estableix per al text l’ús de la <em>versió cursiva del tipus de lletra</em>, si està disponible; si no està disponible, simula la cursiva amb <code>oblique</code>.</li>
   <li><code>oblique</code>: Estableix per al text l’ús d’una versió simulada d'un tipus de lletra en cursiva, creada <em>inclinant la versió normal</em>.</li>
  </ul>
 </li>
 <li>{{cssxref("font-weight")}}: estableix el "pes" del text. Això té molts valors disponibles en cas que hi hagi moltes variants de fonts disponibles (com ara -<em>light</em>, -<em>normal</em>, -<em>bold</em>, -<em>extrabold</em>, -<em>black</em>, etc.), però en una situació realista poques vegades n’usaràs cap, excepte per a <code>normal</code> i <code>bold</code>:
  <ul>
   <li><code>normal</code>, <code>bold</code>: Gruix dels tipus de lletra normal i negreta</li>
   <li><code>lighter</code>, <code>bolder</code>: Estableix la intensitat de negreta en un element un nivell més lleu o més intens que la intensitat de negreta de l'element pare.</li>
   <li><code>100</code>–<code>900</code>: Valors numèrics d'intensitat de negreta que proporcionen un control de gra més fi que les paraules clau anteriors, si cal.</li>
  </ul>
 </li>
 <li>{{cssxref("text-transform")}}: Et permet configurar el tipus de transformació que admet el tipus de lletra. Els valors inclouen:
  <ul>
   <li><code>none</code>: Evita qualsevol transformació.</li>
   <li><code>uppercase</code>: Transforma TOT EL TEXT A MAJÚSCULES.</li>
   <li><code>lowercase</code>: Transforma tot el text a minúscules.</li>
   <li><code>capitalize</code>: Transforma totes les paraules perquè tinguin La Primera Lletra en Majúscula.</li>
   <li><code>full-width</code>: Transforma tots els glifs de manera que s'escriuen dins d'un quadrat d'amplada fixa, similar a un tipus de lletra monoespaiada, i permet l'alineació de, per ex., caràcters llatins juntament amb glifs de llengua asiàtica (com el xinès, el japonès, el coreà).</li>
  </ul>
 </li>
 <li>{{cssxref("text-decoration")}}: Activa/desactiva les decoracions de text en els tipus de lletra (s'utilitza principalment per a desfer el subratllat predeterminat dels enllaços en aplicar-los estil). Els valors disponibles són:
  <ul>
   <li><code>none</code>: Anul·la qualsevol decoració de text ja present.</li>
   <li><code>underline</code>: <u>Subratlla el text</u>.</li>
   <li><code>overline</code>: <span style="text-decoration: overline;">Posa una línia sobre el text</span>.</li>
   <li><code>line-through</code>: Posa una <s style="text-decoration: line-through;">ratlla sobre el text</s>.</li>
  </ul>
 </li>
</ul>

<p>Cal tenir en compte que {{cssxref("text-decoration")}} pot acceptar diversos valors alhora, si vols afegir diverses decoracions alhora; per exemple, <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Tingues en compte que {{cssxref("text-decoration")}} és una propietat abreujada per a {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} i {{cssxref("text-decoration-color")}}. Pots utilitzar les combinacions d'aquests valors de propietat per a crear efectes interessants, per exemple, <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code></span></p>

<p>Observem com afegir un parell d'aquestes propietats al nostre exemple:</p>

<p>El resultat és aquest:</p>

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

&lt;p&gt;I remember as if 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('Estils_i_gruixos_de_lletra_transformacions_i_decoracions_del_text', '100%', 220) }}</p>

<h3 id="Ombres_en_el_text">Ombres en el text</h3>

<p>Pots aplicar ombres al text amb la propietat {{cssxref("text-shadow")}}. Això involucra fins a quatre valors, com es mostra en l'exemple següent:</p>

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

<p>Les quatre propietats són:</p>

<ol>
 <li>El desplaçament horitzontal de la silueta del text original: pot prendre la majoria de les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i grandària</a> disponibles en CSS, però el més convenient és usar <code>px</code>. Aquest valor s'ha d'incloure.</li>
 <li>El desplaçament vertical de la silueta del text original: es comporta bàsicament igual que el desplaçament horitzontal, excepte que mou l'ombra amunt i avall, no a dreta i esquerra. Aquest valor s'ha d'incloure.</li>
 <li>El radi d'esborronat: un valor més alt significa que l'ombra es dispersa més àmpliament. Si aquest valor no s'inclou, el valor predeterminat és 0, que significa que no s’esborrona. Pot prendre la majoria de les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i grandària</a> disponibles en CSS.</li>
 <li>El color base de l'ombra: pot prendre qualsevol <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitat de color CSS</a>. Si no s'inclou, el valor predeterminat és <code>black</code>.</li>
</ol>

<div class="note">
<p><strong>Nota</strong>: Els valors de desplaçament positius mouen l'ombra cap a la dreta i cap avall, però també pots utilitzar valors de desplaçament negatius per a moure l'ombra cap a l'esquerra i cap amunt, com per exemple <code>-1px -1px</code>.</p>
</div>

<h4 id="Ombres_múltiples">Ombres múltiples</h4>

<p>Pots aplicar diverses ombres a un mateix text si inclous més d’un valor d'ombra separats per comes, per exemple:</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 apliquem això a l'element {{htmlelement("h1")}} del nostre exemple de Tommy the cat, obtenim això:</p>

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

&lt;p&gt;I remember as if 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('Ombres_múltiples', '100%', 220) }}</p>

<div class="note">
<p><strong>Nota</strong>: Pots veure més exemples interessants d'ús de <code>text-shadow</code> en l'article de Sitepoint <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p>
</div>

<h2 id="Disseny_de_pàgina_del_text">Disseny de pàgina del text</h2>

<p>Ara que ja coneixem les propietats bàsiques dels tipus de lletra, passem a veure les propietats del text que podem utilitzar que afecten el disseny de pàgina.</p>

<h3 id="Alineació_del_text">Alineació del text</h3>

<p>La propietat {{cssxref("text-align")}} s'utilitza per a controlar com s'alinea el text dins de la caixa que conté els continguts. Els valors disponibles són els següents i funcionen gairebé de la mateixa manera que ho fa una aplicació de processador de text normal:</p>

<ul>
 <li><code>left</code>: Justifica el text a l'esquerra.</li>
 <li><code>right</code>: Justifica el text a la dreta.</li>
 <li><code>center</code>: Centra el text.</li>
 <li><code>justify</code>: Varia els espais entre les paraules perquè totes les línies de text ocupin la mateixa amplada. Cal utilitzar-lo amb cura; pot presentar un aspecte terrible, sobretot quan s'aplica a un paràgraf amb paraules molt llargues. Si fas servir aquesta propietat, has de pensar d’utilitzar-hi també conjuntament alguna altra cosa, com ara {{cssxref("hyphens")}}, per partir les paraules més llargues al final de línia.</li>
</ul>

<p>Si s'aplica <code>text-align: center;</code> a l’{{htmlelement("h1")}} en el nostre exemple, obtenim això:</p>

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

&lt;p&gt;I remember as if 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ó_del_text', '100%', 220) }}</p>

<h3 id="Interlineat">Interlineat</h3>

<p>La propietat {{cssxref("line-height")}} estableix l'alçada que hi ha entre les línies de text. Pot prendre la majoria de les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i grandària</a>, però també un valor sense unitat, que actua com un multiplicador, i generalment es considera l’opció més bona; es multiplica el valor de {{cssxref("font-size")}} i s’obté <code>line-height</code>. El text del <code>body</code> en general es veu més bé i és més fàcil de llegir si les línies estan prou separades. L'alçada de la línia recomanada és d'aproximadament 1,5-2 (doble espai). Per tant, si vols establir les línies de text a 1,6 vegades l'alçada del tipus de lletra, utilitzaries això:</p>

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

<p>Si apliques això als elements {{htmlelement("p")}} del nostre exemple, obtindràs aquest resultat:</p>

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

&lt;p&gt;I remember as if 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('Interlineat', '100%', 250) }}</p>

<h3 id="Espaiat_entre_lletres_i_entre_paraules">Espaiat entre lletres i entre paraules</h3>

<p>Les propietats {{cssxref("spacing-letter")}} i {{cssxref("word-spacing")}} permeten establir l'espaiat entre lletres i l'espaiat entre paraules en el text. No ho faràs amb gaire freqüència, però potser ho trobes útil per a obtenir un cert tipus de presentació o per millorar la llegibilitat d'un tipus de lletra especialment densa. Pot prendre la majoria de les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i grandària</a>.</p>

<p>Així, per exemple, podríem aplicar una mica d’espai entre lletres i espai entre paraules a la primera línia de cada element {{htmlelement("p")}} del nostre exemple:</p>

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

<p>Afegim-ne una mica al nostre exemple, així:</p>

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

&lt;p&gt;I remember as if 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('Espaiat_entre_lletres_i_entre_paraules', '100%', 250) }}</p>

<h3 id="Altres_propietats_que_convé_conèixer"><span id="result_box" lang="ca"><span title="Other properties worth looking at">Altres propietats que convé conèixer</span></span></h3>

<p>Les propietats anteriors et donen una idea de com començar a aplicar estil al text d’una pàgina web, però hi ha moltes altres propietats que es poden utilitzar. Aquí només hem volgut exposar les més importants. Un cop t’hagis acostumat a fer-les servir, també hauries d'explorar les següents:</p>

<p>Estils per als tipus de lletra:</p>

<ul>
 <li>{{cssxref("font-variant")}}: Alterna entre la versaleta i la lletra normal</li>
 <li>{{cssxref("font-kerning")}}: Activa i desactiva les opcions de kerning del tipus de lletra.</li>
 <li>{{cssxref("font-feature-settings")}}: Activa i desactiva diverses característiques dels tipus de lletra <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a>.</li>
 <li>{{cssxref("font-variant-alternates")}}: Controla l'ús de caràcters alternatius per a un tipus de lletra determinat.</li>
 <li>{{cssxref("font-variant-caps")}}: Controla l'ús de caràcters alternatius en majúscules.</li>
 <li>{{cssxref("font-variant-east-asian")}}: Controla l'ús de caràcters alternatius per a textos en caràcters de llengües de l'Àsia oriental, com ara el japonès i el xinès.</li>
 <li>{{cssxref("font-variant-ligatures")}}: Controla les lligadures i les formes contextuals que s'utilitzen en text.</li>
 <li>{{cssxref("font-variant-numeric")}}: Controla l'ús de glifs alternatius per a números, fraccions i marcadors ordinaris.</li>
 <li>{{cssxref("font-variant-position")}}: Controla l'ús de caràcters alternatius de mides més petites posicionades com superíndex o subíndex.</li>
 <li>{{cssxref("font-size-adjust")}}: Ajusta la mida visual del tipus de lletra independentment de la mida real de la lletra.</li>
 <li>{{cssxref("font-stretch")}}: Alterna entre versions espaiades alternatives possibles d'un tipus de lletra donat.</li>
 <li>{{cssxref("text-underline-position")}}: Especifica la posició dels subratllats amb el valor <code>underline</code> de la propietat <code>text-decoration-line</code>.</li>
 <li>{{cssxref("text-rendering")}}: Intenta aconseguir una optimització de la presentació del text.</li>
</ul>

<p>Aplicació d’estil al text per al disseny de pàgina</p>

<ul>
 <li>{{cssxref("text-indent")}}: Especifica quant d’espai horitzontal s'hauria de deixar abans del començament de la primera línia del contingut del text.</li>
 <li>{{cssxref("text-overflow")}}: Defineix com s’indica als usuaris el contingut desbordat que no es mostra.</li>
 <li>{{cssxref("white-space")}}: Defineix com es tracten els espais en blanc i els salts de línia associats dins de l'element.</li>
 <li>{{cssxref("word-break")}}: Especifica si vols partició de paraules entre línies.</li>
 <li>{{cssxref("direction")}}: Defineix la direcció del text (això depèn de l’idioma i, en general, és millor deixar que HTML s’encarregui d’aquesta part, perquè va associada al contingut del text).</li>
 <li>{{cssxref("hyphens")}}: Activa i desactiva la partició de paraules per als idiomes admesos.</li>
 <li>{{cssxref("line-break")}}: Relaxa o força la partició de línies per a les llengües asiàtiques.</li>
 <li>{{cssxref("text-align-last")}}: Defineix com s'alinea l'última línia d'un bloc o una línia, just abans d'un salt de línia forçat.</li>
 <li>{{cssxref("text-orientation")}}: Defineix l'orientació del text en una línia.</li>
 <li>{{cssxref("word-wrap")}}: Especifica si el navegador pot partir o no paraules entre línies per a evitar desbordaments.</li>
 <li>{{cssxref("writing-mode")}}: Estableix si les línies de text estan en horitzontal o vertical, i en quina direcció flueixen les línies posteriors.</li>
</ul>

<h2 id="Propietat_abreujada_per_al_tipus_de_lletra">Propietat abreujada per al tipus de lletra</h2>

<p>També es poden establir moltes propietats de tipus de lletra amb la propietat abreujada {{cssxref("font")}}. S’escriuen en l’ordre següent:  {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} i {{cssxref("font-family")}}.</p>

<p>Entre totes aquestes propietats, només es requereixen <code>font-size</code> i <code>font-family</code> quan s'utilitza la propietat abreujada <code>font</code>.</p>

<p>S'ha d'incloure una barra diagonal entre les propietats {{cssxref("font-size")}} i {{cssxref("line-height")}}.</p>

<p>Un exemple complet tindria un aspecte com aquest:</p>

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

<h2 id="Aprenentatge_actiu_Jugar_amb_els_estils_de_text"><span id="result_box" lang="ca">Aprenentatge actiu: Jugar amb els estils de text</span></h2>

<p>En aquesta sessió d'aprenentatge actiu, no et proposem de fer cap exercici específic: et proposem que juguis amb algunes propietats del tipus de lletra i el text aplicades al disseny de pàgina i observis què ets capaç de crear. Pots fer-ho usant els fitxers HTML/CSS fora de línia, o pots introduir el teu codi en l'exemple editat en viu a continuació.</p>

<p>Si t’equivoques, sempre pots tornar a l’inici amb el botó <em>Reinicia</em>.</p>

<div class="hidden">
<h6 id="Codi_executable">Codi executable</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");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");

var styleElem = document.createElement('style');
var 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('Codi_executable', 700, 800) }}</p>

<h2 id="Resum"><span id="result_box" lang="ca">Resum</span></h2>

<p>Esperem que hagis gaudit jugant amb el text d’aquest article! L’article següent t’explicarà tot el que has de saber sobre l’aplicació d'estil a llistes HTML.</p>

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