Cómo gestionar el tamaño de letra entre retina y el diseño normal

Estoy simulando un sitio web de una página usando sketch en macbook pro retina con una resolución de 1440 de ancho y 5120 de alto. Veo todo perfecto una vez que termino mi diseño, pero cuando empiezo a codificar html y css con mi rayo, veo que los tamaños de fuente son más grandes que los que veo en mi pantalla retina. Entonces, ¿cuál sería la mejor solución para tener un mejor diseño en la ventana normal y también en la ventana retina? Uso imágenes de 1x y 2x para retina y ventana normal, pero no estoy muy seguro de los tamaños de fuente. Cualquier ayuda sería apreciada.

Si necesita reducir a la mitad el tamaño de las imágenes para el tamaño "normal", entonces deberá reducir a la mitad el tamaño del tipo para que sea proporcional. Si su pantalla de retina requiere imágenes con un tamaño de píxel de 2x, entonces su pantalla de retina requiere un tipo de 2x (tamaño de píxel).
¿Quiere decir (por ejemplo) que una fuente establecida en 24 puntos en su HTML/CSS se ve más grande que una fuente de 24 puntos en su aplicación de diseño?
@Mysterfxit sí, eso es exactamente lo que estoy enfrentando
¿Cuál parece que los números coinciden con lo que esperas que sean? ¿El diseño o el código?

Respuestas (2)

Si trabaja @2x en su programa de diseño, puede duplicar la configuración de PPI para el documento, pero dejar las mismas dimensiones en píxeles.

Entonces, si su documento es 1440x1520 @ 72ppi, cámbielo a 1440x1520 @144dpi

Eso dejará todo con el mismo aspecto, pero ahora los tamaños de fuente coincidirán más con lo que eventualmente codificarás en CSS.

O simplemente puede dividir todos los tamaños de fuente por 2.

Intenté dividir los tamaños de fuente por 2, pero aún en algunos lugares se ven demasiado pequeños. Osea cuando divido 20/2 es 10 no se ve 😔
En su CSS, ¿qué unidades está utilizando para los tamaños de fuente? es decir, px, pt o em
Uso píxeles tal como se usó en la aplicación Sketch
Hmm... así es como suelo trabajar en Photoshop y funciona para mí. No estoy familiarizado con Sketch. Tal vez algo más esté mal.
los puntos son relativos a las pulgadas, por lo que no se limita a dividir 24 puntos por dos, sino que debe convertirlos en píxeles. Esto es lo que está haciendo marcando todo a un dpi más alto (el software está haciendo ese cálculo por usted)
@Yorik Generalmente no, pero en mi ejemplo sí, puedes dividir por dos.
@Yorik Presioné enter demasiado rápido en el último comentario. Sé que no es perfectamente preciso, pero por lo general solo tomo el número de punto de Photoshop y lo uso para los píxeles en CSS y eso me da un 10% aproximadamente y lo modifico un poco en CSS para que se vea bien. ¿Cómo se convierte entre píxeles y puntos?
@Mysterfxit: olvidé marcar mi comentario a Benjamin, ya que estaba más dirigido a su primer comentario que a su respuesta. La configuración de DPI en las imágenes es simplemente una bandera o indicador de intención, pero en el software "consciente de pulgadas", la configuración de DPI es un factor de escala que se usa para calcular los tamaños de letra, etc., como lo ilustra su respuesta.

Tengo que ver mis archivos al 200 % para ver cómo se verán las imágenes o el texto en el navegador. Esto también me tomó por sorpresa al obtener la pantalla de retina.

Cómo gestionar el tamaño de letra entre retina y el diseño normal
RespuestasAquíPolítica de privacidad1y, 0v