Mejora el diseño de tu web: Tipografía responsive

Ana Cirujano
Diseñadora visual y de interacción
especializada en WordPress
@acirujano
anacirujano.com
tipografiaresponsive.com
easyworkation.com

@acirujano | @MadridWordPress
Cómo elegir
una tipografía

Leemos mejor las tipografías
que conocemos

Tono

Tono
Seriedad
Alegría

Legibilidad
ae
Roboto
ae
Open Sans
ae
Montserrat
ae
Helvetica
Minion Futura
Illusion
Myriad Pro
WordPress WordPress
BaskervilleMerriweather

Serif vs sans serif
WordPress Madrid WordPress Madrid
Sans serifSerif

Juego de caracteres completo

Amplia familia de pesos

Kerning correcto
WordPress

Cursivas verdaderas
WordPress Madrid
WordPress Madrid

Características OpenType
Para saber más
Syntax for OpenType features in CSSi

Combina
correctamente
las fuentes

Pares de fuentes

Droid Sans + Droid SerifPT Serif + PT Sans
Bienvenidos a
WordPress Madrid
Veremos algunas recomendaciones de composición de
textos optimizados para todos los dispositivos, que nos
ayudarán a construir mejores sitios web responsive para
todos los usuarios. Tipo de letra, tamaño, interlineado,
ancho de línea...
Aprenderemos a tomar decisiones de diseño para
conseguir comunicar eficazmente, que nuestros usuarios
disfruten más del sitio web y que aumente el tiempo de
permanencia en la página y obtengamos más visitas.
Bienvenidos a
WordPress Madrid
Veremos algunas recomendaciones de composición de
textos optimizados para todos los dispositivos, que nos
ayudarán a construir mejores sitios web responsive para
todos los usuarios. Tipo de letra, tamaño, interlineado,
ancho de línea...
Aprenderemos a tomar decisiones de diseño para
conseguir comunicar eficazmente, que nuestros usuarios
disfruten más del sitio web y que aumente el tiempo de
permanencia en la página y obtengamos más visitas.
Pares de fuentes

Elección tipográfica
responsive

Deadline: Talla
de camisetas
Se acerca el final del año; así que la primera #WCZGZ está
cada vez más cerca. Por eso es importante ir cerrando
algunos temas.
¿Qué talla de camiseta
tienes?
Todos los asistentes, cuando compran su camiseta eligen qué
talla de camiseta tienen, esto nos permite asegurar que todos
vais a tener camiseta de vuestra talla sin tener que comprar
más camisetas de la cuenta.
Elección tipográfica responsive

Elección tipográfica responsive
Deadline: Talla
de camisetas
Se acerca el final del año; así que
la primera #WCZGZ está cada vez
más cerca. Por eso es importante ir
cerrando algunos temas.
¿Qué talla de
camiseta tienes?
Todos los asistentes, cuando
compran su camiseta eligen qué talla
de camiseta tienen, esto nos permite
asegurar que todos vais a tener
camiseta de vuestra talla sin tener
que comprar más camisetas de la
cuenta.
Deadline:
Talla
de
camisetas
Se acerca el final del año; así que
la primera #WCZGZ está cada vez
más cerca. Por eso es importante ir
cerrando algunos temas.
¿Qué talla de
camiseta tienes?
Todos los asistentes, cuando
compran su camiseta eligen qué

Tamaño
responsive

Imagen obtenida de https://ia.net/topics/responsive-typography-the-basics/
Tamaño responsive

Tim Brown
Escala modular

CSS
usuario
CSS
diseñador
CSS
diseñador
!important
CSS
usuario
!important
CSS
navegador
Prioridad de las declaraciones css

px rem em vw vh vmin vmax
Font-size

Rem
1 rem = tamaño de texto base
1 rem = 16 px
24 px = 1.5 rem

Em
.contenedor 1.25em
16 px × 1.25 = 20 px
.letra-pequeña 0.8em
20 px × 0.8 = 16 px

Unidades relativas al viewport

• vw – ancho del viewport
• vh – altura del viewport
• vmin – anchura o altura del viewport, lo que sea más pequeño
• vmax – anchura o altura del viewport, lo que sea más grande
Unidades relativas al viewport

La función calc()

El ancho
de línea

El ancho de línea
Demasiado
estrecha
Cuerpo de texto
Rango ideal
Demasiado
ancha
0 50 75 100
Te añadiremos al equipo de voluntarios (lista de Twitter) y te asignaremos tus tareas para los días del evento.
Los voluntarios deberían estar en Zaragoza el viernes 12 de enero a primera hora de la tarde, a tiempo para conocer
el lugar, conocer al resto del equipo, hacer un resumen y asignar tareas. Si por alguna razón vas a llegar más tarde y,
aun así, quieres seguir participando como voluntario/a, hay un apartado especial en el formulario para ti.
Nos gustaría que
nuestros voluntarios
cumplan con el código de
conducta establecido y
sean comprometidos.
Al ser un evento sin ánimo de lucro no podemos hacer frente
al cargo de los gastos de los voluntarios, lo que implica que el
voluntario debe costearse sus gastos de viaje y alojamiento. Sin
embargo, tu entrada será gratuita.

Ancho máximo

Interlineado

Es la primera vez que se celebra
una WordCamp en Zaragoza, un
evento que reúne a personas de
diferentes niveles y experiencia
y que cuenta con un aforo de
250 personas.
250 personas.
250 personas.
Line-height

Line-height
250 personas.
Es la primera vez que se celebra una WordCamp en Zaragoza, un
evento que reúne a personas de diferentes niveles y experiencia
y que cuenta con un aforo de 250 personas.

Alineación

Veremos algunas pautas de
composición de textos optimizados
para todos los dispositivos, que
nos ayudarán a construir mejores
sitios web responsive para todos
los usuarios. Tipo de letra, tamaño,
interlineado, ancho de línea...
aprenderemos a tomar decisiones
de diseño para conseguir comu-
nicar eficazmente,
Veremos algunas pautas de
composición de textos optimizados
para todos los dispositivos,
que nos ayudarán a construir
mejores sitios web responsive
para todos los usuarios. Tipo
de letra, tamaño, interlineado,
ancho de línea... aprenderemos a
tomar decisiones de diseño para
conseguir comunicar eficazmente,
No justifiques los textos

Viudas, huérfanas
y saltos de línea
con sentido

 
Espacio de no separación


Guión discrecional

Para saber más
letterror.com
typographica.org
graffica.info
i
Fuentes variables

¡gracias!

Mejora el diseño de tu web: Tipografía responsive

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Mejora el diseño de tu web: Tipografía responsive

Ähnlich wie Mejora el diseño de tu web: Tipografía responsive (20)

Mehr von Ana Cirujano

Mehr von Ana Cirujano (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Mejora el diseño de tu web: Tipografía responsive