Cuidados com o Tamanho da Fonte Usada

Ao estilizar o texto do site, tenha cuidado ao definir o tamanho das fontes. Embora usar fontes pequenas seja muito atrativo, pois você conseguirá inserir mais conteúdo em menos espaço, isso pode resultar em deixar de atrair um determinado público devido ao tamanho da fonte usada. Assim, opte por uma das duas opções a seguir:

1. Não defina tamanho para fontes – dessa forma, a folha de estilo do browser ou do usuário determinará o tamanho das fontes.

2. Use unidades relativas para definir o tamanho das fontes – use porcentagem ou unidade em “em” para definir o tamanho das fontes. Dessa forma, o tamanho da fonte poderá ser alterado no browser de acordo com a preferência do usuário, podendo se ajustar às necessidades de cada um. Tamanhos relativos para fontes são fáceis de implementar quando usamos um ou uma combinação dos três métodos a seguir descritos:

• Aplicar font-size aos containers – Os tamanhos de fontes podem ser definidos de forma global para cada container ou individualmente para os elementos neles contidos. Isso resulta em um alto grau de controle sobre os elementos no layout. Por exemplo: diferentes elementos <h1> podem ter diferentes tamanhos de fontes, dependendo do seu container. Assim, pode-se definir um tamanho diferente para cada container da seguinte maneira:
#header h1 { font-size: 200%; } #content h1 { font-size: 100%; }
• Aplicar font-size ao body­– Um tamanho de fonte relativo pode ser aplicado ao elemento body, fazendo com que todos os elementos usem aquele mesmo tamanho como base. No exemplo mostrado na Figura 5, definimos o tamanho da fonte em 80% no elemento body. Isso faz com que esse valor seja usado em todo o site, exceto nos elementos mais específicos em que for definido outro valor.
body { font-size: 80%; }
• Aplicar font-size a cada elemento individualmente – Um tamanho relativo de fonte pode ser aplicado diretamente nos elementos HTML. Por exemplo:
p { font-size: 85%; } h1 { font-size: 150%; }

Contudo, ao aplicar essa última regra a elementos mais externos e também a elementos mais específicos, tem-se como resultado tamanhos de fontes proporcionais ao contexto. Por exemplo, definir font-size: 80% em body; como body está no contexto do browser, o resultado é 80% do tamanho definido pelo browser, e definir font-size: 200% em h1 do div header resulta num tamanho que é 160% do tamanho original do browser, ou seja, como o contexto é o elemento body, então tem-se 200% de 80% = 160%. Um exemplo muito comum são listas aninhadas uma dentro da outra. Se a lista for definida com um tamanho de 85%, obtém-se um tamanho que é 85% de 85% definido para a lista pai.Nesse caso, a lista filha será renderizada com uma fonte que será 72,25%.

Caso se deseje ter o mesmo tamanho de fonte para ambas as listas, deve-se adicionar a seguinte regra: