Tipografía y CSS - WPDFD en Zona de Inicio

Si se está familiarizado con el uso de hojas de estilo en cascada para páginas web, o para procesadores texto, es fácil entender como es posible crear un set de especificaciones y aplicarlas a un bloque de texto o a un sitio web entero.
Es posible crear titulares en 48 puntos, con una fuente Times, el subtitulo en Helvetica a 32 puntos, y el cuerpo de texto en Times Roman a 10 puntos, con un leading en particular y el indent deseado.
Cuando deseamos cambiar el look completo de una página web, pensando en algo más técnico, solamente necesitaremos editar nuestra hoja de estilos: el titular por ejemplo en Arial Black, los subtítulos en Arial Bold, y el cuerpo de texto en Arial. Así de simple. Así de fácil.

Este es un estilo utilizando el
atributo CLASS.
Está declarado en la sección <HEAD>
de la página web, de esta forma:

Lo que nos amplia el leading
es esta línea: line-height:200%;
Pero he hecho un poquito de trampa
con el indent del párrafo y utilizando
una serie de tags   para
lograr mejor compatibilidad
con navegadores más antiguos.

Para invocar este estilo para el párrafo
opuesto, simplemente agregué:

al tag del párrafo donde normaltext
es el único nombre del estilo
que establecimos al declararlo en la hoja.

Esta forma de implementar un estilo, se llama,
hoja de estilo embebida, por estar ligada a
ésta página únicamente.
También podemos tener una
hoja de estilos externa que nos provea
de un conjunto de estilos maestros para
numerosas páginas de nuestro sitio.

Utlizar CSS en los navegadores de cuarta generación, nos brinda posibilidades similares. Por supuesto que estaremos algo restringidos, por la cantidad de fuentes instaladas y habilitadas en el sistema operativo del usuario. Las CSS no nos generarán como por arte de mágia una Frutiger Extra Bold, Roman y Light. Y si bien, en la actualidad existen algunas tecnologías para embeber dichas fuentes, aún no son totalmente confiables para un uso generalizado.
La idea detrás de CSS es poder separar el contenido de una página de su formato de texto, para así tener mayor control de este formato, cuando el código HTML no nos lo permite..
Aparte de la posibilidad de hacer cambios globales en los estilos más rápidamente, también es posible ofrecer el mismo contenido con distintas especificaciones según cómo se esté manejando en navegador.
Ya sea que nuestro visitante, tenga una computadora de última generación, con un enorme monitor (24 bit) o posea una pequeña pantalla en blanco y negro podremos invocar un set diferente de estilos para brindarle una óptima experiencia, cualquiera sea el navegador que posea. Y si aún así dicho navegador, no tiene capacidad para mostrar las CSS, nuestro formato se "degradará" en forma armónica para ofrecerle al menos, una vista satisfactoria de nuestro sitio.
Este bloque de texto, en lo que al código HTML concierne, es un solo párrafo. Pero de hecho, está visualmente separado en varios párrafos indentados utilizando el tag <BR> y una serie de  . Esto significa que en el caso que un navegador no soporte CSS, el texto se adaptará mejor para poder verlo en igual formato.
Normalmente, yo alternaría los   con espacios regulares, pero la implementación de CSS en Microsoft IE, ignorará esos espacios y HALVES THE INDENT.
El estilo que definí como 'normaltext' nos provee el tamaño de la fuente especificado en pixeles y no en puntos, ya que los pixeles son estándares en todo navegador y plataforma. No así su medida en puntos.
En 'normaltext' también especifiqué la familia y el alto de línea. Y en la próxima sección definí el estilo 'alttext' para establecer una nueva familia de fuentes, su color y el indentado.

Un pequeño cambio en las
especificaciones del estilo
nos dan como resultado un
cambio absoluto:

Aquí no quise incluir el indent en
la primera línea. Una razón más de
porque siempre prefiero utilizar
 s y <br>.

Al igual que en el código HTML y toda otra cuestión relativa a las incompatibilidades por plataformas y navegadores, la implementación de CSS no es muy consistente hasta el momento. Si lo soportan Netscape y Explorer 4, como sus versiones siguientes, pero parcialmente por Explorer 3.x; así y todo los resultados no siempre son predecibles.

Pero esto es solo el principio de múltiples posibilidades que nos ofrece CSS. Lo básico (que hemos visto hasta el momento) es actualmente compatible en todos los navegadores. Existen algunas otras características nos pueden traer problemas. Por ejemplo esta sección, relativamente simple, que está justificada y contiene párrafos indentados puede verse de manera disímil en Netscape y en Explorer, dependiendo del uso de los tags: <div> o <p>.

Como con otras incertidumbres en diseño web, necesitaremos probar nuestras páginas en la mayor cantidad posible de navegadores y computadoras.

Los ejemplos que expuse, solamente representan una vista general o superficial de lo que se puede hacer con CSS.
Para crear nuestros estilos personalizados, por ejemplo podemos modificar la mayoría de los estilos preexistentes en HTML.
  Esto signfica poder redefinir todos y cada uno de los tags, en este caso <PRE>, para obtener una tipografía más grande o un color diferente. O en el tag H2, para poder utilizar una fuente en especial, a un tamaño y con un estilo propio.

  Para indagar más sobre CSS: enlaces CSS y sección avanzados) bajo el nombre Cascading Style.
  Concluyendo: Tener siempre presente que algunos lectores no podrán ver los resultados de nuestras hojas de estilo. Por ello, aseguremonos que las páginas se puedan ver bien en los navegadores más antiguos también.

Autor Original:

URL Original:

Título Original:

Traducción al español:

Joe Gillespsie

http://www.wpdfd.com/wpdtypo2.htm

Typography

Carina C. Kornowski