C'est simple: les polices n'ont pas besoin de correspondre à la résolution, elles doivent correspondre à la densité de pixels .
La densité de pixels est mesurée en pixels par pouce ( PPI ) ou pixels par centimètre. Il existe également une unité de mesure appelée pixels indépendants de la densité ( DP ) . Il est défini 1dp
comme la taille d'un pixel sur un 160 PPI
écran.
Revenons maintenant aux polices, essayez de faire ce test: mettez votre ordinateur portable en fonctionnement sur 720p. Jetez un oeil sur la taille de la police. Maintenant, branchez-le sur le moniteur 1080p 42 "de votre bureau. Si votre moniteur produit les bonnes informations sur sa taille, alors la police devrait avoir EXACTEMENT la même taille qu'elle avait sur l'écran 720p. Imaginez à quel point ce serait bizarre si du texte dans votre ordinateur portable avait une taille différente de celle du texte sur votre moniteur de bureau. Cela dit, des résolutions plus grandes devraient donner plus de détails à la police, des écrans plus grands devraient donner plus de contenu à afficher.
Le même fait peut être observé sur les éditeurs de texte. Une 72pt
police doit ressembler à l'écran de la même façon que lorsqu'elle est imprimée sur du papier.
Tout cela signifie que vous devriez probablement vouloir la même taille sur toutes les tailles d'affichage (à quelques exceptions près). Si vous voulez vous baser quelque part, les sites Web utilisent généralement des 12pt
polices, MS Windows utilise 11pt
et des 12pt
polices.
Ce graphique (également inclus dans le bas de la réponse) nous dit 12pt
qu'en CSS est à peu près égal à 16px
également en CSS (comme si cela n'était pas assez déroutant, un px en CSS est le même que dp partout ailleurs), alors disons que vous vais faire vos polices 16dp
sur LibGDX.
Sur votre jeu, utilisez le FreeTypeFontGenerator
pour générer des polices dynamiquement, de cette façon, vous pouvez considérer la densité de l'écran lors de leur création:
BitmapFont createFont(FreeTypeFontGenerator ftfg, float dp)
{
return ftfg.generateFont((int)(dp * Gdx.graphics.getDensity()));
}
//On Init
BitmapFont buttonFont = createFont(arial, 16); //16dp == 12pt
Cela fonctionne car Gdx.graphics.getDensity()
est égal à YourScreenDensity/160
donc, est un "facteur d'échelle" pour amener les choses à la taille qu'elles seraient sur un écran 160ppi.
À propos des exceptions que j'ai mentionnées plus tôt: vous voudrez probablement redimensionner les polices en fonction de la taille de l'écran en cas de logos, de promotions, etc. Mais gardez à l'esprit que vous feriez mieux de les faire sur un éditeur graphique comme Photoshop ou Gimp , en tous cas.
L'autre exception est le texte sur de minuscules écrans. Écrans de téléphone de 4,5 pouces ou moins, appareils portables. Habituellement, vous n'aurez pas le temps de faire défiler le contenu, ou vous ne pourrez tout simplement pas vous permettre de mettre autant de contenu sur cet écran. Vous pouvez essayer de 1dp
réduire la police , car le le lecteur aura probablement le téléphone très près de son visage, il n’aura probablement pas de problème de lecture. Gardez à l’esprit que vous risquez d’ennuyer le lecteur à lire un petit texte illisible.
TL; DR:
- La taille physique ne changera pas directement avec la taille de l'écran ou la résolution, mais avec une combinaison des deux (
screenSize/resolution
le célèbre PPI)
- Pensez à pt et dp . Oubliez les pixels de l'écran jusqu'à ce que vous deviez dessiner le résultat final.
- Créez votre police au moment de l'exécution avec une taille raisonnable.
- Conversion de dp en pixels d'écran:
pixels = dp * Gdx.graphics.getDensity();
- Si vous utilisez un moteur qui ne vous donne pas de convertisseur en dp comme LibGDX
Gdx.graphics.getDensity()
, vous pouvez essayer :, densityFactor = Screen.getPixelsPerInch() / 160.0f
puispixels = dp * densityFactor
ÉDITER:
25 juin 2014 sur Google IO, Matias a annoncé de nouvelles directives de style pour Android, il comprend une nouvelle police Roboto et des directives de typographie. Prenez ce tableau comme guide:
EDIT2:
Tableau de taille de police CSS inclus au cas où le lien deviendrait pourri: