La tipografía es una disciplina del diseño gráfico que estudia la composición de los textos en armonía con las imágenes y otros elementos. Tradicionalmente, en diseño editorial, los tipógrafos se han ocupado de conseguir composiciones perfectamente equilibradas y legibles, para que el lector las percibiera como agradables y fáciles de leer. Durante años ha sido muy difícil conseguir esto mismo en diseño web, ya que la tecnología no lo permitía. En los últimos años y gracias a tecnologías como OpenType o las webfonts, se mejora mucho el panorama, pero no se consiguen grandes avances, ya que se valora más la velocidad de carga de la web que su aspecto visual. Hoy, utilizando fuentes variables, podemos conseguir que los textos de una web se adapten al contexto del lector o usuario, para que sean más legibles y atractivos, consiguiendo un gran rendimiento, sin sacrificar la velocidad de carga de la web. Las fuentes variables cambian sus propiedades —como el ancho o el peso, por ejemplo— ¡utilizando un único archivo! Se espera que las fuentes variables sean totalmente utilizables en los navegadores a lo largo de este año, por lo que veremos cómo se utilizan en WordPress (código CSS) y qué ventajas tienen respecto a las demás fuentes. También veremos ejemplos reales de aplicación de fuentes variables y cómo se crea una fuente variable.

1. @acirujano | #WCGranada
FUENTES
VARIABLES
El futuro de la tipografía web
Ana Cirujano | WordCamp Granada | Noviembre de 2018

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

3. Un poco de historia:
la tipografía en la web

4. @acirujano | #WCGranada

5. @acirujano | #WCGranada
1996
Fuentes de sistema
2005
OpenType
2010
@fontface
webfonts
2010
Servicios de
tipografía web
Fuente: Tipografía del futuro para problemas del presente

6. @acirujano | #WCGranada

7. @acirujano | #WCGranada

8. @acirujano | #WCGranada
Características OpenType
Sintaxis para características OpenType en CSS

9. @acirujano | #WCGranada
Especificación OpenType versión 1.8
OpenType Font Variations
Microsoft + Google + Apple + Adobe =

10. @acirujano | #WCGranada
zeichenschatz.net

11. ¿Qué es una fuente
variable?

12. @acirujano | #WCGranada

13. @acirujano | #WCGranada

14. @acirujano | #WCGranada
Tipografía vs fuente

15. @acirujano | #WCGranada
Una fuente variable es una única fuente que
se comporta como si fueran muchas fuentes.
—John Hudson
@TiroTypeworks

16. @acirujano | #WCGranada

17. @acirujano | #WCGranada

18. @acirujano | #WCGranada
Ventajas de las fuentes variables
Experiencia de usuario
AnimaciónVersatilidad
Optimización
Tamaño pequeño
de archivo
Menos peticiones
al servidor
Mayor velocidad
de carga
Ahorro en el
consumo de datos

19. Los 5 ejes reservados
Peso, anchura, peso óptico,
inclinación y cursiva.

20. Peso
Weight
wght

21. @acirujano | #WCGranada

22. @acirujano | #WCGranada
Fuente de la image: Open Educational Resources for Typography

23. @acirujano | #WCGranada
Ampersand de la FF Meta Variable de Monotype, pesos de 100 a 900. Fuente

24. @acirujano | #WCGranada
Esquema de glifo predeterminado y posiciones de punto ajustadas para una instancia no predeterminada. Fuente

25. @acirujano | #WCGranada
Detalle del recuadro que muestra los ajustes del punto de contorno. Fuente

26. @acirujano | #WCGranada
Punto medio predeterminado cerca del eje con deltas en extremos mínimos y máximos. Fuente

27. @acirujano | #WCGranada

28. @acirujano | #WCGranada
Instancias nombradas. Protipo Variable on Axis-Praxis. Fuente

29. Anchura
Width
wdth

30. @acirujano | #WCGranada

31. @acirujano | #WCGranada

32. Tamaño óptico
Optical size
opsz

33. @acirujano | #WCGranada
Diferencias de contraste en el trazo de la Garamond (siglo XVII).
6pt a la izquierda y 72pt a la derecha. Fuente de la imagen

34. @acirujano | #WCGranada

35. @acirujano | #WCGranada

36. @acirujano | #WCGranada
Variaciones en el eje de tamaño óptico. Fuente de la imagen

37. @acirujano | #WCGranada

38. Cursiva — Inclinación
Italic — Slant
slnt — ital

39. @acirujano | #WCGranada
WordCamp Granada
WordCamp Granada
Falsa cursiva y cursiva verdadera de la Baskerville MT Std

40. Representaciones
de los ejes

41. @acirujano | #WCGranada

42. @acirujano | #WCGranada
Normalised design space of a 3-axis variable font.
[Typeface: Kepler, an Adobe Original designed by Robert Slimbach.] Fuente

43. ¿Cómo funcionan las
fuentes variables?

44. @acirujano | #WCGranada

45. @acirujano | #WCGranada

46. @acirujano | #WCGranada
Can I use variable fonts?

47. @acirujano | #WCGranada
Descargar Source Sans Variable
de Github
Cómo usar las fuentes variables en el mundo real. Fuente

48. @acirujano | #WCGranada
Subset WOFF2
TrueType
491Kb
WOFF2
29Kb
pyftsubset
(componente de fonttools)
Fontsquirrel

49. @acirujano | #WCGranada

50. @acirujano | #WCGranada
@font-face {
font-family: “SourceSans”;
src: url(source-sans-variable.woff2) format(“woff2-variations”),
url(source-sans.woff2) format(“woff2”);
font-weight: 1 999;
font-style: oblique –90 90;
font-stretch: 50% 200%;
}

51. @acirujano | #WCGranada
PROPIEDAD EJES RESERVADOS VALORES
Italic ital 0-1
Optical Size opsz auto o none
Slant slnt −90deg-90deg
Weight wght 1-999
Width wdth 100% is normal, 50% is ultra-condensed
and 200% is ultra-expanded

52. @acirujano | #WCGranada
.class {
font-variation-settings: “wght” 400, “wdth” 75;
}
.class {
font-family: “SourceSans”, sans-serif;
wdth: 400;
wght: 75;
}

53. @acirujano | #WCGranada
PROPIEDAD EJES RESERVADOS PROPIEDAD EQUIVALENTE
Italic ital font-style: italic
Optical Size opsz font-optical-sizing
Slant slnt font-style: oblique + angle
Weight wght font-weight
Width wdth font-stretch

54. @acirujano | #WCGranada
.class {
font-variations-settings: “wght” 300, “ital” 1,
“slnt” 45, “wdth” 50%, “opsz” 25;
}
.class {
font-style: italic;
font-optical-sizing: auto;
font-size: 25;
font-style: oblique 45deg;
font-stretch: 50%;
font-weight: 300;
}
Más información sobre el estándar

55. Ejes personalizados

56. @acirujano | #WCGranada
Ejes personalizados
Fuente

57. @acirujano | #WCGranada

58. @acirujano | #WCGranada
.class {
font-family: Decovar;
color: white;
font-variation-settings: “INLN” 285.094, “TSHR” 346.594,
“TRSB” 786.377, “SSTR” 84.268, “TWRM” 200, “SINL” 84.268,
“TOIL” 0, “TINL” 91.983, “WORM” 0, “wght” 400, “TFLR” 0,
“TRND” 0, “SWRM” 0, “TSLB” 277.155, “TBIF” 0;
}
Tenemos que especificar un valor para todos los ejes: inline, sheared, rounded slab,
stripes, worm terminal, inline skeleton, open inline terminal, inline terminal, worm,
weight, flared, rounded, worm skeleton, slab, bifurcated.
0 será el valor por defecto de esa propiedad.

59. @acirujano | #WCGranada

60. Ejemplos de uso de
fuentes variables

61. @acirujano | #WCGranada

62. @acirujano | #WCGranada
Fuente

63. @acirujano | #WCGranada

64. @acirujano | #WCGranada

65. @acirujano | #WCGranada
Fuente

66. @acirujano | #WCGranada
Fuente

67. @acirujano | #WCGranada

68. @acirujano | #WCGranada

69. @acirujano | #WCGranada
Fuente

70. @acirujano | #WCGranada
Fuente

71. @acirujano | #WCGranada

72. Recursos

73. @acirujano | #WCGranada

74. @acirujano | #WCGranada

75. @acirujano | #WCGranada

76. @acirujano | #WCGranada

77. @acirujano | #WCGranada

78. @acirujano | #WCGranada

79. ¿Cómo crear una
fuente variable?

80. @acirujano | #WCGranada

81. ¡Gracias!