O debate sobre em VS px VS% em tipografia ainda é válido

8

Eu tenho lido alguns artigos sobre por que em são melhores do que px em tipografia. E a base tem que estar em%, o melhor é mesmo ter body{ font-size:62.5%; }.

Um dos melhores artigos que encontrei está localizado aqui: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Basicamente, diz-se que o px não tem boa escala em sites e dispositivos. Sempre fiz tipografia em px e nunca encontrei nenhum problema. Também tenho trabalhado com algumas estruturas CSS e alguns temas wordpress, e sempre vejo que apenas o px normal é usado.

Agora vejo que a maioria dos artigos são escritos em em sua maioria há alguns anos atrás, por aí, eu queria saber se ainda é verdade que o px não escala bem, ou isso não é mais um ponto para os navegadores e dispositivos modernos .

Em uma nota lateral. Até li e vi em alguns sites que as pessoas até agora fazem todo o seu estilo em em. Por exemplo, o preenchimento e as margens são feitos em em.

Isso é necessário se você deseja ter um bom site de dimensionamento.

website-design typography Saif Bechan
fonte
2
Para tornar as coisas ainda mais confusas, a maioria dos navegadores modernos suportam relativa ems ou rems snook.ca/archives/html_and_css/font-size-with-rem .
paulmorriss 26/10/11
Há uma resposta melhor e mais recente no StackOverflow: stackoverflow.com/questions/11799236/…
Denis de Bernardy

Respostas:

3

Minha resposta, pois o próprio texto é um "não" definitivo. Bons navegadores trapaceiam (como deveriam) quando se trata de dimensionar fontes especificadas em unidades de pixel. O desenvolvedor da web deve manter-se independente de quaisquer diferenças nos dispositivos em que o conteúdo é processado.

Tente isso no editor Try3 do w3Schools :

<html>
<body>
<p style="font-size:1em">This is a paragraph.</p>
<p style="font-size:12pt">This is a paragraph.</p>
<p style="font-size:16px">This is a paragraph.</p>
<p style="font-size:100%">This is a paragraph.</p>
</body>
</html>

Em seguida, mantenha pressionada a tecla Ctrl e role com a roda do mouse ou pressione Ctrl-Numeric +. Todos devem ser redimensionados uniformemente em um bom navegador.

Não é garantido que os pixels sejam igualmente amplos e altos, indicando que a resolução sempre é 96DPI e as preferências do usuário podem ser aplicadas para aumentar ou diminuir o tamanho de todo o conteúdo. Tendo isso em mente, a maioria dos navegadores leva em consideração essas diferenças de resolução e dimensiona a saída de acordo com as preferências / hardware específicos. Se um navegador aplicasse estritamente as unidades de pixel reais, o navegador (ou o dispositivo de hardware em que ele é executado) seria condenado a ser percebido como falha pelo usuário final.

Dito isto, lembre-se de que o HTML não é otimizado para dimensionamento, mas para re-fluir o texto para a maior variedade possível de proporções de resolução (largura dividida pela altura). Os navegadores diferem no preenchimento de escala e nas margens quando especificados em unidades diferentes. Para projetos verdadeiramente escalonáveis ​​(por exemplo, onde a posição no plano de fundo é importante), deve-se considerar o uso de um formato escalável e sem fluxo, como SVG . Fazer preenchimento e margens em porcentagens é sempre arriscado!

Se você estiver usando um plano de fundo de imagem ou algo assim, e desejar que o preenchimento ou a margem seja um número específico de pixels para dentro, meu conselho é garantir que essas margens e preenchimentos sejam especificados em unidades de pixels!

Louis Somers
fonte
11
Apenas uma observação - o recurso "Tamanho do texto" no IE não dimensionará fontes que são explicitamente corrigidas usando ptou px.
Zhaph - Ben Duguid