¿Cómo hacer coincidir el tamaño de fuente con la resolución de pantalla?

Así que estoy trabajando en un juego con LibGDX y tengo un problema.

Para que mi juego se ajuste a la mayoría de las resoluciones, creé un activo base para cada relación de aspecto, por ejemplo, una imagen de fondo del menú principal, lo hice en 800X600 para 4: 3, 1280X720 para 16: 9, etc.

Ahora estoy tratando de incorporar TextButtons en el juego, por las opciones; Mi problema es que no puedo determinar qué tamaños de fuente coinciden con qué resoluciones de pantalla. ¿Hay alguna manera de resolver esto, o tengo que ir uno por uno a través de cada una de las resoluciones que tengo y solo hacer coincidir manualmente el texto con la resolución?

Es fácil: las fuentes no necesitan coincidir con la resolución, deben coincidir con la densidad de píxeles .

La densidad de píxeles se mide como píxeles por pulgada ( PPI ) o píxeles por centímetro. También hay una unidad de medida llamada píxeles independientes de densidad ( DP ) . Se define que 1dpes el tamaño que tiene un píxel en una 160 PPIpantalla.

Ahora volviendo a las fuentes, intente hacer esta prueba: ponga su computadora portátil para que funcione en 720p. Echa un vistazo al tamaño de la fuente. Ahora conéctelo al monitor 1080p 42 "de su escritorio. Si su monitor emite la información correcta sobre su tamaño, entonces la fuente debe tener EXACTAMENTE el mismo tamaño que tenía en la pantalla 720p. Imagine lo extraño que sería si el texto en su la computadora portátil tenía un tamaño diferente al del texto en su monitor de escritorio. Dicho esto, las resoluciones más grandes deberían dar más detalles a la fuente, las pantallas más grandes deberían dar más contenido para mostrar.

El mismo hecho se puede observar en los editores de texto. Una 72ptfuente debe verse en la pantalla de la misma manera que cuando se imprime en papel.

Todo esto significa que probablemente debería desear el mismo tamaño en todos los tamaños de pantalla (con algunas excepciones). Si desea basarse en algún lugar, los sitios web generalmente usan 12ptfuentes, MS Windows usa 11pty 12ptfuentes.

Este cuadro (también incluido en la parte inferior de la respuesta) nos dice que 12pten CSS es más o menos igual que 16pxtambién en CSS (como si esto no fuera lo suficientemente confuso, un px en CSS es lo mismo que dp en todas partes), así que digamos que 16dpHaré sus fuentes en LibGDX.

En su juego, use FreeTypeFontGeneratorpara generar fuentes dinámicamente, de esta manera puede considerar la densidad de la pantalla al crearlas:

BitmapFont createFont(FreeTypeFontGenerator ftfg, float dp)
{
    return ftfg.generateFont((int)(dp * Gdx.graphics.getDensity()));
}
//On Init
BitmapFont buttonFont = createFont(arial, 16); //16dp == 12pt

Esto funciona porque Gdx.graphics.getDensity()es igual a esto YourScreenDensity/160, es un "factor de escala" para llevar las cosas al tamaño que tendrían en una pantalla de 160ppi.

Acerca de las excepciones que mencioné anteriormente: es probable que desee cambiar el tamaño de las fuentes según el tamaño de la pantalla en caso de logotipos, promociones, etc. Pero tenga en cuenta que será mejor que las haga en un editor de gráficos como Photoshop o Gimp , de todas formas.

La otra excepción es el texto en pantallas pequeñas. Pantallas de teléfonos de 4.5 "o más pequeñas, ponibles. Por lo general, no tendrá tiempo para hacer que el contenido se desplace, o simplemente no podrá permitirse poner tanto contenido en esa pantalla. Puede intentar reducir la fuente 1dp, ya que el el lector probablemente tendrá el teléfono muy cerca de su cara, probablemente no tendrá problemas para leer. Tenga en cuenta que puede molestar al jugador que lee textos pequeños ilegibles.

TL; DR:

• El tamaño físico no cambiará directamente con el tamaño o la resolución de la pantalla, pero con una combinación de ambos ( screenSize/resolutionel famoso PPI)
• Piense en pt y dp . Olvídate de los píxeles de la pantalla hasta que tengas que dibujar el resultado final.
• Cree su fuente en tiempo de ejecución con un tamaño razonable.
• Convertir dp a píxeles de pantalla:pixels = dp * Gdx.graphics.getDensity();
• Si está utilizando un motor que no hay que darle convertidor para dp como libgdx de Gdx.graphics.getDensity(), puede intentar: densityFactor = Screen.getPixelsPerInch() / 160.0f, a continuación,pixels = dp * densityFactor

EDITAR:

2014, 25 de junio en Google IO, Matias anunció una nueva pauta de estilo para Android, que incluye una nueva fuente de Roboto y pautas de tipografía. Tome esta tabla como guía:

EDIT2:

Tabla de tamaño de fuente CSS incluida en caso de que el enlace se pudra: