Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
El descubrimiento de la superconductividad en el grafeno bicapa rotado con ángulo mágico (MATBG), publicado en Nature en marzo de 2018, ha sido citado más de 700 veces. La simulación cuántica ab initio de los electrones fuertemente correlacionados en este material requiere el uso de ordenadores cuánticos aún no disponibles. Por ahora solo se puede recurrir a las observaciones experimentales. Se publican cuatro artículos, tres de ellos en Nature, con medidas espectroscópicas de los electrones en este material. Sus conclusiones son similares, con pequeñas diferencias debidas a que los dispositivos explorados presentan diferentes defectos de fabricación. Servirán de inspiración para los físicos teóricos, pero se requieren dispositivos más perfectos y medidas más precisas para explorar todos los fenómenos que se ocultan en este material «mágico».
En el grafeno bicapa se puede rotar una de las dos hojas con un ángulo pequeño (próximo a 1º); se observa la aparición un patrón de moiré a larga escala que controla el comportamiento de los electrones. La estructura de bandas se aplana (para ciertos ángulos llamados «mágicos»), con cuatro estados de conducción (y otros tantos de valencia) que pueden estar parcialmente llenos (o vacíos). Se observan estados aislantes (con electrones fuertemente correlacionados) para el estado de neutralidad y para los niveles de llenado enteros (con 1, 2 o 3 electrones en las bandas de conducción, o con 1 , 2 o 3 huecos en las de valencia; entre estos estados se observan «domos» superconductores (cuyo número, posición y temperatura crítica depende de los defectos de fabricación del MATBG usado).
¿QUÉ SON LAS FUENTES VARIABLES?
Hay muchas definiciones, pero antes debes tener claro un concepto básico sobre lo que estamos hablando, y no me pongo académico, es que te hará falta para entender los conceptos de los que vamos a tratar.
Tipografía y fuente
Aunque se suelen usar de modo indistinto cuando hablamos de tipos de letra (otro término para ayudar a la confusión), en realidad tipografía y fuente son términos bien distintos.
La tipografía se refiere a toda una familia de diseños de letras, como por ejemplo la tipografía Montserrat, muy común estos días.
Por otra parte, la fuente es cada uno de los archivos de esa familia, de la tipografía. Por seguir con la tipografía Montserrat, fuentes de esta familia serían «Monserrat Bold«, «Monserrat Regular» o «Monserrat Italic«.
Para no enrollarme, y resumiendo …Una tipografía es lo que ves, una fuente es lo que usasCLIC PARA TUITEAR
¿Y entonces qué es una fuente variable?
Las fuentes variables son fuentes únicas que pueden modificarse mediante CSS según 5 criterios o ejes diferentes. Cada eje controla una faceta particular de la apariencia de la fuente y tiene una etiqueta CSS correspondiente.
- Peso (wght en CSS)
- Inclinación (slnt en CSS)
- Cursiva (ital en CSS)
- Tamaño óptico (opsz en CSS)
- Ancho (wght en CSS)
Y luego hay un eje personalizado llamado Grado, representado por GRAD (en mayúsculas) en CSS.
Al combinar todos esos ejes diferentes, puedes hacer que cualquier tipografía haga casi lo que quieras, incluso animaciones.
En el siguiente vídeo puedes ver como modificamos 3 de estos ejes en una fuente variable:
Tú mismo puedes hacer pruebas en la web de v-fonts.
Esta tecnología permite que una sola fuente se comporte como múltiples fuentes.
Se hace definiendo las variaciones dentro de la fuente. Estas variaciones provienen del hecho de que cada carácter sólo tiene un contorno. Los puntos que construyen este esquema tienen instrucciones sobre cómo deben comportarse.
No es necesario definir múltiples pesos de fuentes porque pueden interpolarse entre definiciones muy gruesas y muy finas. Esto también permite generar estilos intermedios, por ejemplo, semi-negrita y negrita.
Estas variaciones pueden actuar en uno o más ejes de la fuente. En la imagen de abajo, tienes un ejemplo de esta interpolación de contorno en la letra A.
El «eje de variación»
La madre del cordero de todo esto de las fuentes variables es el llamado «eje de variación«, que que describe el rango permitido de ese aspecto particular del diseño tipográfico.
De este modo, el «eje de peso» describe cuán ligeras o negritas pueden ser las figuras; el «eje de anchura» describe cuán estrechas o anchas pueden ser; el «eje cursiva» describe si hay formas cursivas y pueden activarse o desactivarse a voluntad, etc.
Ten en cuenta que un eje puede ser un rango o una opción binaria (El peso puede oscilar entre 1-999, mientras que la cursiva puede ser simplemente 0 o 1 – apagado o encendido).
Se pueden hacer usos realmente creativos con variaciones del ejes personalizados.
Al final, esta frase define muy bien lo que es una fuente variable:Una fuente variable es una única fuente que se comporta como si fueran muchas fuentes #VariableFontsCLIC PARA TUITEAR
FUENTES VARIABLES Y OPTIMIZACIÓN WEB
En el pasado, una tipografía se creaba como un número de fuentes individuales, y cada fuente representaba una combinación específica de ancho/peso/estilo.
En tal caso, para utilizar un tipo de letra para un uso típico en una web para el cuerpo de un texto, se necesitarían al menos cuatro archivos: regular, cursiva, negrita, negrita y cursiva negrita.
Por lo tanto, tendrías archivos separados para «Montserrat Regular«,»Montserrat Bold» y «Montserrat Bold Italic«, lo que significa que podrías terminar con 20 ó 30 archivos de fuentes diferentes para representar un tipo de letra completo (podría ser varias veces mayor si un tipo de letra grande también tiene diferentes anchos).
Si quisieras añadir más pesos, como uno más ligero para los subtítulos o uno más pesado para dar más énfasis, eso significaría varios archivos más.
Esto resulta en más peticiones HTTP, y más datos que se descargan (generalmente alrededor de 20k o más por archivo).
Con una fuente variable, todas esas permutaciones pueden estar contenidas en un solo archivo.
Ese archivo podría ser más grande que una sola fuente, pero en la mayoría de los casos más pequeño, o más o menos del mismo tamaño que los 4 que puede cargar para el cuerpo del texto, y solo me estoy refiriendo a cuando hagan falta solamente 4 archivos.
La ventaja de elegir la fuente variable es que tienes acceso a toda la gama de pesos, anchos y estilos disponibles, en lugar de tener que limitarse a los pocos que antes habría cargado por separado.
Esto permite técnicas tipográficas comunes, como el ajuste de diferentes encabezados de tamaño en diferentes pesos para una mejor legibilidad en cada tamaño, o el uso de un ancho ligeramente más estrecho para pantallas densas en datos.
A modo de comparación, es típico en un sistema tipográfico que una revista utilice de 10 a 15 o más combinaciones diferentes de peso y ancho en toda la publicación, lo que ofrece una gama mucho más amplia de estilos que los típicos actualmente en la web (o incluso prácticos por razones de rendimiento únicamente).
Pero es que el rendimiento es una ventaja clave de las fuentes variables.
El archivo de la fuente AvenirNext_Variable.ttf, por ejemplo, solo pesa 89kB, pero crea un rango completo de pesos.
Una fuente estándar comparable puede que tenga un archivo más pequeño pero solo aplicaría un peso y estilo. Luego, para añadir más opciones, habría que incorporar más archivos, lo que aumentaría el peso de la página considerablemente.
Pero es que podemos ir aún más allá.
Cuando hablamos de formatos de fuentes hablamos de archivos WOFF2, que son en esencia archivos TTF con una compresión adicional.
Los archivos WOFF2 son más pequeños porque tienen algoritmos personalizados de pre-proceso y compresión, con los que se puede conseguir una reducción de -30% frente a otros formatos.
Google ofrece una herramienta de línea de comandos para comprimir nuestro archivo, convirtiéndolo al formato woff2. En un sistema UNIX, como el de la mayoría de nuestros servidores, podríamos usar estos comandos así:
| 123 | git clone –recursive https://github.com/google/woff2.gitcd woff2make clean all |
Para, después de instalar, comprimir nuestra fuente variable así:
| 1 | woff2_compress AvenirNext_Variable.ttf |
Y terminamos con un archivo de 42kb, que redujo a la mitad el tamaño del archivo.
Para usar este archivo, sólo necesitamos modificar el archivo de origen y su formato para adaptarlo a este nuevo archivo:
| 1 | src: url(‘AvenirNext_Variable.woff2’) format(‘woff2’); |
Con lo que ahora tendríamos un solo archivo de 42Kb que puede usarse en todos los pesos de la fuente en nuestra web.
¿Y CÓMO LAS USO EN WORDPRESS?
Parámetros de la metafuente de Knuth
Por si no te has dado cuenta, si sabes un poco de CSS y aplicas los conceptos introducidos por el eje de variaciones y los parámetros de las fuentes variables puedes desde ya usar fuentes variables en tu WordPress.
Resumiendo, el proceso podría ser así:
Instala las fuentes variables
Lo primero es instalar la fuente en tu web. Puedes usar un plugin como Use Any Font y subirlo directamente, o si usas temas como Divi, hacerlo desde su propia interfaz.
Luego enlazas a la fuente en tu código usando @font-face, o a la antigua usanza.
Independientemente del método que elijas, una vez la tengas en tu sitio, usarlas es bastante fácil.
Personaliza tu CSS
Como las fuentes variables están basadas en CSS, lo mejor es que vayas a donde quiera que hayas añadido tu CSS personalizado.
Ya sea en un archivo custom.css, una hoja de estilo stylesheet.css de un tema hijo, en el CSS adicional de tu personalizador de WordPress, o donde sea (algunos temas incluyen una zona para personalizar códigos).
Introducirás un código como este (con el nombre de las fuentes variables que estés usando):
| 1234 | @font-face { font-family: ‘Gingham’; src: url(‘Gingham.woff2’) format(‘woff2’),} |
Utiliza el CSS para controlar las fuentes variables. Usando los ejes reservados puedes usar las propiedades font-style, font-weight, font-stretch y font-optical-sizing (y si usas los ejes personalizados tienes que usar la propiedad font-variation-setting) para ajustar el eje, como ya hemos visto antes.
Añade tu estilo
Ahora es el momento de darle estilo de alguna manera. Puedes hacer lo que quieras, y el estilo se puede aplicar a cualquier clase o ID.
Puedes hacer que se aplique a todo el cuerpo o al h1, h2, h3 o incluso a p. Tú eliges. Son fuentes variables a fin de cuentas.
Hay dos maneras de abordar este tema. La primera es en una única y eficiente línea de CSS usando font-variation-settings:
| 12345 | h3 { font-family: ‘Gingham’,Helvetica,sans-serif; font-size: 35px; font-variation-settings: ‘wght’ 700, ‘wdth’ 75; } |
También puedes añadirlas con otro CSS, como float, o z-axis o cualquier otra cosa.
También puedes introducir los ejes en líneas individuales:
| 123456 | h3 { font-family: ‘Gingham’,Helvetica,sans-serif; font-size: 35px; wdth: 900; wght: 100; } |
Con ambos métodos consigues lo mismo.
Guardas los cambios y ya estás usando fuentes variables en tu WordPress.
¿SON LAS FUENTES VARIABLES COMPATIBLES CON CUALQUIER NAVEGADOR?
Actualmente Safari y Chrome son compatibles totalmente, y en breve Edge y Firefox.
En cualquier caso, a la hora de diseñar con fuentes variables puedes forzar la compatibilidad usando @supportsen tu CSS, como en este ejemplo:
| 1234567891011121314 | @supports (font-variations-settings: ‘wdth’ 200) { @font-face { /* https://github.com/TypeNetwork/Amstelvar */ font-family: AmstelvarAlpha; src: url(‘../fonts/AmstelvarAlpha-VF.ttf’); font-weight: normal; font-style: normal; } #font-amstelvar { font-family: AmstelvarAlpha; font-variation-settings: ‘wdth’ 400, ‘wght’ 98; }} |
¿TIENEN FUTURO LAS FUENTES VARIABLES?
Las fuentes variables tienen un gran futuro por delante.
Creo que la tecnología pasará por una fase adolescente en la que todo el mundo probará las fuentes variables más artísticas para hacer animaciones chulas y experimentar, pero finalmente madurará hasta convertirse en algo de uso global y eficiente.
La idea detrás de la tecnología es genial. Sólo espero que la gente no haga todo lo posible para crear fuentes de tipo «navaja suiza» que potencialmente puedan hacer «todo bien» pero «nada genial«, y casi convertirse en algo donde todo sea variable y se pueda crear cualquier tipografía con una sola.
Las fuentes pueden terminar sin tener personalidades claras, dejando la tarea de crear una tipografía que funcione para el diseñador y no para el tipógrafo.
