¿Cómo calcular la configuración del tamaño de fuente contando píxeles?

Tengo una imagen de un sitio web propuesto.

¿Cómo calculo en qué valor de tamaño de fuente px establecer el texto contando píxeles?

Por ejemplo, tengo un tamaño de fuente: 14px, (en Arial) pero contando desde la parte superior de una "L" y hacia abajo de la cola de una "p" cuento 10 píxeles en la "L", con un extra de 3 en la cola de la "p" Lo que obviamente no me da 14.

¿Hay alguna manera de entrenar el valor del tamaño de fuente contando píxeles de manera confiable?

El problema general es bastante respondido por ¿A qué se traduce exactamente el tamaño de la fuente? - es decir, el tamaño realmente no significa nada muy específico.

Pero dado que está trabajando con una fuente específica conocida, debería poder traducir un recuento de píxeles en su maqueta a su tamaño de píxel nominal; necesitaría hacer un poco de experimentación para calcular la proporción.

Pero sugeriría que es mucho más fácil hacer esto en comparación, es decir, simplemente cambie el tamaño en su página web hasta que coincida con la maqueta, superponiendo una captura de pantalla si es necesario para verificar. Sin embargo, tenga en cuenta que es poco probable que la representación de fuentes de su navegador coincida con la representación de Photoshop o la representación del navegador en otra plataforma.

En tamaños de texto típicos, la mayoría de las fuentes tienen de 1 a 4 píxeles de 'búfer' de arriba a abajo.

Por lo general, puede aplicar directamente el tamaño de píxel que utilizó al compilar en su CSS. IOW, si Photoshop / Illustrator dice 14px con un 130% de ventaja, tu CSS diría

font-size:14px
line-height:1.3em

No creo que contar píxeles sea confiable. La razón es que, cuando paso por las fuentes, digamos en Photoshop, siempre se muestran en tamaños aleatorios. Sé que PS no es la web, pero esto demuestra que 14px en una fuente puede ser mucho más grande que en otra fuente.

He tenido éxito al tomar la captura de pantalla en Photoshop y alinearla. Por supuesto, debe asegurarse de que su captura de pantalla esté al 100% y que tenga la misma fuente.

Sin embargo, la mejor y más rápida forma de ver qué tamaño de fuente está usando una página web es ver el origen de la página web. Si no se menciona en style="font-size: 14px;"algún lugar de la etiqueta, está en la hoja de estilo (más que probable). Busque el enlace cerca de la parte superior del código de la página que termina en .css y visite ese enlace. Busque las declaraciones font-sizey font-family. Eso le dirá qué fuente se utiliza y cuál es el tamaño de varios elementos de la página web.