Al comenzar a aplicar estilos al sitio, comenzaremos por lo más general e iremos hasta lo más concreto. Y lo más genérico es el estilo del texto.
La mayoría de los visitantes no leen todo el texto, echan un vistazo por encima buscando lo que les interesa. Es muy importante que el texto sea claramente legible, para lo que tenemos que tener en cuenta ciertas cosas:
Nota: Vamos ir haciendo cambios en la hoja de estilo del sitio de ejemplo. Es conveniente que los vayas realizando y viendo cómo queda en el navegador, con las páginas que tenemos hasta ahora.
Tipo de fuente. Ya comentamos al hablar del estilo básico del texto que con la propiedad font-family
nos permitía asignar una o varias fuentes al texto. Debemos de escoger una fuente que se lea fácilmente, y que sea común, para que el usuario la tenga instalada. Mientras que en el texto impreso es habitual el uso de fuentes con serifa (Times New Roman, serif), al tener menor resolución en los monitores se leen mejor las fuentes sin serifa, como Verdana, Arial, o la genérica sans-serif.
En nuestro ejemplo, vamos a utilizar la fuente Verdana. Aunque es común, puede que el navegador no la tenga. En ese caso, indicaremos que utilice Arial, muy parecida y más común. Y si tampoco la tiene, que utilice la fuente sin serifa genérica del navegador. Por lo tanto, en la hoja de estilo declaramos el selector body
, que contendrá todo el texto, y le asignamos la propiedad font-family: Verdana,Arial,sans-serif;
.
Tamaño de la fuente. Con el tipo de fuente ya seleccionado, ya que hay fuentes más pequeñas que otras, podemos elegir el tamaño. Es obvio que un tamaño muy pequeño dificultará la lectura. Tampoco utilizaremos una fuente excesivamente grande para el texto. Lo normal son 12px para arriba, siempre que el diseño lo permita. Las recomendaciones en cuanto a usabilidad aconsejan expresar estos tamaños como relativos, utilizando em o %. Si no al body, al resto de elementos. Esto permite que después, con sólo cambiar el tamaño de la fuente del body, cambie proporcionalmente el de todos los elementos, y no resulta difícil permitir que el visitante adapte esto a su gusto.
En nuestro ejemplo, hemos optado por darle a la fuente en general un tamaño de 15px, añadiendo al selector body la propiedad font-size:15px;
. También hemos controlado el tamaño de los títulos, esta vez con valores porcentuales, definiendo los estilos h1 {font-size: 180%;}
y h2 {font-size: 150%;}
. También tendrá un tamaño distinto el pie de la página. Para diferencialo, creamos una nueva regla de estilo, para la clase div.pie. El estilo para la nueva clase será div.pie {font-size: 85%;}
.
Para que se refleje, debemos de asignarle la clase al div. Para hacerlo con KompoZer, hacemos clic en el contenido del pie, y en la barra de estado, hacemos clic derecho sobre la etiqueta div. En el menú, elegimos clases → pie.
Color del texto. Para que el texto sea legible, debe de haber un buen contraste entre el color del texto y el color de fondo. Lo que más cómodo resulta de leer es un texto oscuro sobre un fondo claro. Tampoco se lee bien el texto sobre una imagen con varios colores.
Texto de ejemplo - Texto de ejemplo - Texto de ejemplo - Texto de ejemplo - Texto de ejemplo
Además, debemos de seguir cierta armonía, ya que hay colores que al combinarlos pueden resultar demasiado intensos o casi molestos, sobre todo en textos amplios.
Texto de ejemplo - Texto de ejemplo - Texto de ejemplo - Texto de ejemplo - Texto de ejemplo
Al final, elegir un color u otro acaba siendo una cuestión de gusto.
En nuestro ejemplo, vamos a utilizar uno de los tonos marrones oscuros de nuestra paleta para el texto en general, el color #735846. Así que le añadimos al body
la propiedad color: #735846;
. Para los encabezados, vamos a elegir un color un poco más llamativo, que tenga más energía. Nos decantamos por un marrón anaranjado de la paleta, #D38451. Por tanto, añadimos la propiedad color: #D38451;
a los selectores h1
y h2
.
Espacios. Un texto muy comprimido no invita a leerlo. Hay que dejarlo espaciado. Para ello es importante dejar separación (margin
o padding
) entre el texto y otros elementos, como imágenes, y entre párrafos. Tampoco deben de estar muy pegadas las líneas del párrafo. Esto lo podemos regular con la propiedad line-height
.
En nuestro ejemplo, ya iremos regulando el margen de los distintos elementos cuando se vaya complicando el estilo. Pero si vamos a separar un poco las líneas de los párrafos. Definimos un nuevo selector, p
, y le aplicamos la propiedad line-height: 1.5em;
, utilizando valores relativos al tamaño del texto.
Alineación. Es importante alinear correctamente el texto, lo que podemos hacer con la propieada text-align
. Por defecto, está alineado a la izquierda (text-align: left;
), aunque en párrafos con poco texto, como el pie, suele quedar mejor centrado (text-align: center;
). Cuando hay mucho texto, suele haber muchos saltos de línea, como en las columnas. En este caso, queda mejor el texto justificado (text-align: justify;
).
En nuestro ejemplo, por lo general tendremos el texto justificado. Por lo que añadiremos al selector body
esta propiedad. El texto del pie (div.pie
) lo centraremos.
De momento, la hoja de estilo de nuestro ejemplo tiene este aspecto:
body { font-family: Verdana,Arial,sans-serif; font-size: 15px; color: #735846; text-align: justify; } h2 { font-size: 150%; color: #d38451; } h1 { font-size: 180%; color: #d38451; } p { line-height: 1.5em; } div.pie { font-size: 80%; text-align: center; }
Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.