Texto en html y css

La elección y el uso de texto en la web responde a los mismos parámetros que se tienen en cuenta para el diseño en general, como la legibilidad, el estilo, las variables para diferenciar y/o jerarquizar distintas partes, etc.

Darle estilo al texto

Si bien los navegadores pueden mostrar ya un estilo predeterminado en el texto escrito en el código html, como un tipo de fuente, tamaño y color, lo habitual es cambiar estas variables desde el código css. Mientras que la mayoría de las características se manejan totalmente desde la hoja de estilos, la familia tipográfica debe ser importada desde una fuente externa para que el navegador pueda mostrarla.

Imágenes en html y css

Las imágenes de mapa de bits deben insertarse como un archivo externo, debido a que ni el código html ni el css pueden generarlas. Para el diseño web los formatos más utilizados son el jpg y el png, con características algo diferentes entre ellos, pero ambos relativamente livianos para la carga.

Características de las imágenes

Teniendo en cuenta que se está diseñando para un entorno 100% digital, las imágenes deben trabajarse en el modelo de color rgb y a no más de 72 dpi (puntos por pulgada). El tamaño se mide en pixeles de ancho y alto, y dependerá de la resolución de las pantallas de los dispositivos de destino.

¿Qué tamaño máximo utilizar?

El tamaño tiene relación con la resolución del dispositivo donde se verá una página web. Por ejemplo, un monitor full HD tiene una medida de 1920px de ancho por 1080px de alto y colocar una imagen de mayor tamaño que dichas proporciones excedería los límites de la pantalla en este caso.

¿Cómo importar y dimensionar imágenes?

Existen dos maneras básicas de colocar las imágenes externas en un documento html:

Imágenes vectoriales

Existe la posibilidad de trabajar con imágenes de tipo vectorial, con las ventajas que tiene este tipo de formato como el ser escalable sin pérdida de calidad, tener poco peso, fondo transparente, y en particular en el código css poder editarse. El formato para estas imágenes es el llamado svg (scalable vector graphics). Este puede generarse en los típicos programas vectoriales, y la particularidad del formato svg es que lleva incorporado el código que lo forma, el cual puede verse al abrir el archivo en un editor de código.