Manejo de fuentes con Adobe Dreamweaver

La tipografía es una parte esencial del diseño de páginas web, tanto desde el punto de vista estético como para la correcta visualización de los contenidos textuales, los más importantes en una página web.

Cuando el diseñador comienza a trabajar en la presentación de los textos de una página web, se encuentra con que el navegador de cada visitante emplea las fuentes que cada sistema operativo tiene instaladas. Los sistemas operativos más comunes (Windows, Linux y Mac), tienen fuentes propias que están instaladas por defecto.

A esto hay que agregar que hay diferencias entre distintas versiones de los sistemas operativos. Por ejemplo, Windows Vista tiene diferencias con las versiones anteriores de Windows, existen diferencias importantes entre las distribuciones de Linux y Mac también muestra algunas diferencias entre versiones.

Si bien muchos usuarios de Linux y Mac instalan paquetes de fuentes de Windows (en Linux más del 70% de los usuarios), emplear exclusivamente fuentes de Windows para el diseño web equivaldría a ignorar la presencia de un grupo importante de usuarios que mantienen el uso de las fuentes originales de sus sistemas operativos, y es de suponerse que el diseñador debe presentar sus diseños de forma tal que una cifra muy cercana al 100% de los visitantes tengan una buena visualización de la página.

Cómo establecer las fuentes

Además de poder manejar las fuentes directamente en el código en la forma tradicional, Dreamweaver presenta algunas herramientas que facilitan el manejo de las fuentes por parte de los diseñadores, haciendo la tarea mucho más sencilla. Para comprender como funcionan las herramientas de fuentes de Dreamweaver, haremos una breve descripción de algunos conceptos básicos del manejo de fuentes con CSS y HTML.

Fuentes en HTML

Si bien en la actualidad es desaconsejado establecer los estilos en las etiquetas HTML, esto es posible a través de la etiqueta <Font> y el atributo face. A continuación, veremos un código donde se emplea la mencionada etiqueta:

<p><font face="Georgia, ‘Times New Roman’, Times, serif">

El contenido de este párrafo aparecerá en una fuente Georgia, con una fuente suplente Times New Roman, una segunda fuente suplente Times, y en caso de que ninguna de las anteriores se encuentre instalada, el navegador tomará la fuente tipo serif que el sistema operativo tome por defecto. </font> </p>

En cualquiera de los métodos que se emplee para establecer las fuentes de un texto, siempre es conveniente establecer una fuente con “suplentes” que se encuentren en otros sistemas operativos, de forma tal que cuando el navegador busque la fuente para presentar el contenido, tenga dos o tres opciones además de la original. Siempre es conveniente que las fuentes sean equivalentes, como en el caso que hemos utilizado como ejemplo.

Establecer las fuentes en el código HTML es inconveniente, ya que extiende el código agregando una gran cantidad de etiquetas, lo que dificulta la carga de las páginas, entorpece el escaneo de los robots de los buscadores y aumenta la dificultad del diseño y las posibles correcciones posteriores.

Fuentes en CSS

Uno de las características del CSS que es más valorada por los diseñadores, es la flexibilidad. El diseñador puede establecer una fuente por defecto (al igual que otros atributos) en el body, y esta fuente la empleará el navegador en todo aquello cuya fuente no haya sido establecida específicamente. Lo mismo sucede con otras etiquetas, como veremos en el ejemplo siguiente:

body {
font-family: Verdana, tahoma, sans-serif;
}
h1, h2, h3 {
font-family: "times new roman", georgia, serif;
}
.clase  {
font-family: arial,helvetica;
}

En estas tres etiquetas, vemos tres formas diferentes de establecer las fuentes con CSS. En el primer caso, se establece la fuente para todo el documento, excepto para aquellos elementos que tengan fuentes establecidas en forma específica. En el segundo caso, vemos que las etiquetas h1, h2 y h3 de todo el documento, tendrán las fuentes establecidas, excepto, como en el caso anterior, que se especifique algo diferente. En el tercer caso, todos los elementos marcados como class=”clase”, tendrán las características que se especifican.

Establecer fuentes con Adobe Dreamweaver

Para ver la forma de establecer fuentes con Dreamweaver, lo haremos en forma práctica. Para ello, abriremos un documento nuevo (para nuestro ejemplo, un documento XHTML 1.1 con el CSS en un archivo aparte).

En la vista de diseño

Desde la vista de diseño, es posible establecer las fuentes de cualquier sección del documento. Para este ejemplo, seleccionaremos el encabezado haciendo clic con el botón derecho en el texto cuya fuente deseamos cambiar. En el menú que se abrirá, seleccionaremos “Fuente” y se abrirá un submenú, tal como aparece en la siguiente imagen:

En este submenú, haremos clic en el grupo de fuentes que deseamos establecer, y se abrirá la siguiente ventana:

En el primer campo, podremos seleccionar el tipo de selector en el CSS que modificaremos, pudiendo optar por hacer una selección compuesta (seleccionando todas las etiquetas que contienen al elemento seleccionado), una clase, un ID o una etiqueta. Si seleccionamos cambiar la fuente de una etiqueta, en el caso que tomamos como ejemplo, cambiaremos las fuentes de todas las etiquetas h1 del documento HTML o cualquier otra etiqueta que seleccionemos en el campo siguiente. Si seleccionamos ID, deberemos introducir el nombre de la nueva etiqueta del documento CSS, la que podremos aplicar a cualquier etiqueta HTML. Del mismo modo procederemos si seleccionamos la “Clase”, aplicando luego a cualquier etiqueta HTML con class=”…”.

Si seleccionamos “Compuesto (basado en la selección”, podremos seleccionar los selectores del CSS que modificaremos, pudiendo seleccionar mediante los botones que se encuentran debajo si se desea que la selección sea más o menos específica. En el ejemplo que estamos llevando adelante, en el campo que  nos indica las etiquetas que se modificarán aparecerá lo siguiente: “.twoColElsLtHdr #container #header h1”. Haremos clic en el botón que dice “Menos específico” y podremos leer “#container #header h1” y en el campo donde se explica cuales son las etiquetas que se modificarán, dirá “Este nombre de selector aplicará la regla a todos los elementos <h1> que estén dentro de elementos HTML con id “header” que estén dentro de elementos HTML con id “container”.

El mismo procedimiento se puede llevar adelante si en lugar de hacer clic con el botón derecho del ratón, seleccionamos el encabezado y vamos a “Formato / Fuente” de la barra de herramientas estándar.

En la vista de Código

En la vista de código, solo es posible modificar la fuente de las etiquetas a través del procedimiento iniciado a través de la barra de herramientas estándar, siempre y cuando el documento que se encuentre en la vista sea el HTML, ya que no se puede realizar cuando en la vista aparece el código del documento CSS.

Cuando el código que aparece en la vista de diseño es el documento CSS, solo es posible modificarlo directamente, ya que se desactivan las funciones de modificación.

Modificar las listas de fuentes predeterminadas

Cuando se abre el submenú de fuentes, aparece un listado de combinaciones de fuentes que Dreamweaver tiene por defecto. Estas combinaciones de fuentes, son las más empleadas en diseño web y son las más adecuadas para el desarrollo de páginas. Por esta razón, es conveniente emplear estas combinaciones tal como se las encuentra; sin embargo, es posible que algunos diseños exijan la utilización de otras combinaciones, para lo cual podremos emplear la opción “Editar lista de fuentes” en la siguiente ventana:

Si seleccionamos el último ítem de la lista (Añadir fuentes de la lista siguiente), podremos crear un nuevo grupo de fuentes, seleccionando y agregando fuentes que se encuentran en nuestro sistema operativo. Si se selecciona un grupo ya establecido, se podrá editar el mismo, agregando o quitando fuentes.

Al realizar cualquier operación con las listas de fuentes, se debe recordar que es importante mantener grupos de fuentes equivalentes o similares, de forma tal que la página en desarrollo se vea igual en cualquier sistema operativo que los visitantes posean.