modern font stacks

Pilhas de fontes modernas

CSS de fontes do sistema CSS organizado pela classificação do tipo de letra para cada sistema operacional moderno

As fontes mais rápidas disponíveis. Sem download, sem turnos de layout, sem flashes - apenas renderizações instantâneas.

---

Sistema UI · Transição · Estilo Antigo · Humanista · Geométrico Humanista

Humanista clássico · Neo-grotesco · Código Monospacy Slab Serif · Monospace

Industrial · Sans arredondado · Slab Serif · Antique · Didone · manuscrito

---

Recursos adicionais / Suporte ao sistema operacional / plugins e extensões

Sistema UI

As fontes de interface do usuário do sistema são nativas da interface do sistema operacional. Eles são altamente legíveis e fáceis de ler em tamanhos pequenos, contém muitos pesos de fonte e são ideais para elementos da interface do usuário.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
São Francisco	●	●	●	●	●	●	●	●	●
Segoe Ui	●	●	●	●	●	●	●	●	●
Roboto	●	●	●	●	●	●	●	●	●
Ubuntu	●		●	●	●		●
Cantarell	●		●	●			●	●
Noto Sans	●	●	●	●	●	●	●	●	●

Notas

• A interface do usuário do sistema é menos uma pilha de fontes e mais um valor CSS, system-ui , representando a fonte de interface do usuário padrão. É amplamente suportado em todos os sistemas operacionais modernos.
• As fontes mostradas são as fontes padrão para a interface do usuário em cada sistema operacional moderno.

Voltar ao topo ↑

Transitório

Os tipos de letra de transição são uma mistura entre o estilo antigo e os tipos de letra modernos que foram desenvolvidos durante o Iluminismo. Um dos exemplos mais famosos de um tipo de letra de transição é o Times New Roman, que foi desenvolvido para o jornal Times of London.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
Carta				●			●		●
Carta BitStream				●			●
Texto sitka				●			●
Cambria				●			●
Noto seriftante				●			●

Notas

• A Charter é um tipo de letra fantástico e atemporal projetado por Matthew Carter em 1987 para máquinas de fax de 300dpi de baixa resolução e impressoras a laser. Ele tem uma grande ajuda X de ajuda com legibilidade e se mantém lindamente nas telas de hoje.
• A Carta do MacOS possui um amplo espaço sem quebra (   ). Este bug foi relatado à Apple.
• Sitka é outro belo tipo de letra projetado por Matthew Carter, que se parece com a Carta. A Sitka foi projetada em colaboração em tecnologias de leitura avançada da Microsoft para otimizar a legibilidade.
• O Android usa o Noto Serif como sua fonte serif padrão, portanto, não é necessário especificar na pilha.

Voltar ao topo ↑

Estilo antigo

Os tipos de letra de estilo antigos são caracterizados por estresse diagonal, baixo contraste entre traços espessos e finos e serifas arredondadas, e foram desenvolvidas no período renascentista. Um dos exemplos mais famosos de um tipo de letra de estilo antigo é Garamond.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
Iowan antigo estilo				●			●		●
Linotipo Palatino				●			●
Urw palladio l				●			●
P052				●			●
Noto seriftante				●			●

Notas

• O Android usa o Noto Serif como sua fonte serif padrão, portanto, não é necessário especificar na pilha.

Voltar ao topo ↑

Humanista

Os tipos humanistas são caracterizados por suas formas orgânicas e caligráficas e baixo contraste entre traços espessos e finos. Esses tipos de letra são inspirados na caligrafia do período da Renascença e são frequentemente considerados mais legíveis e mais fáceis de ler do que outros tipos de tipo de sans-serif.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
Seravek		●	●	●	●		●
Gill Sans Nova			●	●			●	●
Ubuntu	●		●	●	●		●
Calibri			●	●			●
Dejavu Sans	●			●			●
Fonte sans pro				●		●	●

Notas

• Gill Sans Nova está disponível como uma fonte suplementar para download.
• O Fonte Sans Pro usa o nome da fonte-SANS-PRO no Android, portanto, essa fonte tem como alvo apenas dispositivos Android.

Voltar ao topo ↑

Humanista geométrico

Os tipos de tipos humanistas geométricos são caracterizados por suas formas limpas e geométricas e larguras uniformes do AVC. Esses tipos de letra são frequentemente considerados modernos e elegantes de aparência, e são frequentemente usados para manchetes e outros fins de exibição. Futura é um exemplo famoso dessa classificação.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
Avenir			●	●	●			●	●
Montserrat	●	●	●	●	●	●	●	●	●
Mísula			●	●			●
URW GOTHIC			●			●
Fonte sans pro				●		●	●

Notas

• A Avenir foi escolhida sobre a Avenir a seguir para MacOS porque o peso 300 é muito mais legível na web com o peso de 200 que a Avenir a seguir possui. Se você está procurando um Ultra-Light ou Ultra-Black, fique à vontade para trocar Avenir por Avenir a seguir.
• O Fonte Sans Pro usa o nome da fonte-SANS-PRO no Android, portanto, essa fonte tem como alvo apenas dispositivos Android.

Voltar ao topo ↑

Humanista clássico

Os tipos humanistas clássicos são caracterizados pela maneira como os traços se ampliam sutilmente à medida que atingem os terminais do AVC sem terminar em uma serifa. Esses tipos de letra são inspirados nas capitais romanas clássicas e pela escultura em lápides renascentistas.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
Optima				●			●		●
Candara			●	●			●
Noto Sans	●	●	●	●	●	●	●	●	●
Fonte sans pro				●		●	●

Notas

• O Fonte Sans Pro usa o nome da fonte-SANS-PRO no Android, portanto, essa fonte tem como alvo apenas dispositivos Android.

Voltar ao topo ↑

Neo-grotesco

Os tipos de letra neo-grotesco são um estilo de sans-serif que foi desenvolvido no final do século XIX e início do século XX e é caracterizado por suas formas geométricas limpas e geométricas e larguras uniformes de AVC. Um dos exemplos mais famosos de um tipo de letra neo-grotesca é Helvetica.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
Inter	●	●	●	●	●	●	●	●	●
Roboto	●	●	●	●	●	●	●	●	●
Helvetica Neue	●	●	●	●	●	●	●
Arial Nova			●	●			●
Nimbus sem				●		●	●
Arial				●		●	●

Notas

• A Arial Nova está disponível como uma fonte suplementar para download.
• O Roboto é usado para Linux (MX Linux, Elementaryos, etc) e instalações manuais. Ele não renderá Roboto no Android, mas o SANS-Serf genérico do Android.

Voltar ao topo ↑

Monospace laje serif

Os tipos de letra-serif de laje monoespacial são caracterizados por suas letras de largura fixa, que têm a mesma largura, independentemente de sua forma, e suas formas geométricas simples e geométricas. Usado para imitar a saída da máquina de escrever para relatórios, trabalho tabular e documentação técnica.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
Nimbus mono ps				●			●
Courier novo				●			●
Mono cutivo				●

Notas

• O Nimbus Mono PS é especificado primeiro porque muitas distritos Linux criam um pseudônimo de nomes para correio novo e nem sempre representa uma laje serif
• O Mono Cutive não precisa ser representado na pilha, pois o Android cria um pseudônimo de nome para Courier New.
• Infelizmente, o mono cutivo só tem um peso

Voltar ao topo ↑

Código Monospacial

Os tipos de letra de código Monospace são projetados especificamente para uso em programação e outras aplicações técnicas. Esses tipos de letra são caracterizados por seu design monoespacial, o que significa que todas as letras e caracteres têm a mesma largura e suas formas claras e legíveis.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
SF Mono			●	●	●	●	●	●
Código Cascadia	●	●	●	●		●	●
Código -fonte pro		●	●	●	●	●	●	●
Menlo				●			●
Consolas				●			●
Dejavu sem mono				●			●
Droid sans mono				●

Notas

• O SF Mono está disponível apenas via ui-monospace no MacOS 10.15+ e iOS 13.3+ enquanto usa o Safari
• Droid Sans Mono para Android não precisa ser especificado na pilha, pois monospace é um alias de nome para isso

Voltar ao topo ↑

Industrial

Os tipos de letra industriais se originaram no final do século XIX e foram fortemente influenciados pelos avanços da tecnologia e da indústria durante esse período. Os tipos de letra industriais são caracterizados por suas formas de letra ousadas, sem serrif, aparência simples e direta e o uso de linhas retas e formas geométricas.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
Bahnschrift	●	●	●	●	●	●	●	●	●
Din Alternate							●
Médio gótico de Franklin					●
Nimbus sem estreito				●			●
Roboto condensado	●	●	●	●	●	●	●	●	●

Notas

• Como essa pilha é limitada em pesos nos sistemas operacionais, é melhor usar como uma fonte de exibição média/ousada
• O Bahnschrift é uma das primeiras fontes variáveis adicionadas ao Windows.
• O Roboto Condensed usa o nome sem seriforado sob o Android, então essa fonte tem como alvo apenas dispositivos Android.

Voltar ao topo ↑

Sans arredondado

Os tipos de letra arredondados são caracterizados pelas formas de letra curvadas arredondadas e dão uma aparência mais suave e amigável. As bordas arredondadas dão ao tipo de letra uma sensação mais orgânica e divertida, tornando-o adequado para uso em designs informais ou adequados para crianças. O estilo sem serrif arredondado é popular desde a década de 1950 e continua sendo amplamente utilizado em publicidade, marca e outras formas de design gráfico.

Pilha de fontes 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 no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
SF Pro arredondado	●	●	●	●	●	●	●	●	●
Hiragino Maru Gothic				●
Areia movediça			●	●			●
Comfortaa			●	●			●
Manjari	●			●			●
Arial arredondado Mt							●
Arial arredondado mt ousado							●
Calibri			●	●			●
Fonte sans pro				●		●	●

Notas

• O SF Pro arredondado está disponível apenas via ui-rounded no MacOS 10.15+ e iOS 13.3+ enquanto usa o Safari
• Hiragino Maru Gothic é tecnicamente um tipo de letra japonês, mas tem suporte para todos os caracteres latinos. A fonte MAC não inclui um BOLD, para que um falso em negrito seja exibido na tela.
• O MT arredondado do Arial é necessário para o Windows, enquanto o Arial arredondado MT Bold é necessário para iOS, Mac e instalações de Windows mais antigas
• O Fonte Sans Pro usa o nome da fonte-SANS-PRO no Android, portanto, essa fonte tem como alvo apenas dispositivos Android. Não é um tipo de letra arredondado, mas é melhor do que Roboto aqui.

Voltar ao topo ↑

Slab Serif

Os tipos de letra serif de laje são caracterizados pela presença de serifas espessas e semelhantes a blocos nas extremidades de cada forma de letra. Esses serifs geralmente não são cracketados, o que significa que não têm transições curvas ou cônicas para o golpe principal da letra.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
Rockwell				●			●
Rockwell Nova			●	●			●	●
Slab Roboto	●		●	●			●
Dejavu Serif				●			●
Sitka pequena				●			●
Noto serif				●			●

Notas

• Rockwell está incluído no escritório do Windows
• Rockwell Nova está disponível como uma fonte suplementar para download.
• O Android usa o Noto Serif como sua fonte serif padrão, portanto, não é necessário especificar na pilha.

Voltar ao topo ↑

Antigo

Tipas de letra antigas, também conhecidas como egípcias, são um subconjunto de letra serifa que eram populares no século XIX. Eles são caracterizados por seus serifs em forma de bloco e peso de traço uniforme espesso.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
Superclarendon			●	●			●		●
Bookman antigo estilo				●			●
URW Bookman			●			●
Georgia Pro			●	●		●	●		●
Geórgia				●			●
Noto seriftante				●			●

Notas

• O Georgia Pro está disponível como uma fonte para download suplementar.
• O Android usa o Noto Serif como alias para Georgia , portanto, não há necessidade de especificar na pilha.

Voltar ao topo ↑

Didone

Os tipos de letra Didone, também conhecidos como tipos de letra modernos, são caracterizados pelo alto contraste entre traços espessos e finos, tensão vertical e serifas de cabelo sem suporte. O estilo Didone surgiu no final do século XVIII e ganhou popularidade durante o século XIX.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
Didot				●			●
Bodoni Mt				●			●		●
Noto Serif Display	●	●	●	●	●	●	●	●	●
Urw palladio l				●			●
P052				●			●
Sylfaen				●
Noto seriftante				●			●

Notas

• O Android usa o Noto Serif como sua fonte serif padrão, portanto, não é necessário especificar na pilha.
• Sylfaen não inclui um BOLD, para que um falso em negrito seja exibido na tela.

Voltar ao topo ↑

Manuscrito

Os tipos de letra manuscritos são projetados para imitar a aparência da caligrafia. Apesar da vasta gama de estilos de caligrafia, essa pilha de fontes tende a adotar um estilo de caligrafia mais informal e cotidiano.

Pilha de fontes CSS

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

Ver no seu navegador (exibição / personagens do artigo)

? Visualizar a renderização em sistemas operacionais

✅ Pesos e notas de fontes

Pesos de fonte	100	200	300	400	500	600	700	800	900
Segoe Print				●			●
Mão de Bradley							●
Chilanka				●
Tscu_comic				●
Em breve				●

Notas

• Em breve, usa o nome casual no Android, então essa fonte tem como alvo apenas dispositivos Android.

Voltar ao topo ↑

Recursos adicionais

Suporte emoji

Procurando adicionar emojis nativos à sua página? Anexe essas fontes no final da sua pilha de fontes:

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

Anti-aliasing

Renderize seu texto com anti-aliasing usando estas propriedades CSS:

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

Suporte ao sistema operacional

• Windows 7 ou mais recente
• Android 10 ou mais recente (muito limitado com 8 fontes)
• iOS 9.3 ou mais novo
• MacOS 10.9 (Mavericks) ou mais recente
• Linux (amostrado 12 distros populares)

Voltar ao topo ↑

Plugins e extensões

• Fontes modernas para CSS de Tailwind CSS por Borisanthony
• Fontes modernas pilhas para o WordPress por LittleBigthing
• As pilhas de fontes modernas são suportadas nativamente pelo WebStudio

Voltar ao topo ↑