Acredito que as melhores fontes para o texto de qualquer site são aquelas sem serifa (sans-serif) e que não são monoespaçadas (monospace) porque são bem legíveis e tornam o texto bastante agradável. Seguem algumas sugestões baseadas na minha própria preferência (salvo uma exceção):
► Verdana (Windows)
Este é um parágrafo com font-family Verdana. É uma de minhas fontes favoritas porque é muito fácil de ler. A recomendo também para quem prefere fontes menores, porque mesmo com tamanho pequeno de 11 pixels esta fonte mantém um bom nível de legibilidade. Como você já notou, ela é sans-serif (sem serifa).
Uso inline:
Uso na folha de estilos:
p, div {font-family:Verdana, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs -–>
► Tahoma (Windows)
Esta era minha fonte favorita quando comecei a aprender HTML, CSS e JavaScript. Tahoma também é uma fonte sans-serif. Observe que ela é mais compacta, bem menos arredondada e por isso tem uma aparência bem mais “sisuda” do que a Verdana, mas também é fácil de ler no tamanho de 11 pixels.
Uso inline:
Uso na folha de estilos:
p, div {font-family:Tahoma, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->
► Arial (Windows)
Esta é a fonte padrão dos trabalhos acadêmicos, dos documentos oficiais e provavelmente também é a mais popular da web. Arial é uma fonte sans-serif. Com 11 pixels não é tão agradável de ler. Mas sou suspeita para julgar, porque a detesto em todos os tamanhos. Quando preciso ler um texto que está com esta fonte clico no Clearly imediatamente.
Uso inline:
Uso na folha de estilos:
p, div {font-family:Arial, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->
► Trebuchet MS (Windows)
Esta é a fonte atual do HTMHelen, então nem precisaria dizer que Trebuchet MS é minha sans-serif favorita. Com tamanho de 11 pixels ela é assim, bem chata de ler.
Uso inline:
Uso na folha de estilos:
p, div {font-family:'Trebuchet MS', sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->
► DejaVu Sans (Linux)
Se o público-alvo do seu blog são usuários Linux, a DejaVu Sans é uma boa escolha. Para não desprestigiar os visitantes que usam Windows e querem saber mais sobre software livre, sugiro definir como segunda fonte Verdana ou outra tipologia que você achar mais parecida. Com tamanho de 11 pixels ela é assim.
Uso inline:
Uso na folha de estilos:
p, div {font-family:'DejaVu Sans', Verdana, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->
► FreeSans (Linux)
Também para Linux temos a Free Sans, que é bonita e arredondada. Escolha como segunda fonte Verdana ou outra tipologia que você achar mais parecida. Com tamanho de 11 pixels ela é assim.
Uso inline:
Uso na folha de estilos:
p, div {font-family:'FreeSans', Verdana, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->
► Open Sans (web)
Open Sans é uma fonte que está hospedada na web. Com 11 pixels ela é assim. Você precisa adicionar também o seguinte código ao cabeçalho da página (antes de </head>) para que a fonte funcione:
</head>
Uso inline:
Uso na folha de estilos:
p, div {font-family:'Open Sans', serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->
► Numans (web)
Numans é uma fonte que está hospedada na web. Com 11 pixels ela é assim. Você precisa adicionar também o seguinte código ao cabeçalho da página (antes de </head>) para que a fonte funcione:
</head>
Uso inline:
Uso na folha de estilos:
p, div {font-family:Numans, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->
► Oxygen (web)
Oxygen é uma fonte que está hospedada na web. Com 11 pixels ela é assim. Você precisa adicionar também o seguinte código ao cabeçalho da página (antes de </head>) para que a fonte funcione:
</head>
Uso inline:
Uso na folha de estilos:
p, div {font-family:Oxygen, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->
► Muli (web)
Muli é uma fonte que está hospedada na web. Com 11 pixels ela é assim. Você precisa adicionar também o seguinte código ao cabeçalho da página (antes de </head>) para que a fonte funcione:
</head>
Uso inline:
Uso na folha de estilos:
p, div {font-family:Muli, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->
► Varela (web)
Varela é uma fonte que está hospedada na web. Com 11 pixels ela é assim. Você precisa adicionar também o seguinte código ao cabeçalho da página (antes de </head>) para que a fonte funcione:
</head>
Uso inline:
Uso na folha de estilos:
p, div {font-family:Varela, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->
► Arimo (web)
Arimo é uma fonte que está hospedada na web. Com 11 pixels ela é assim. Você precisa adicionar também o seguinte código ao cabeçalho da página (antes de </head>) para que a fonte funcione:
</head>
Uso inline:
Uso na folha de estilos:
p, div {font-family:Arimo, sans-serif;} <!-- se quiser usar como fonte padrão dos parágrafos e divs –->
Leia também:
Fonte das fontes web: Google Web Fonts
2 comentando:
Postar um comentário
Para deixar uma mensagem sem relação com o post acima use o livro de visitas. Está comentando pela primeira vez no HTMHelen? Sugiro que leia as regras para comentar.