Codificación aprenderaprogramar.com: CU01044D
TIPOGRAFÍA CSS
Continuamos viendo posibilidades que ofrece CSS en relación a los textos. Un aspecto importante de los textos es el tipo de letra que usan y cómo se configura la letra. Hay distintas propiedades para configurar la tipografía, entre ellas font-size, font-weight y font-style.
PROPIEDAD FONT-SIZE
| PROPIEDAD CSS font-size | |
| Función de la propiedad | Permite establecer el tamaño de letra. |
| Valor por defecto | medium |
| Aplicable a | Todos los elementos |
| Valores posibles para esta propiedad | Una unidad de medida absoluta o relativa (incluido %, en cuyo caso el cálculo se hace respecto al tamaño de letra del elemento padre) permitida en CSS |
| Una palabra clave: xx-small, x-small, small, medium, large, x-large, xx-large donde medium es el tamaño por defecto que aplica el navegador. | |
| Una palabra clave: larger ó smaller, que significa más grande o más pequeño que el tamaño de letra del elemento padre. | |
| inherit (se heredan las características del elemento padre). | |
| Ejemplos aprenderaprogramar.com |
#content1 {font-size: 20px;} .elementoJukeBox {font-size: small;} |
Cuando se usan las unidades em y ex para fijar el tamaño de letra, el cálculo de éste se hace respecto al tamaño de letra del elemento padre. En cambio cuando se usa em y ex en otro contexto, el tamaño de letra que se toma como referencia es el del propio elemento.
Hay que tener en cuenta que al aplicar font-size se pueden estar modificando dimensiones de otros elementos de la página web debido a que hay unidades de medida como em y ex que toman como referencia el tamaño de letra.
Si establecemos como tamaño de letra en el elemento body un valor como 12 píxeles, entonces 1 em serán 12 píxeles, 2 em serán 24 píxeles y así sucesivamente. Si no se ha establecido un valor de tamaño de letra, entonces 1 em corresponde al valor del tamaño de letra por defecto que use el navegador (que normalmente es de 16 píxeles).
Usar tamaños de letra relativos basados en em ó en palabras clave puede ser interesante, puesto que nos permitirán cambiar la apariencia de toda la página web variando el tamaño de fuente de referencia a través de su definición en el elemento body.
Algunos programadores y diseñadores web usan una técnica consistente en establecer el tamaño de fuente en body en el 62.5% (de 16 px) que son 10 px de modo que 1 em serán 10 px. En el resto de elementos usan valores en em cuya correspondencia en píxeles es directa, ya que 1 em serán 10px, 1.2 em serán 12px, 1.6em serán 16px y así sucesivamente.
Los títulos suelen tener una equivalencia similar a la que mostramos a continuación.
|
Tipo de título |
Palabra clave |
Píxeles |
em (*) |
|
h1 |
xx-large |
24 |
1.5 |
|
h2 |
x-large |
22 |
1.375 |
|
h3 |
large |
18 |
1.125 |
|
h4 |
medium |
16 |
1 |
|
h5 |
small |
12 |
0.75 |
|
h6 |
xx-small |
10 |
0.625 |
(*) Tener en cuenta que el valor de un em es cambiante si se modifica el tamaño de fuente de referencia.
PROPIEDAD FONT-WEIGHT
| PROPIEDAD CSS font-weight | |
| Función de la propiedad | Permite establecer el grosor de letra. |
| Valor por defecto | normal |
| Aplicable a | Todos los elementos |
| Valores posibles para esta propiedad | Un valor numérico múltiplo de 100 comprendido entre 100 y 900 |
| Una palabra clave: normal (equivale a 400), bold (equivale a 700), bolder (indica “más grueso que el grosor de fuente del elemento padre”), lighter (indica “menos grueso que el grosor de fuente del elemento padre”). | |
| inherit (se heredan las características del elemento padre). | |
| Ejemplos aprenderaprogramar.com |
#content1 {font-weight: bold;} .elementoJukeBox {font-weight: 300;} |
Algunas fuentes sólo permiten los valores normal y bold. En este caso cualquier valor entre 100 y 500 se consideraría normal y cualquier valor entre 600 y 900 se consideraría bold.
PROPIEDAD FONT-STYLE
Esta propiedad es una propiedad sencilla que permite poner una fuente en cursiva (italic) o en oblícuo (oblique), siempre que la fuente que esté en uso lo permita (no todas las fuentes permiten la cursiva por ejemplo).
La cursiva y la oblícua son muy similares, de hecho a veces ni se distinguen. La diferencia entre ambas está en que la cursiva usa caracteres parecidos a los de la fuente original, pero distintos, mientras que la oblícua utiliza los mismos caracteres que la fuente original pero ligeramente inclinados.
El valor por defecto para esta propiedad es ‘normal’ y sus valores posibles ‘normal’, ‘italic’ y ‘oblique’. Un ejemplo de aplicación sería este: p.italic { font-style:italic }
EJERCICIO
Elige dos navegadores distintos y rellena la siguiente tabla para cada uno de ellos.
|
Tipo de título |
Píxeles |
em |
|
h1 |
||
|
h2 |
||
|
h3 |
||
|
h4 |
||
|
h5 |
||
|
h6 |
Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
