sábado, 10 de mayo de 2014

Las fuentes tipográficas



1. El uso de las tipografías

La tipografía ha sido desde siempre el "pariente pobre" del diseño web. Siempre hemos tenido que limitarnos a las "familias genéricas", que eran las únicas que nos permitían obtener una visualización casi idéntica en los diferentes navegadores.

Teníamos: 
  • la familia de las tipografías sin serifa: "arial, helvetica, sans-serif". 
  • la familia de las tipografías con serifa: "timesnew roman, times, serif". 
  • la familia de las tipografías de ancho fijo: "courier new, courier, mono".

De esas tres listas, el navegador utiliza la primera tipografía que encuentre instalada en el ordenador del usuario.

Más tarde, Matthew Carter, a petición de Microsoft, diseñó dos tipografías creadas específicamente para facilitar la lectura en la pantalla: la tipografía sin serifa Verdana y la tipografía con serifa Georgia. Esas dos tipografías libres de derechos se encuentran disponibles en la gran mayoría de las plataformas informáticas actuales.

Debemos decir, sin embargo, que las posibilidades de elección son bastante limitadas.


2. Importar las fuentes tipográficas

Con los estilos CSS3 y la regla @font-face nosotros podemos "importar" las fuentes tipográficas en nuestra página web. De este modo, ya no estaremos limitados al uso de las fuentes genéricas.

¡Estupendo! Pero no se olvide de estos tres elementos fundamentales: 
  • La mayoría de las fuentes "profesionales" están sometidas a derechos de uso y de difusión. 
  • Cuando usted "importe" una fuente tipográfica, ¡incorporará a sus archivos la totalidad de los caracteres de dicha fuente! Esto podría sobrecargar en exceso sus páginas web. 
  • Por lo general, el antialiasing (que evita que los caracteres tengan un aspecto dentado) no se aplica a las páginas web.


3. La compatibilidad con los navegadores

Ahora tendremos que ocuparnos del problema de la compatibilidad (¡para no variar!) con las diferentes versiones de los navegadores.

Estos son los formatos de las fuentes tipográficas reconocidas por los navegadores: 
  • TrueType: extensión .ttf. 
  • OpenType: extensión .otf. 
  • Web Open Font: extensión .woff. 
  • SVG Font: extensión .svg y .svgz. 
  • Embed OpenType: extensión .eot. Atención, se trata de un formato propietario de Microsoft.


La siguiente tabla recoge las compatibilidades entre los formatos y los navegadores en su última versión (octubre de 2011).


Para conocer las compatibilidades de los navegadores y los diferentes formatos de fuentes, sugiero utilizar regularmente el sitio web caniuse.com. 

Extracto de la tabla:




4. La regla @font-face

Veamos la sintaxis de la regla @font-face:

@font-face {
font-family: "Skia";
src: url(’Skia.ttf’);
}

Una vez que hayamos declarado la regla @font-face, con la propiedad font-family indicaremos el nombre de la fuente tipográfica que queramos importar. Luego, con la propiedad src indicaremos la ruta de acceso al archivo de dicha fuente.

Para aplicarla, simplemente tendremos que indicar en el selector en cuestión el nombre de la fuente que deberá usarse con la propiedad font-family:

h1, h2 {
font-family: Skia;
}
Este es el código HTML:

<h1>El título de mi página</h1>
<h2>El subtítulo</h2>
<p>Fusce dapibus...</p>

Y el resultado visual:



5. El nombre de las tipografías

Tenga cuidado, el nombre que se indica en font-family es totalmente arbitrario, no tiene por qué corresponder al nombre del archivo de la fuente tipográfica o al nombre que le haya dado el tipógrafo. Se trata del nombre que usted le haya asignado a dicha fuente. Lo que importa, es el nombre del archivo que contiene la fuente tipográfica.

Esta es una sintaxis correcta y que funciona bien:

@font-face {
font-family: "Nombre de la tipografía";
src: url(’Skia.ttf’);
}
h1, h2 {
font-family: ’Nombre de la tipografía’, Arial, Helvetica, sans-serif;
}


6. Las tipografías locales

De manera predeterminada, con la sintaxis precedente, las fuentes tipográficas se descargarán del servidor en el ordenador del usuario que visite su sitio web. Sin embargo, podemos suponer que algunos visitantes disponen de esa tipografía localmente en su ordenador. Indicaremos entonces que deberá usarse la tipografía local, cuando esta esté disponible, con local en src.

@font-face {
font-family: "Skia";
src: local("Skia"), url(’Skia.ttf’);
}

El nombre de la tipografía que se indique en "local" deberá corresponder al nombre del archivo del sistema.

Esta sintaxis se puede leer así: se debe usar una tipografía a la que el diseñador web ha llamado Skia, si está disponible en local se deberá usar la tipografía que se llame Skia en el sistema del usuario, de lo contrario, se deberá descargar la fuente que se encuentra en el archivo llamado Skia.ttf.


7. Indicar varias fuentes tipográficas

Podemos indicar además varios formatos de fuente (si existen) para mejorar la compatibilidad:

@font-face {
font-family: "Skia";
src: url(’Skia.ttf’)format("truetype"),
url(’Skia.woff’)format("woff");
}

Claro está, también podemos indicar otras fuentes tipográficas para aumentar la compatibilidad con los navegadores antiguos.

h1, h2 {
font-family: Skia, Arial, Helvetica, sans-serif;
}


8. Los estilos tipográficos

En la declaración de la regla @font-face, puede indicar determinados estilos tipográficos con la propiedad font-weight, font-style y font-variant. Sin embargo, los navegadores aún no los reconocen del todo bien.

@font-face {
font-family: "Nombre de la tipografía";
src: url(’Skia.ttf’);
font-weight: bold;
}


9. Un generador de fuentes tipográficas con @font-face

El servicio en línea CSS 3.0 Maker (http://www.css3maker.com/index.html) propone varios generadores CSS3, entre ellos, un generador de fuentes tipográficas con la regla @font-face: http://www.css3maker.com/font-face.html

En esta interfaz de color oscuro (y poco práctica), en el recuadro CSS3 Styles, seleccione una tipografía, el tamaño, el estilo y el ancho. En el recuadro CSS3 Preview Area podrá visualizar el resultado de su selección. En el recuadro CSS3 Codeview podrá copiar el código generado, o bien, puede hacer clic en el botón Download.



10. Las tipografías web en línea

Diferentes servicios en línea ofrecen la posibilidad de usar tipografías para la Web. El servicio de Google, Google Fonts, es uno de los más populares. Esta es su URL: http://www.google.com/fonts

Dispone de más de 630 tipografías.


En la lista de tipografías, seleccione la que usted prefiera.


En el recuadro, puede hacer clic en el botón Pop out para obtener más información sobre esa tipografía.


En el recuadro precedente, haga clic en el botón Quick-use .

En los recuadros 3. y 4. encontrará las instrucciones para usar esa tipografía en sus hojas de estilo CSS.


Este sería un ejemplo de vínculo CSS:

<link href=’http://fonts.googleapis.com/css?family=Julee’ rel=’stylesheet’
type=’text/css’>

Y la aplicación en la hoja de estilo:

h1, h2 {
font-family: ’Julee’, cursive;
}

Veamos el código HTML de la página:

<h1>El título de mi página</h1>
<h2>El subtítulo</h2>
<p>Fusce dapibus...</p>

Este es el resultado visual:



11. Convertir las tipografías

El sitio web Font Squirrel (http://www.fontsquirrel.com/) es uno de los sitios web más populares para convertir las tipografías a diversos formatos (http://www.fontsquirrel.com/tools/webfont-generator).



12. Seleccionar las tipografías

A la hora de diseñar la interfaz de un sitio web, el sitio web Font Combinator (http://font-combinator.com/) le permite probar en línea tres fuentes tipográficas de Google: una para los títulos, una para los subtítulos y otra para el texto normal. Resulta muy práctico para examinar cómo se visualizarán las tres fuentes tipográficas que haya seleccionado.

Seleccione las tipografías y el tamaño en la parte derecha de la interfaz.


Otro sitio web interesante es Font comparer (http://www.fontcomparer.com/). En este sitio podrá comparar un gran número de tipografías de Google y luego recuperar el vínculo de la tipografía que desee. Para ello, pase el cursor por encima del nombre de una tipografía y haga clic en el vínculo Get font.



Espero haber ayudado en algo. Hasta la próxima oportunidad!








No hay comentarios:

Publicar un comentario

       

Etiquetas

Accediendo a datos con ADO .NET (31) Acceso a la red (30) Algoritmo (34) Algoritmos en JAVA (2) Ampliación de clases (2) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (3) APRENDA A PROGRAMAR COMO SI ESTUVIERA EN PRIMERO - Autores : IKER AGUINAGA (10) Aprendiendo a desarrollar en Windows 8 (5) Aprendiendo UML en 24 Horas (Autor : Joseph Schmuller ) (30) Arquitectura (29) Arquitectura del Computador (3) Arquitectura del Computador - Historia de la informática (1) Asignación de direcciones IP (23) Aspectos fundamentales de bases de datos (5) Auditoría de la dirección (2) Auditoría de Sistemas (3) Auditoría Informática - Un enfoque práctico - Mario G . Piattini y Emilio del Peso (7) Avanzado (23) Base de Datos (67) Básico (23) Bios (29) Business Productivity Online Suite - BPOS (3) Capa de Red (22) Capa de Transporte (16) Capítulo 1 - Documentos HTML5 (6) Capítulo 10. API Web Storage (2) Capítulo 11. API IndexedDB (4) Capítulo 12. API File (1) Capítulo 2. Estilos CSS y modelos de caja (7) Capítulo 3. Propiedades CSS3 (4) Capítulo 4. Javascript (6) Capítulo 5. Video y audio (6) Capítulo 6. Formularios y API Forms (8) Capítulo 7. API Canvas (5) Capítulo 8. API Drag and Drop (2) Capítulo 9. API Geolocation (2) CCNA1 v5.0 (239) CCNA1 v6.0 (23) CCNA2 v5.0 (26) CCNA3 v5.0 (25) CCNA4 v5.0 (23) CD-ROM (3) Chapter 1 How does Xamarin.Forms fit in? (7) Chapter 2 Anatomy of an app (5) Cisco (341) Cloud Computing (3) CNNA v5.0 Routing & Switching (260) CNNA v6.0 Routing & Switching (2) Codigo (2) Computadora (32) Configuración (29) Configuración de un sistema operativo de red (21) Control (29) Creación de tipos de datos y tablas (3) Creación y Administración de bases de datos (3) Creando la Interface de la Aplicación Windows (50) Creating Mobile Apps with Xamarin.Forms (13) Cuenta (29) Curso (32) Curso Aprendiendo a Programar (25) Datos (3) Desarrollando en Windows 8 - AVANZADO (2) Desarrollando en Windows 8 - BÁSICO (3) Desarrollando en Windows 8 - INTERMEDIO (2) Desarrollo (2) Desarrollo .Net (21) Desarrollo avanzado de Windows Store Apps usando C# (1) Desarrollo basado en conceptos de Ingeniería de Software para Visual Studio (2) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (37) DESARROLLO DE APLICACIONES WINDOWS CON MICROSOFT .NET (Autor: Luis Dueñas Huaroto) (29) Desarrollo en Microsoft Visual Studio (44) Desarrollo en Microsoft Visual Studio - AVANZADO (15) Desarrollo en Microsoft Visual Studio - BÁSICO (14) Desarrollo en Microsoft Visual Studio - INTERMEDIO (18) Desarrollo en Windows Phone 8 (13) Diagnostico (4) Diagrama (3) Diagramas de actividades (2) Diagramas de colaboraciones (2) Diagramas de secuencias (2) Digital (2) Diplomado (2) Disco (29) Disco Duro (4) Diseño de aplicaciones de Windows 8 en HTML 5 (7) Dispositivos Electrónicos (11) Doctorado (2) Ejemplos de algoritmos (27) El camino hacia el CSS3 (3) El diseño web flexible (6) El elemento de diseño Canvas (3) El enfoque de los sistemas (3) El flujo de un programa (2) El gran libro de HTML5 - CSS3 y Javascript - Autor: Juan Diego Gauchat (55) El principio de organicidad (7) Electrónica (2) Elementos de un sistema (5) Empresas (2) Entrada y salida (4) Entropía y neguentropía (7) Estrategia (2) Estructura de un programa Java (12) Estructuras de almacenamiento (10) Estructuras de control (6) Estructuras de las tablas en SQL Server (2) Estructuras fundamentales de los datos (2) Ethernet (21) Evolución y Familias de los Microprocesadores (15) Exámen (23) Exploración de la red (23) Extensión de clases (4) Facebook (4) Familia Intel (15) Forefront (8) Función (3) Funciones de una red (12) Funciones de una red informática (1) Fundamentos de C# para absolutos principiantes (17) Fundamentos de programación en Java (50) Generaciones de la computadora (5) Gestión (3) Gestión de riesgos - Auditoría de Sistemas (1) GONZALO MARTÍNEZ (1) Grupos Facebook (1) Harvard (29) Historia de las computadoras (11) HTML5 y CSS3 - Autor: Christophe Aubry (99) HTML5 y CSS3 aplicadal texto (7) HTML5 y CSS3 para los formularios (15) Imágenes (2) Implementación de Windows 7 (11) Información (31) Informática (29) Ingeniería (4) Instalar (29) Inteligencia (2) Inteligencia de Negocios con SQL Server (3) Intermedio (23) Internet (29) Internet Explorer 9 (3) Introducción a ASP.NET 5 (8) Introducción a Java (7) Introducción a jQuery (8) Introducción a la Auditoría de Sistemas (2) Introducción a la teoría general de sistemas (Oscar Johansen Bertoglio) (39) Introducción a Networking (2) Introducción a Window Forms (5) Introducción al acceso a datos con ADO .NET (9) Investigación de Operaciones (12) Java (52) Jump Start de consultas en las bases de datos de Microsoft SQL Server 2012 (8) La definición de un Sistema (6) La evolución del HTML y del CSS (3) La nueva sintaxis HTML5 (12) LA QUINTA DISCIPLINA en la práctica (Autor : Peter Senge) (28) Las animaciones en CSS3 (5) Las transformaciones CSS3 (11) Las transiciones con CSS3 (8) Licenciamiento Microsoft (3) Local Area Network (LAN) - Red de Area Local (2) Lógico (2) Los elementos de la estructura en html5 (9) Los elementos multimedia: audio y vídeo (2) Los estilos de caja en CSS3 (13) Los nuevos selectores de CSS3 (6) Maestría (2) Mantenimiento de Mouse y Teclado (2) Manual de Microsoft SQL Server - Full Transact SQL (68) Manual de soporte técnico para escuelas sobre windows 7 (42) Marco Teorico de Investigación de Operaciones (6) Medios de Almacenamiento (11) Medios de Networking (2) Mejorando la Interface de las Aplicaciones Windows (26) Memoria Tipos y Clases (5) Método (2) Metodología (1) Microsoft (324) Microsoft Lync 2010 (7) Microsoft Silverlight 4.0 (2) Microsoft Virtual Academy (356) Modelo (2) Modelo OSI y TCP-IP (2) Modelos con poco grado de dificultad de Programación Lineal - Investigación de Operaciones (13) Modelos con razonable grado de dificultad de Programación Lineal - Investigación de Operaciones (10) Modelos de desafio de Programación Lineal - Investigación de Operaciones (5) Modelos difíciles de Programación Lineal - Investigación de Operaciones (5) Modelos Fáciles de Programación Lineal - Investigación de Operaciones (13) Modelos lineales con solver (3) Modulo (23) Movimiento (2) Mozilla (29) MS SQL Server (77) MS Virtualization para Profesionales VMware - Gestión (3) MS Virtualization para Profesionales VMware- Plataforma (4) MVA (263) Negocio (2) Nivel Avanzado Desarrollo .Net (6) Nivel Básico Desarrollo .Net (11) Nivel Intermedio Desarrollo .Net (8) Normas técnicas peruanas y su evolución - Auditoría de Sistemas (1) Nube Privada - Avanzado (6) Nube Privada - Básico (6) Nube Privada - Intermedio (6) Office 365 (3) Optimización de Escritorio (10) Optimización de Escritorio - Avanzado (4) Optimización de Escritorio - Básico (3) Optimización de Escritorio - Intermedio (3) ORACLE 10g - ADMINISTRACIÓN Y ANÁLISIS (3) Oracle 10g y el Grid Computing (3) Organización aleatoria y secuencial (1) Partes principales de la Mainboard (12) Perceptron (2) Perfil (2) Periféricos de Entrada / Salida (15) Pesi (2) PHP y MySQL - Manual de aprendizaje para crear un sitio web - Autor : Olivier ROLLET (79) Plan (2) Plataforma (29) PMBOK (24) PMBOK - Guía de los fundamentos para la dirección de proyectos (24) PMBOK - INFLUENCIA DE LA ORGANIZACIÓN Y CICLO DE VIDA DEL PROYECTO (6) PMBOK - Introducción (11) PMBOK - PROCESOS DE LA DIRECCIÓN DE PROYECTOS (5) Prevención - Herramientas e Instrumentos de Medida (9) Principios básicos de enrutamiento y switching (213) Proceso (2) Proceso de auditoría de sistemas informáticos (2) Programación en Android - Auor : Salvador Gómez Oliver (46) Programación paso a paso de C# - Autor : Nacho Cabanes (16) Protocolos y comunicaciones de red (17) Proyecto (2) Qué es un sistema (4) Red de Área Local Inalámbrica (WLAN) (4) Redes (30) Redes inalámbricas - WIRELESS - Conocimiento general (15) Redes neuronales (2) Redes y Comunicaciones (45) Reparación de Fuentes - UPS - Estabilizadores (10) Reparación de Impresoras (9) Reparación de Monitores (16) Router (29) Seguridad en la Nube (3) Seminario (23) Server (24) Sharepoint 2010 - Nivel Básico (6) Sharepoint 2010 - Niveles Avanzados (18) Sharepoint 2010 - Niveles Avanzados - Básico (8) Sharepoint 2010 - Niveles Avanzados - Intermedio (9) Sinergia y recursividad (4) Sistema (33) Sistema de Cableado Estructurado (9) Software (30) SOLUCIÓN GRÁFICA DE MODELOS DE PROGRAMACIÓN LINEALES - INVOPE (8) Soporte a Infraestructura (3) SQL (38) SQL Azure - Introducción (3) Subsistemas de control (4) Tablas (4) Tarjeta Principal del Sistema (10) Tarjetas de Interfaces (7) Tecnología (31) Tecnologías LAN (1) TEORÍA GENERAL DE SISTEMAS (1) Tic (2) Tipo (2) TML5 y CSS3 - Autor: Christophe Aubry (12) Trabajando con el Formulario (7) Un diseño HTML5/CSS3: dConstruct 2011 (3) Un diseño HTML5/CSS3: FlipThru (2) Un diseño HTML5/CSS3: The Cat Template (2) Usando Controles Windows Forms (12) Usando Herramientas de Datos de Visual Studio (6) Ventas (2) Virtualización Hyper - V Nivel Básico (5) Virtualización Hyper - V Nivel Intermedio (5) What’s New in Windows 8.1 Security (4) Window (29) Windows 7 Segunda Fase - AVANZADO (4) Windows 7 Segunda Fase - BÁSICO (6) Windows 7 Segunda Fase - INTERMEDIO (4) Windows 8 - Vista Previa (4) Windows 8.1 To Go (2) Windows Azure (3) Windows Phone 7 (2) Windows Server 2008 R2 (3) Windows Server 2012 - Gestión y Automatización (3) Windows Server 2012 R2 Essentials (7) Windows Server 2012: Almacenamiento (5) Windows Server 2012: Identidad y Acceso (4) Windows Server 2012: Revisión Técnica (7) Xamarin (1)

Páginas vistas en total según Google