Resumen: Entrega nº44 del Tutorial básico del programador web: CSS desde cero.
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.

css

 

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 acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

 

Descargar archivo: