Regles generals d'estil del text

L'arxiu m3p1.html mostra una representació d'un document de text per defecte del navegador. No conté cap estil, per la qual cosa les diferents seccions i subseccions, els paràgrafs, les cites i els diferents elements en línia no tenen cap comportament visual i adpoten el full d'estil mínim que proporciona el navegador. A la pràctica anterior s'ha vist la manera correcta d'estructurar el text d'un document web, de manera que sigui vàlid segons les recomanacions del W3C i, per tant, permeti una major accessiblitat des de qualsevol navegador o dispossitiu.

A partir d'ara es veuran les diferents regles de CSS, que proporcioaran al document web un estil visual bàsic, i per tant, alteraran la presentació que el navegador mostra per defecte.

Amb les regles del CSS es pot modificar, entre moltes altres coses, la font del text, la seva mida, el seu color, el fons,..., sense que es modifiqui la seva estructura.

Heu de tenir molt present un dels principis de la W3C i d'aquest curs: separar la forma, el disseny, de l'estructura del document. D'aquesta manera, el document, independentment del seu aspecte visual, serà sempre accessible.

En aquesta pràctica es veuran un conjunt de regles bàsiques que afecten al comportament visual del text. En les pràctiques següents es veuran exemples dels diferents elements en bloc i en línia, amb la intenció de millorar el seu aspecte visual, utilitzant l'arxiu m3p1.html com a punt de partida.

Fonts

Una de les primeres regles a definir en l'estil del document és la que determina la tipografia del text o la família de la font. La propietat CSS que permet especificar el tipus de font del document és font-family. La manipulació de la tipografia des dels fulls d'estil és una gran eina pel disseny visual del document, especialment pel que fa referència a un augment de la llegibilitat, però presenta una sèrie de limitacions:

Existeixen cinc grans famílies de fonts, conegudes també com a fonts genèriques:

Serif
Inclou aquelles fonts que tenen un petita terminació als extrems (serif), que fa com de suport. És una tipografia que afavoreix la llegibilitat i es fa servir molt per a textos de lectura.
Sans-serif
Inclou aquelles fonts que no tenen cap terminació al extrems, com les de la família anterior. D'aqui li ve el nom, del terme francès sans, que vindria a significar sense serif. Es veuen més clarament en pantalla que les anteriors, però cansen més quan es tracta de llegir text imprés.
Monospace
Inclou aquelles fonts en que l'amplada dels seus caràcters és sempre igual, és a dir, l'amplada del caràcter m és idèntic al del caràcter i. És una família de fonts utilitzada especialment per representar les línies de codi o llenguatges de programació.
Cursiva
Inclou aquelles fonts que volen representar un disseny smilar al manuscrit, imitant l'escriptura ràpida de notes escrites a mà, d'aquí la inclinació i concatenació dels caràcters.
Fantasia
Inclou qualsevol font que no es trobi inclosa en cap de les famílies descrites anteriorment.

Obrint al navegador l'arxiu m3p3_1.html podreu veure les diferències visuals de cadascuna de les famílies de fonts. S'ha utilitzat una classe (class) com a regla d'estil que permeti afectar a més d'un element del document:

.sans-serif {
   font-family: sans-serif;
}

Tant l'etiqueta p de paràgraf com la h2 de capçalera de nivell 2, comparteixen una mateixa regla:

<h2 class="sans-serif">Lorem Ipsum</h2>
<p class="sans-serif">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris ut magna. Vestibulum massa nunc, condimentum nec, 
dapibus in, dapib ... mattis lorem.</p>

captura m3p3_1.png

Vista de l'arxiu m3p3_1.html

De moment definireu un tipus o família de font pel cos del document, body, que afecti a la totalitat del text, i, més endavant anireu especificant d'altres tipus de font per a elements concrets.

El valor de la propietat font-family pot incloure un únic tipus o família de font, o bé més d'una de diferents, sempre separades entre elles per una coma. El fet de definir més d'una font o família de fonts per la propietat font-family, planteja al navegador una jerarquia de valors, de la que prendrà el primer com a font a utilitzar en la visualització del document, però tindrà una o vàries alternatives en el cas de no trobar la font assignada com a principal. Tradicionalment, s'utilitzen els primers valors per a fonts específiques i, la resta, per a fonts genèriques que s'aproximin visualment a la primera.

Veieu el següent exemple que s'utilitzarà a l'arxiu m3p3_2.html: 

body {
	font-family: "Trebuchet MS", arial, helvetica, sans-serif;
}

Per ordre de preferència, s'ha situat en primer lloc una font específica, Trebuchet MS, seguida d'altres fonts que, en el cas d'arial o helvetica, representen un grup de fonts. Finalment, s'ha especificat una família de fonts, sans-serif, per l'hipotètic cas que el navegador no disposi de les fonts precedents i mostri la web amb algunes de les fonts d'aquesta família disponibles al seu ordinador.

captura m3p3_2.png

Vista de l'arxiu m3p3_2.html

Color de la font i color de fons

Tant el color de la font com el color de fons, no són propietats específiques del text.

De moment determinareu el color blanc(#fff) com a color de fons i un gris fosc com a color de la font, per a tot el text del document. Més endavant s'aniran especificant colors a determinats element.

body {
	font-family: "Trebuchet MS", arial, helvetica, sans-serif;
	background-color:#fff;
	color: #333;
}

Mida de la font

Per defecte, els navegadors representen el text a 16px, una mida força gran, i, generalment, visualment poc atractiva. Aquest valor per defecte es pot modificar mitjançant la propietat font-size del cos (body) de la pàgina, que es prendrà també com a base per a la representació de la resta d'elements (h1,h2,h3, p,...). Veieu el següent exemple:

body {
	font-family: "Trebuchet MS", arial, helvetica, sans-serif;
	background-color: #f8f8f8; 
	color: #333;
	font-size: 0.9em; 
}

Obriu l'arxiu m3p3_3.html per a comprovar els canvis.

captura m3p3_3.png

Vista de l'arxiu m3p3_3.html

Distància vertical entre línies

La propietat line-height defineix la distància vertical entre dos línies prenent coma a referent la part inferior de un tipus de caràcter no descendent, és a dir, es prendrà com a referència una o enlloc d'una q. Les unitats de mesura que es poden utilitzar són idèntiques a les que determinen la mida de la font o, en el cas d'assignar un valor numèric, per exemple, 3, sense especificar la unitat de mesura, la distància entre línia serà la resultant de multiplicar el valor 3 pel valor de la mida de la font (font-size).

S'ha incorporat el valor 2 a la distància vertical entre línies. D'aquesta manera s'aconsegueix que el text sigui més llegible:

body {
	font-family: "Trebuchet MS", arial, helvetica, sans-serif;
	background-color: #f8f8f8; 
	color: #333;
	font-size: 0.9em; 
	line-height: 2;
}

Per acabar, determinareu un límit en l'amplada del document de 700 px i un marge respecte a l'esquerra dels límits de la pantalla de 30 px (recordeu que esteu modificant el cos del document):

body {
	width: 700px;
	margin-left: 30px;
	font-family: "Trebuchet MS", arial, helvetica, sans-serif;
	background-color: #f8f8f8; 
	color: #333;
	font-size: 0.9em; 
	line-height: 2;
}

Obriu l'arxiu m3p3_4.html per veure el resultat.

captura m3p3_4.png

Vista de l'arxiu m3p3_4.html

Fins aquí s'han vist vàries propietats generals de l'estil visual del text. En les pràctiques següents es veurà la manera de precissar més l'aspecte visual dels diferents elements textuals de bloc i de línia, amb la finalitat de millorar encara més la presentació.

Tornar a l'inici de la pràctica

Valid XHTML 1.0 Strict Valid CSS Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0