martes, 24 de noviembre de 2009

Interlineado, separación entre palabras y entre caracteres en CSS

Existen diversas formas y atributos en CSS para el control de los textos, y dado que el 90% del contenido de una página son textos, la especial atención al control de la tipografía puede redundar en un mejor diseño o una mejor lectura.
Para diferenciar entre las propiedades básicas que gestionan las fuentes bastará con identificar entre elementos horizontales y verticales.

Los elementos horizontales son aquellos que incluyen el espacio entre las letras y las palabras. Los valores valores verticales únicamente incluye el inter lineado.

Valores horizontales
Para el caso del espacio entren palabras se controla con word-spacing y se puede usar cualquier unidad, ademas de valores negativos.

Un ejemplo sería:
<div style="word-spacing: 5px;">parrafo</div>
word-spacing:5px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros turpis, condimentum vel commodo a, suscipit sed arcu. Etiam a enim eget enim iaculis ultrices sed a tortor. Nam tempus neque id lectus ultricies commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

word-spacing:30px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros turpis, condimentum vel commodo a, suscipit sed arcu. Etiam a enim eget enim iaculis ultrices sed a tortor. Nam tempus neque id lectus ultricies commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Para el caso del espacio entre letras usaremos letter-spacing, el espacio entre letras se incluye el espacio entre palabras.
<div style="letter-spacing: 5px;">parrafo</div>

letter-spacing:5px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros turpis, condimentum vel commodo a, suscipit sed arcu. Etiam a enim eget enim iaculis ultrices sed a tortor. Nam tempus neque id lectus ultricies commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

letter-spacing:10px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros turpis, condimentum vel commodo a, suscipit sed arcu. Etiam a enim eget enim iaculis ultrices sed a tortor. Nam tempus neque id lectus ultricies commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Valores verticales
Para el caso de separación vertical o interlineado entre palabras, usaremos line-height, dependiendo del navegador y la unidad empleada (por ejemplo em) puede dar resultados imprevistos, la única recomendación es usarlo en párrafos. En titulares y balazos de texto corto es recomendable preferir padding y margin,

Line-height compite por el espacio disponeble en la parte superior e inferior del texto y no todos los navegadores lo interpretan de la misma forma Opera es un caso de estudio que por lo general tiene problemas con esta propiedad

Aunque por lo general se usa em para Line-height, prefieran el uso de unidades absolutas tanto asignado al tamaño de la fuente font-size, como a line-height o bien, si no hay remedio y usan unidades relativas ambas propiedades, font-size y line-height deberan ser relativas.

<div style="line-height:10px;">parrafo</div>

line-height:10px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros turpis, condimentum vel commodo a, suscipit sed arcu. Etiam a enim eget enim iaculis ultrices sed a tortor. Nam tempus neque id lectus ultricies commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

line-height:30px;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros turpis, condimentum vel commodo a, suscipit sed arcu. Etiam a enim eget enim iaculis ultrices sed a tortor. Nam tempus neque id lectus ultricies commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

4 comentarios:

  1. olaaaa,por q no hay palabras con div les aviso q pongan palabras con div,gracias por su comprensión,chau.

    ResponderEliminar
  2. Gracias por el tip!! muy útil..

    ResponderEliminar
  3. Gracias estaba necesitando el código para interlineado!

    ResponderEliminar

La leyenda de Korra Libro 4 (2014) "Reunión" Reseña y critica

La leyenda de Korra Book 4Korra se reune con Mako y Asami... muy romántico encuentro. Mientras Bolin tiene que pararse en frente de sus enemigos para defender a los débiles y convertirse en el héroe del momento.

[Leer artículo...]

Guardianes de la galaxia (2014): Review y crítica

Guardianes de la galaxia (2014) reseña y criticaY llega una nueva adaptación de personajes del universo marvel, una divertida aventura espacial.

[Leer artículo...]

Los caballeros de Zodiaco: La leyenda del Santuario (2014): Reseña y crítica

Los caballeros de Zodiaco: La leyenda del Santuario (2014)Seiya y sus amigos para una aventura en 3D para convatir al malvado Santuario y traer la justicia de Atena.

[Leer artículo...]

Tortugas Ninja (2014): Reseña y crítica de la película

Las tortugas ninja 2014Nada bueno puede salir de Michael Bay, pero cuando te das cuenta que no es el mismo directo, que Bay produce, el resultado no dista demasiado.

[Leer artículo...]

  © Cgnauta | CGsign blog | Licencia de uso | Matius algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

eXTReMe Tracker

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com