Simple CSS: Creación de texto más legible

Simple CSS: Creación de texto más legible
por David Rodríguez - 21 de abril 2008

La tipografía es una parte importante del diseño Web. Al igual que en el mundo de la impresión, su contenido debe ser legible por los espectadores para que pueda ser de alguna utilidad. Como regla general, usted quiere asegurarse de que su sitio web ofrece la menor resistencia posible al usuario y el sitio es más fácil de leer, mejor. CSS proporciona tres propiedades muy útiles para mejorar la legibilidad de su sitio: la fuente, la línea de altura, y la letra de espaciado.
Una página de muestra de

Ya tienes pagina web? Diseña tu sitio web facil y rapido con el programa mas novedoso y facil de usar, visita okhosting.com web hosts en mexico, dominios y paginas web, los planes completos con hospedaje web o host de 50 megas, pagina web y registro de tu nombre en internet, ejem: www.tu-dominio.com y MX, ademas te incluimos cuentas de correo electronico ilimitadas y ayuda para cualquier duda que tengas en la creacion de tu sitio web, visita ahora www.okhosting.com y sal a la luz de la internet.

Vamos a comenzar con una página web de muestra pequeños. Puedes verlo aquí. Esta página utiliza un diseño pequeño, bastante estándar con algunas bajas colores clave para ayudar a destacar el contenido. Este es un buen uso del diseño y el color si el sitio se inscribe en el "contenido es el rey" categoría (y la mayoría de los sitios lo hacen), especialmente si su contenido se compone de los artículos u otros bloques de texto largos, como un blog.

Lo que hay que notar aquí es que el texto hace su trabajo: se comunica un mensaje y el usuario puede abandonar después de haber consumido su contenido. Pero el texto es el mismo en toda la página, con la excepción de un cambio de color en la subpartida pequeñas por debajo del texto del encabezado y el posicionamiento de la misma. Aquí está la CSS que está siendo utilizado en la página de muestra.

body (
text-align: center;
margin: 0;
padding: 0;
background-color: # 363942;
color: # 382513;
)

# container (
margin: 15px auto;
text-align: left;
background-color: # D8CAA8;
border: 1px solid # 4B1E18;
padding: 0px;
width: 850px;
)

body (
height: 80px;
border-bottom: 1px solid # 284907;
margin-bottom: 15px;
padding: 15px;
)

# header h1 (
position: relative;
vertical-align: center;
color: # 382513;
margin-bottom:-10px;
)

. subpartida (
color: # 284907;
)

# sidebar (
border-left: 1px solid # 8FB65F;
margin: 0 0 15px 15px;
padding: 0px 15px 15px 15px;
float: right;
width: 175px;
)

# content (
padding: 0 15px;
)

# footer (
claro: los dos;
border-top: 1px solid # 284907;
padding: 15px;
margin-top: 15px;
)

Selección de las fuentes

Para facilitar la lectura, nos querrá elegir una fuente que se ve bien con los colores que hayas elegido y en el tamaño que planea realizar un texto. Típicamente, un no-serif es conveniente que el contenido principal, mientras que los encabezados se benefician de la vistosidad añadido de serif. Si usted viene de un fondo de impresión, esto puede sonar hacia atrás. Por lo general, en el mundo de la impresión, remates son los preferidos para los bloques de texto, porque el serifas ayudan al ojo distinguir cada línea. Sin embargo, los sistemas operativos modernos tienen opciones para suavizar los bordes de las fuentes de pantalla automáticamente, de manera no-serif salido mejor aspecto como el contenido principal y serif se ven bien en pequeñas dosis.

Con esto en mente, voy a utilizar una de mis frases favoritas cuando se trata de CSS y las fuentes:

font-family: Arial, Helvetica, sans-serif;

Estas fuentes son algunos de los más seguros que puede utilizar en su diseño, y si la compatibilidad entre navegadores es una preocupación, memorizarlas. Son buenos para usar por su cuenta, o puede utilizar como punto de partida para su texto no serif. En este caso, para simplificar, me voy a quedar con sólo estos tres para el contenido. La sección del cuerpo de la CSS ahora se ve así:

body (
font-family: Arial, Helvetica, sans-serif;
text-align: center;
margin: 0;
padding: 0;
background-color: # 363942;
color: # 382513;
)

Y con ese pequeño cambio, la legibilidad del conjunto de la página ha cambiado ligeramente a mejor: ver por sí mismo.

El ligero cambio es bueno, pero todos los de la fuente sigue siendo la misma familia y esto crea un mal tipo de uniformidad. Queremos una distinción pasando aquí, así que vamos a poner nuestras partidas y subpartidas del resto del contenido. Vamos a pasar por alto el H1 en la parte superior un poco, ya que querrá hacer algo un poco diferente con el que en un segundo.

Por el subtítulo y el título en el contenido, voy a estar utilizando un tipo serif. Al igual que anteriormente, esta línea siguiente es probablemente una de mis favoritas:

font-family: Georgia, "Times New Roman", Times, serif;

Una vez más, estas son algunas de las más seguras fuentes que puede utilizar en Diseño Web, incluso si es sólo un punto de inicio y planea expandir su tipografía un poco más tarde. Reserva de esta línea para los jefes y otros lugares en los que se vería bien en pequeñas dosis, el ojo tiene un tiempo de lectura más difícil serif en una pantalla que los no-serif para bloques enteros de texto serif puede ser impactante.

Así que ahora, nuestra clase subpartida se parece a esto:

. subpartida (
color: # 284907;
font-family: Georgia, "Times New Roman", Times, serif;
)

Y tenemos que crear una nueva regla para las etiquetas H2 en la sección de contenido. Lo hacemos de esta manera:

# content h2 (
font-family: Georgia, "Times New Roman", Times, serif;
)

Bien, ahora la información del encabezado es más separada del contenido, lo cual es bueno. Echa un vistazo aquí.

Ahora, ¿qué hay que h1 cabecera que tenemos en la parte superior de la página? Vamos a hacerlo más grande y le dan menos contraste con el fondo. Esto es para que los usuarios sepan lo que están en el sitio, pero no se distraiga con el encabezado.

Lo haremos con este código:

color: # 6B5846;
font-size: 48px;

Y el encabezado completo h1 regla dice lo siguiente:

# header h1 (
position: relative;
vertical-align: center;
color: # 6B5846;
margin-bottom:-10px;
font-size: 48px;
)

Usted puede ver el encabezado vez aquí.

Ahora dirigimos nuestra atención hacia la barra lateral y pie de página. El texto de la estos lugares es el mismo que el cuerpo del texto en el área de contenido principal. La barra lateral y el pie en general juega un papel secundario, por lo que les vamos a dar más pequeños de texto y una familia de fuentes diferentes, con una regla única fuente:

font: 12px Verdana;

Ahora, nuestra barra lateral y divs pie de página tiene la CSS:

# footer (
claro: los dos;
border-top: 1px solid # 284907;
padding: 15px;
font: 12px Verdana;
margin-top: 15px;
)

# sidebar (
border-left: 1px solid # 8FB65F;
margin: 0 0 15px 15px;
padding: 0px 15px 15px 15px;
float: right;
width: 175px;
font: 12px Verdana;
color: # 5A4735;
)

Ahora, el texto contenido se siente un poco abrumador. Vamos a reducir su tamaño con esto:

font-size: 15px;

Y lo pondremos en la norma de contenido, por lo que ahora se lee:

# content (
padding: 0 15px;
font-size: 15px;
)

Y ahora tenemos nuestra quinta iteración de la página CMRT. Hemos tomado algunos pasos en asegurarse de que las diferentes secciones de nuestro sitio cada uno tiene su propia mirada y sensación, mientras que todavía se sentía unificado. Ahora, podemos dar un paso más con la propiedad line-height.
line-height - Sé bueno con tus visitantes!

Sus visitantes están allí para ver cualquier contenido que tienen en su sitio web. Han venido a verte y que son tus invitados! Tratarlos bien. Usted no quiere forzar sus ojos al ver tu página. Utilice la línea de altura para que el texto más legible. Adición de altura más la línea a su texto aumenta la cantidad de espacio entre cada línea, y ayuda a los ojos hacen que saltan mientras se mueve por su contenido.

Nosotros le daremos el div contenido de una altura de línea de 160%, lo cual le da 60% de la altura más línea de lo que normalmente tiene, basado en el tamaño de la fuente. Esta es una cantidad decente de la altura de la línea y le da al texto un espacio para respirar. Para la barra lateral, ya que el texto es más pequeño, sólo voy a dar una altura de línea de 140%. Así que, ahora nuestro contenido y CSS barra lateral son los siguientes:

# content (
padding: 0 15px;
font-size: 15px;
line-height: 160%;
)

# sidebar (
border-left: 1px solid # 8FB65F;
margin: 0 0 15px 15px;
padding: 0px 15px 15px 15px;
float: right;
width: 175px;
font: 12px Verdana;
line-height: 140%;
color: # 5A4735;
)

Y con esto, el texto adquiere un aspecto mucho más agradable. Ver aquí. Los ojos no tienen que trabajar tan duro para leer el texto ahora, por lo que es más fácil para sus visitantes de consumir su contenido.
Ajuste de espacio entre las letras

Sólo hay un par de lugares donde espaciamiento de la letra entra en juego con esta página, pero también puede desempeñar un papel en el aumento de la legibilidad de su sitio y ayudar a que cada elemento de la página más clara. Los encabezados y las partidas suelen ser buenos candidatos para el espaciamiento de la letra. Desde un punto de vista del diseño, puede utilizar espacio en su carta el texto de cabecera para añadir algunas imágenes más adecuadas a la página, como vamos a hacer en el div encabezado con esto:

letter-spacing: 20px;

Esto aumenta el espacio entre las letras de su texto por 20px. 20px es un número grande de texto normales, pero para el encabezado en la parte superior de la página, que está a sólo 4 letras, que le ayuda a estirar a ser casi tan ancha como la subpartida debajo de ella, dándole más de un encabezado de sentir.

Para las partidas (de las etiquetas H2) en el contenido de la página, vamos a aumentar la carta de separación por sólo 2px. Esto dará los títulos más destacados se siente y separar aún más a partir del texto, y el ajuste es de menor importancia suficiente como para que no se distraiga de la lectura:

letter-spacing: 2px;

Así que la cabecera H1 y H2 CSS de nuestro contenido CSS de ahora este aspecto:

# header h1 (
position: relative;
vertical-align: center;
color: # 6B5846;
margin-bottom:-10px;
font-size: 48px;
letter-spacing: 20px;
)

# content h2 (
font-family: Georgia, "Times New Roman", Times, serif;
letter-spacing: 2px;
)

Usted puede ver lo que todo parece cuando se hace bien aquí.
Ampliando este CSS

Hay un montón de maneras diferentes que usted puede aplicar estas propiedades, también. Para el diseño de la página a propósito utilizó un diseño sencillo y más intuitivo para poder centrarse en el texto, ya que cambió durante los pasos anteriores, pero aplicando este tipo de CSS en el diseño mucho más dinámico y elegante, puede mejorar drásticamente su efecto sobre la a sus visitantes. No tengo la intención de "embellecer" la página de ejemplo CMRT, y si lo hago, será por un artículo totalmente separados, pero si deseas tomar una grieta en lo que se vea más bonita, preservando la fuente y texto los ajustes, me golpeó y vamos a hablar de ello.

Manténgase sintonizado para más de la serie Simple CSS!