modern font stacks

Pilas de fuentes modernas

Sistema de pila de fuentes CSS organizado por clasificación de tipos de letra para cada sistema operativo moderno

Las fuentes más rápidas disponibles. Sin descarga, sin cambios de diseño, sin destellos, solo renders instantáneos.

---

Sistema UI · Transición · Viejo estilo · Humanista · Humanista geométrico

Humanista clásico · neo-grotesco · la losa monoespacial serif · Código monoespacial

Industrial · sans redondeado · la losa serif · antiguo · didone · escrito a mano

---

Características adicionales / Soporte / complementos y extensiones del sistema operativo

UI del sistema

Las fuentes de interfaz de usuario del sistema son las nativas de la interfaz del sistema operativo. Son altamente legibles y fáciles de leer en tamaños pequeños, contienen muchos pesos de fuentes y es ideal para elementos de interfaz de usuario.

Pila de fuentes CSS

 font-family : system-ui , sans-serif;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
San Francisco	●	●	●	●	●	●	●	●	●
Segoe ui	●	●	●	●	●	●	●	●	●
Roboto	●	●	●	●	●	●	●	●	●
Ubuntu	●		●	●	●		●
Cantarell	●		●	●			●	●
Noto sin	●	●	●	●	●	●	●	●	●

Notas

• La interfaz de usuario del sistema es menos una pila de fuentes y más un valor de CSS, system-ui , que representa la fuente de interfaz de usuario predeterminada. Es ampliamente compatible con todos los sistemas operativos modernos.
• Las fuentes que se muestran son las fuentes predeterminadas para la interfaz de usuario en cada sistema operativo moderno.

Volver arriba ↑

Transicional

Los tipos de letra de transición son una mezcla entre el estilo antiguo y los tipos de letra modernos que se desarrollaron durante la iluminación. Uno de los ejemplos más famosos de una letra de transición es Times New Roman, que fue desarrollado para el periódico Times of London.

Pila de fuentes CSS

 font-family : Charter , 'Bitstream Charter' , 'Sitka Text' , Cambria , serif;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
Carta				●			●		●
Bitstream estatuto				●			●
Texto de Sitka				●			●
Cambría				●			●
Noto serif¹				●			●

Notas

• Charter es una letra fantástica y atemporal diseñada por Matthew Carter en 1987 para máquinas de fax de 300 ppi de baja resolución e impresoras láser. Tiene una gran altura X que ayuda con la legibilidad, y se mantiene maravillosamente en las pantallas de hoy.
• Charter for MacOS tiene un espacio no roto (   ). Este error ha sido reportado a Apple.
• Sitka es otra hermosa letra diseñada por Matthew Carter que se asemeja ligeramente a Charter. Sitka fue diseñado en la colaboración de las tecnologías de lectura avanzadas de Microsoft para optimizar la legibilidad.
• Android usa Noto Serif como su fuente serif predeterminada, por lo que no es necesario especificar en la pila.

Volver arriba ↑

Estilo antiguo

Los viejos tipos de letra de estilo se caracterizan por estrés diagonal, bajo contraste entre los trazos gruesos y delgados y las serifas redondeadas, y se desarrollaron en el período del Renacimiento. Uno de los ejemplos más famosos de una tipos de letra de estilo antiguo es Garamond.

Pila de fuentes CSS

 font-family : 'Iowan Old Style' , 'Palatino Linotype' , 'URW Palladio L' , P052 , serif;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
Iowan Old Style				●			●		●
Linotipo palatino				●			●
Urw paladio l				●			●
P052				●			●
Noto serif¹				●			●

Notas

• Android usa Noto Serif como su fuente serif predeterminada, por lo que no es necesario especificar en la pila.

Volver arriba ↑

Humanista

Los tipos de letra humanistas se caracterizan por sus formas orgánicas y caligráficas y bajo contraste entre los trazos gruesos y delgados. Estos tipos de letra están inspirados en la escritura a mano del período del Renacimiento y a menudo se consideran más legibles y más fáciles de leer que otros tipos de letra Sans-Serif.

Pila de fuentes CSS

 font-family : Seravek , 'Gill Sans Nova' , Ubuntu , Calibri , 'DejaVu Sans' , source-sans-pro , sans-serif;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
Seravek		●	●	●	●		●
Gill sans Nova			●	●			●	●
Ubuntu	●		●	●	●		●
Calibri			●	●			●
Dejavu sans	●			●			●
Fuente sans pro				●		●	●

Notas

• Gill Sans Nova está disponible como una fuente descargable complementaria.
• Source Sans Pro usa el nombre Source-Sans-Pro en Android, por lo que esta fuente solo se dirige a los dispositivos Android.

Volver arriba ↑

Humanista geométrico

Los tipos de letra humanistas geométricos se caracterizan por sus formas limpias y geométricas y anchos de trazo uniformes. Estos tipos de letra a menudo se consideran modernos y elegantes en apariencia, y a menudo se usan para titulares y otros fines de visualización. Futura es un famoso ejemplo de esta clasificación.

Pila de fuentes CSS

 font-family : Avenir , Montserrat , Corbel , 'URW Gothic' , source-sans-pro , sans-serif;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
Avena			●	●	●			●	●
Montserrat	●	●	●	●	●	●	●	●	●
Ménsula			●	●			●
Urw gótico			●			●
Fuente sans pro				●		●	●

Notas

• Avenir fue elegido por Avenir Siguiente para macOS porque el peso 300 es mucho más legible en la web sobre el peso 200 que Avenir a continuación tiene. Si está buscando un ultra luz o ultra negro, no dude en intercambiar Avenir por Avenir a continuación.
• Source Sans Pro usa el nombre Source-Sans-Pro en Android, por lo que esta fuente solo se dirige a los dispositivos Android.

Volver arriba ↑

Humanista clásico

Los tipos de letra humanistas clásicos se caracterizan por cómo los trazos se amplían sutilmente a medida que alcanzan los terminales de accidente cerebrovascular sin terminar en un serif. Estos tipos de letra están inspirados en las capitales romanas clásicas y el tallado de piedra en lápidas de período renacentista.

Pila de fuentes CSS

 font-family : Optima , Candara , 'Noto Sans' , source-sans-pro , sans-serif;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
Óptimo				●			●		●
Candara			●	●			●
Noto sin	●	●	●	●	●	●	●	●	●
Fuente sans pro				●		●	●

Notas

• Source Sans Pro usa el nombre Source-Sans-Pro en Android, por lo que esta fuente solo se dirige a los dispositivos Android.

Volver arriba ↑

Neo-grotesco

Los tipos de letra neor-grotescos son un estilo de sans-serif que se desarrolló a fines del siglo XIX y principios del XX y se caracteriza por sus formas limpias, geométricas y anchos de trazo uniformes. Uno de los ejemplos más famosos de una tipografía neo-grotesca es Helvetica.

Pila de fuentes CSS

 font-family : Inter , Roboto , 'Helvetica Neue' , 'Arial Nova' , 'Nimbus Sans' , Arial , sans-serif;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
Enterrar	●	●	●	●	●	●	●	●	●
Roboto	●	●	●	●	●	●	●	●	●
Helvetica Neue	●	●	●	●	●	●	●
Arial Nova			●	●			●
Nimbus sans				●		●	●
Arial				●		●	●

Notas

• Arial Nova está disponible como fuente descargable complementaria.
• Roboto se usa para Linux (MX Linux, Elementaryos, etc.) e instalaciones manuales. No representará a Roboto en Android, pero el genérico Sans-Serif de Android lo hará.

Volver arriba ↑

Losa monoespacial serif

Los tipos de tipos de losa de losa monoespacial se caracterizan por sus letras de ancho fijo, que tienen el mismo ancho independientemente de su forma y sus formas simples y geométricas. Se utiliza para emular la salida de la máquina de escribir para informes, trabajo tabular y documentación técnica.

Pila de fuentes CSS

 font-family : 'Nimbus Mono PS' , 'Courier New' , monospace;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
Nimbus mono ps				●			●
Mensajería nueva				●			●
Mono cutivo				●

Notas

• Nimbus Mono PS se especifica primero porque muchas distribuciones de Linux crean alias de nombre para Courier nuevo y no siempre representan una losa serif
• Cutive Mono no necesita estar representado en la pila, ya que Android crea un alias de nombre para Courier New.
• Mono cutivo desafortunadamente solo tiene un peso

Volver arriba ↑

Código monoespacial

Los tipos de letra de código monoespacial están diseñados específicamente para su uso en programación y otras aplicaciones técnicas. Estos tipos de letra se caracterizan por su diseño monoespaciado, lo que significa que todas las letras y personajes tienen el mismo ancho y sus formas claras y legibles.

Pila de fuentes CSS

 font-family : ui-monospace , 'Cascadia Code' , 'Source Code Pro' , Menlo , Consolas , 'DejaVu Sans Mono' , monospace;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
Sf mono			●	●	●	●	●	●
Código Cascadia	●	●	●	●		●	●
Código fuente pro		●	●	●	●	●	●	●
Menlo				●			●
Consolas				●			●
Dejavu sin mono				●			●
Droide sin mono				●

Notas

• SF Mono solo está disponible a través de ui-monospace en MacOS 10.15+ e iOS 13.3+ mientras usa Safari
• Droid sin mono para Android no necesita especificarse en la pila, ya que monospace es un nombre de alias para ello

Volver arriba ↑

Industrial

Los tipos de letra industriales se originaron a fines del siglo XIX y fueron fuertemente influenciados por los avances en tecnología e industria durante ese tiempo. Los tipos de letra industriales se caracterizan por sus formas de letras audaces, sans-serif, apariencia simple y directa, y el uso de líneas rectas y formas geométricas.

Pila de fuentes CSS

 font-family : Bahnschrift , 'DIN Alternate' , 'Franklin Gothic Medium' , 'Nimbus Sans Narrow' , sans-serif-condensed , sans-serif;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
Bahnschrift	●	●	●	●	●	●	●	●	●
DIN alternativo							●
Medio gótico de Franklin					●
Nimbus sin estrecho				●			●
Roboto condensado	●	●	●	●	●	●	●	●	●

Notas

• Dado que esta pila está limitada en los pesos en los sistemas operativos, es mejor usarlo como fuente de pantalla media/audaz
• Bahnschrift es una de la primera fuente variable agregada a Windows.
• Roboto Condensed usa el nombre Sans-Serif Condensado en Android, por lo que esta fuente solo se dirige a los dispositivos Android.

Volver arriba ↑

Sans redondeado

Los tipos de letra redondeados se caracterizan por las formas de letras curvas redondeadas y dan una apariencia más suave y amigable. Los bordes redondeados le dan a la letra una sensación más orgánica y juguetona, lo que lo hace adecuado para su uso en diseños informales o amigables para los niños. El estilo redondeado Sans-Serif ha sido popular desde la década de 1950, y sigue siendo ampliamente utilizado en publicidad, marca y otras formas de diseño gráfico.

Pila de fuentes CSS

 font-family : ui-rounded , 'Hiragino Maru Gothic ProN' , Quicksand , Comfortaa , Manjari , 'Arial Rounded MT' , 'Arial Rounded MT Bold' , Calibri , source-sans-pro , sans-serif;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
SF Pro redondeado	●	●	●	●	●	●	●	●	●
Hiragino Maru Gothic				●
Arena movediza			●	●			●
Comfortaa			●	●			●
Manjari	●			●			●
Mt redondeado Arial							●
Arial redondeado Mt Bold							●
Calibri			●	●			●
Fuente sans pro				●		●	●

Notas

• SF Pro Rounded solo está disponible a través de ui-rounded en MacOS 10.15+ e iOS 13.3+ mientras usa Safari
• Hiragino Maru Gothic es técnicamente un tipo de letra japonés, pero tiene soporte para todos los caracteres latinos. La fuente MAC no incluye un BOLD, por lo que se mostrará un BOLD falso en la pantalla.
• Se necesita MT redondeado Arial para Windows, mientras que se necesita Arial Rounded Mt Bold para iOS, Mac e instalaciones de Windows más antiguas
• Source Sans Pro usa el nombre Source-Sans-Pro en Android, por lo que esta fuente solo se dirige a los dispositivos Android. No es una letra redondeada, pero es mejor que Roboto aquí.

Volver arriba ↑

Losa serif

Los tipos de letra serif de losa se caracterizan por la presencia de serifs gruesos en forma de bloque en los extremos de cada forma de letra. Estas serifs generalmente están desanimadas, lo que significa que no tienen transiciones curvas o cónicas al golpe principal de la letra.

Pila de fuentes CSS

 font-family : Rockwell , 'Rockwell Nova' , 'Roboto Slab' , 'DejaVu Serif' , 'Sitka Small' , serif;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
Rocoso				●			●
Rockwell Nova			●	●			●	●
Rótula	●		●	●			●
Dejavu serif				●			●
Sitka pequeño				●			●
Noto serif				●			●

Notas

• Rockwell está incluido con Windows Office
• Rockwell Nova está disponible como fuente suplementaria descargable.
• Android usa Noto Serif como su fuente serif predeterminada, por lo que no es necesario especificar en la pila.

Volver arriba ↑

Antigüedad

Los tipos de letra antiguos, también conocidos como egipcios, son un subconjunto de tipos de letra serif que eran populares en el siglo XIX. Se caracterizan por sus serifs en bloque y su grueso peso de trazo uniforme.

Pila de fuentes CSS

 font-family : Superclarendon , 'Bookman Old Style' , 'URW Bookman' , 'URW Bookman L' , 'Georgia Pro' , Georgia , serif;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
Superclarendon			●	●			●		●
Bookman Old Style				●			●
Urw Bookman			●			●
Georgia Pro			●	●		●	●		●
Georgia				●			●
Noto serif¹				●			●

Notas

• Georgia Pro está disponible como una fuente descargable complementaria.
• Android usa Noto Serif como alias para Georgia , por lo que no es necesario especificar en la pila.

Volver arriba ↑

Didone

Los tipos de letra didone, también conocidos como tipos de letra modernos, se caracterizan por el alto contraste entre los trazos gruesos y delgados, el estrés vertical y las serifas de la línea sin correos. El estilo Didone surgió a fines del siglo XVIII y ganó popularidad durante el siglo XIX.

Pila de fuentes CSS

 font-family : Didot , 'Bodoni MT' , 'Noto Serif Display' , 'URW Palladio L' , P052 , Sylfaen , serif;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
Didot				●			●
Bodoni Mt				●			●		●
Noto serif pantalla	●	●	●	●	●	●	●	●	●
Urw paladio l				●			●
P052				●			●
Sylfaen				●
Noto serif¹				●			●

Notas

• Android usa Noto Serif como su fuente serif predeterminada, por lo que no es necesario especificar en la pila.
• Sylfaen no incluye un negrita, por lo que se mostrará un audaz en negrita en la pantalla.

Volver arriba ↑

Escrito

Los tipos de letra escritos a mano están diseñados para imitar la apariencia de la escritura a mano. A pesar de la amplia gama de estilos de escritura a mano, esta pila de fuentes tiende a adoptar un estilo de escritura más informal y cotidiano.

Pila de fuentes CSS

 font-family : 'Segoe Print' , 'Bradley Hand' , Chilanka , TSCu_Comic , casual , cursive;

Ver en su navegador (vista de artículo / caracteres)

? Vista previa de representación en los sistemas operativos

✅ Pesos y notas de fuentes

Pesas	100	200	300	400	500	600	700	800	900
Impresión de segoe				●			●
Mano de bradley							●
Chilanka				●
Tscu_comic				●
Muy pronto				●

Notas

• Próximamente usa el nombre casual en Android, por lo que esta fuente solo se dirige a los dispositivos Android.

Volver arriba ↑

Características adicionales

Soporte de emoji

¿Buscas agregar emojis nativos a tu página? Agregue estas fuentes al final de su pila de fuentes:

 'Apple Color Emoji' , 'Segoe UI Emoji' , 'Segoe UI Symbol' , 'Noto Color Emoji' 

Anti-aliasing

Renderizar su texto con anti-alias utilizando estas propiedades CSS:

 html {
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
}

Soporte del sistema operativo

• Windows 7 o más nuevo
• Android 10 o más nuevo (muy limitado con 8 fuentes)
• iOS 9.3 o más nuevo
• MacOS 10.9 (Mavericks) o más nuevo
• Linux (muestras 12 distribuciones populares)

Volver arriba ↑

Complementos y extensiones

• Pilas de fuentes modernas para CSS de viento de cola de Borisanthony
• Pilas de fuentes modernas para WordPress por LittleBigthing
• Las pilas de fuentes modernas son compatibles de forma nativa por WebStudio

Volver arriba ↑