É fácil: as fontes não precisam corresponder à resolução, precisam corresponder à densidade de pixels .
A densidade de pixels é medida em pixels por polegada ( PPI ) ou pixels por centímetro. Há também uma unidade de medida chamada pixels independentes de densidade ( DP ) . É definido 1dp
o tamanho de um pixel em uma 160 PPI
tela.
Agora, voltando às fontes, tente fazer este teste: coloque seu laptop em 720p. Dê uma olhada no tamanho da fonte. Agora conecte-o ao monitor de 1080p de 42 "da área de trabalho. Se o monitor exibir as informações corretas sobre seu tamanho, a fonte deverá ter EXATAMENTE o mesmo tamanho da tela de 720p. Imagine como seria estranho se o texto em seu O laptop tinha um tamanho diferente do texto do monitor do seu desktop.Com isso dito, resoluções maiores devem fornecer mais detalhes à fonte, telas maiores devem fornecer mais conteúdo a ser mostrado.
O mesmo fato pode ser observado nos editores de texto. Uma 72pt
fonte deve ter a mesma aparência na tela quando impressa em papel.
Tudo isso significa que você provavelmente deve querer o mesmo tamanho em todos os tamanhos de tela (com algumas exceções). Se você deseja se basear em algum lugar, os sites geralmente usam 12pt
fontes, o MS Windows usa 11pt
e 12pt
fontes.
Este gráfico (também incluído na parte inferior da resposta) nos diz que o 12pt
CSS é aproximadamente igual ao 16px
CSS (como se isso não fosse confuso o suficiente, um px no CSS é o mesmo que o dp em qualquer outro lugar), então digamos que você 16dp
criará suas fontes no LibGDX.
No seu jogo, use o FreeTypeFontGenerator
para gerar fontes dinamicamente, assim você pode considerar a densidade da tela ao criá-las:
BitmapFont createFont(FreeTypeFontGenerator ftfg, float dp)
{
return ftfg.generateFont((int)(dp * Gdx.graphics.getDensity()));
}
//On Init
BitmapFont buttonFont = createFont(arial, 16); //16dp == 12pt
Isso funciona porque Gdx.graphics.getDensity()
é igual a YourScreenDensity/160
, portanto, é um "fator de escala" para levar as coisas ao tamanho que elas teriam em uma tela de 160ppi.
Sobre as exceções que mencionei anteriormente: você provavelmente desejará redimensionar as fontes de acordo com o tamanho da tela em caso de logotipos, promoções, etc. , de qualquer forma.
A outra exceção é o texto em telas minúsculas. Telas de telefone de 4,5 polegadas ou menores, vestíveis. Normalmente, você não terá tempo para criar conteúdo de rolagem ou não poderá colocar tanto conteúdo nessa tela. Você pode tentar reduzir a fonte 1dp
, como o o leitor provavelmente terá o telefone muito próximo do rosto, provavelmente não terá problemas para ler.Lembre-se de que pode incomodar o leitor que lê textos pequenos ilegíveis.
TL; DR:
- O tamanho físico praticamente não muda diretamente com o tamanho ou a resolução da tela, mas com uma combinação de ambos (
screenSize/resolution
o famoso PPI)
- Pense em pt e dp . Esqueça os pixels da tela até ter que desenhar o resultado final.
- Crie sua fonte em tempo de execução com um tamanho razoável.
- Convertendo dp em pixels da tela:
pixels = dp * Gdx.graphics.getDensity();
- Se você estiver usando um mecanismo que não há dará conversor para dp como LibGDX de
Gdx.graphics.getDensity()
, você pode tentar: densityFactor = Screen.getPixelsPerInch() / 160.0f
, em seguida,pixels = dp * densityFactor
EDITAR:
2014, 25 de junho no Google IO, Matias anunciou uma nova diretriz de estilo para o Android, que inclui uma nova fonte de Roboto e diretrizes de tipografia. Tome esta tabela como um guia:
EDIT2:
Gráfico de tamanho de fonte CSS incluído, caso o link apodreça: