AMPLIACIÓN CATÁLOGO TIPOGRÁFICO WEBSPLANET

(1)

AMPLIACIÓN CATÁLOGO

TIPOGRÁFICO WEBSPLANET

(2)

TIPOGRAFÍAS A DÍA DE HOY EN WEBSPLANET

La ﬁnalidad de toda composición gráﬁca es transmitir un mensaje concreto, para ello el diseñador puede emplear distintos elementos visuales, imágenes, ilustraciones y textos.

Combinando colores, jerarquías e imágenes se puede transmitir un mensaje por si solo, pero si además va acompañado por textos, la transmisión de la información es completa.

Los diferentes estilos de tipografía que podemos utilizar en un texto, pueden enfatizar el mensaje a transmitir. Por tanto, una correcta selección de tipografía es primordial para obtener una buena composición gráﬁca, ya que cada una de las letras que incluimos en el diseño es en si un elemento visual mas.

El diseñador, según este planteamiento, debe emplear las tipografías tanto para comunicar como para deﬁnir el aspecto visual de la composición.

En el sistema Websplanet tenemos un número limitado de familas tipográficas a utilizar, por ello, para enriquecer la experiencia final de usuario, y la satisfacción del cliente pretendemos ampliar el catálogo tipográfico disponible añadiendo algunas de las tipografías GoogleFont mas recurrentes que hay hoy en día.

Websplanet dispone de 11 familias tipográﬁcas seleccionables en cada uno de los bloques de texto que incluimos en la web.

Se pueden combinar y utilizar todas ellas.

(3)

INCLUSIÓN GOOGLEFONTS EN WEBSPLANET

Nuestra propuesta arranca de la necesidad de variar el aspecto visual de los textos que incluimos en nuestras web. Para ello hemos seleccionado doce familias tipográ- ﬁcas de google fonts muy recurrentes e intensamente utilizadas.

Hemos realizado una selección de tipografías con carac- terísticas propias que las hacen diferentes para las web que producimos sean mas variadas entre si.

Nuestra apuesta es utilizar una única familia tipográﬁca en un sitio, dando unidad y coherencia al conjunto de la web y diferenciar los distintos elementos estructurales única- mente por los pesos del texto, es decir tamaño y grosor del mismo.

Las fuentes que incluiremos son:

Ejemplo de site realizado con una única fuente (Open Sans) en la que la estructura del mismo se diferencia por los pesos de la fuente.

Lora Arvo

Playfair Display Rokkitt

Sorts Mill Goudy Open sans

Roboto Ubuntu Raleway Titillium Web Muli

Maven Pro

SANSERIF SERIF

H1 H2 H3 H4

H5 Texto común

(4)

PROCEDIMIENTO

Y CATÁLOGO GOOGLEFONT

Para poder incluir una googlefont dentro de un site cons- truido en la plataforma Websplanet de Páginas amarillas, hay que acceder al menú AJUSTES, en el apartado CON- FIGURACIÓN DEL SITIO de la pestaña GENERAL tenemos la opción de CÓDIGO DE ENCABEZADO. En este bloque de texto es donde incluiremos la siguiente etiqueta meta:

ETIQUETA a incluir:

Es muy importante tener en cuenta que el cambio de fuente en el sitio solo será visible en la publicación o previsualización de la web.

Los cambios de tipografía no se verán aplicados en el editor.

(5)

ABCDFGHIJKLMNÑOPQRSTUVWXYZ abcdfghijklmnñopqrstuvwxyz

0123456789 ( ¿ ? ) ¡ ! $ & + ` - € H1 H2 H3 H4

H5

Open Sans Regular

GoogleFont Sanserif

ABCDFGHIJKLMNÑOPQRSTUVWXYZ abcdfghijklmnñopqrstuvwxyz

0123456789 ( ¿ ? ) ¡ ! $ & + ` - € H1 H2 H3 H4

H5

Roboto Regular

GoogleFont Sanserif

ABCDFGHIJKLMNÑOPQRSTUVWXYZ abcdfghijklmnñopqrstuvwxyz

0123456789 ( ¿ ? ) ¡ ! $ & + ` - € H1 H2 H3 H4

H5

Ubuntu Regular

GoogleFont Sanserif

ABCDFGHIJKLMNÑOPQRSTUVWXYZ abcdfghijklmnñopqrstuvwxyz

0123456789 ( ¿ ? ) ¡ ! $ & + ` - € H1 H2 H3 H4

H5

Raleway Regular

GoogleFont Sanserif

(6)

ABCDFGHIJKLMNÑOPQRSTUVWXYZ abcdfghijklmnñopqrstuvwxyz

0123456789 ( ¿ ? ) ¡ ! $ & + ` - € H1 H2 H3 H4

H5

Titillium Web Regular

GoogleFont Sanserif

ABCDFGHIJKLMNÑOPQRSTUVWXYZ abcdfghijklmnñopqrstuvwxyz

0123456789 ( ¿ ? ) ¡ ! $ & + ` - € H1 H2 H3

H4 H5

Muli Regular

GoogleFont Sanserif

ABCDFGHIJKLMNÑOPQRSTUVWXYZ abcdfghijklmnñopqrstuvwxyz

0123456789 ( ¿ ? ) ¡ ! $ & + ` - € H1 H2 H3 H4

H5

Maven Pro Regular

GoogleFont Sanserif

ABCDFGHIJKLMNÑOPQRSTUVWXYZ abcdfghijklmnñopqrstuvwxyz

0123456789 ( ¿ ? ) ¡ ! $ & + ` - € H1 H2 H3 H4

H5

Lora Regular

GoogleFont Serifa

(7)

ABCDFGHIJKLMNÑOPQRSTUVWXYZ abcdfghijklmnñopqrstuvwxyz

0123456789 ( ¿ ? ) ¡ ! $ & + ` - € H1 H2 H3 H4

H5

Arvo Regular

GoogleFont Serifa

ABCDFGHIJKLMNÑOPQRSTUVWXYZ abcdfghijklmnñopqrstuvwxyz

0123456789 ( ¿ ? ) ¡ ! $ & + ` - € H1 H2 H3 H4

H5

Playfair Display Regular

GoogleFont Serifa - Display

ABCDFGHIJKLMNÑOPQRSTUVWXYZ abcdfghijklmnñopqrstuvwxyz

0123456789 ( ¿ ? ) ¡ ! $ & + ` - € H1 H2 H3 H4

H5

Marmelad Regular

GoogleFont Serifa

ABCDFGHIJKLMNÑOPQRSTUVWXYZ abcdfghijklmnñopqrstuvwxyz

0123456789 ( ¿ ? ) ¡ ! $ & + ` - € H1 H2 H3 H4

H5

Sorts Mill Goudy Regular

GoogleFont Serifa

(8)

(9)

(10)

(11)

(12)

(13)

(14)

(15)

(16)

(17)

(18)

(19)

(20)