Alineación vertical según la fuente seleccionada

[metalfox6383]

Hola:

Estoy precargando fuentes en mi CSS con @font-face. Acabo de notar que ciertas fuentes dejan un espacio en blanco arriba o abajo que las hace verse no centradas cuando las coloco, por ejemplo, en un div bordeado. Es decir, que luego de haber aplicado lo necesario para centrarlas no se ven completamente centradas y hay que usar vertical-align para afinar el centrado en unos 3 o 4 pixles.

Pero si uso otra fuente, tengo que volver a corregir. Por lo visto, cada fuente tiene una altura diferente que deja un espacio en blanco en la parte superior o inferior, y este espacio por ser diferente para cada fuente hace que la fuente parezca estar más arriba o abajo cuando se trata de centrar. Todo esto se nota cuando se trata de centrar en cuadros pequeños, como por ejemplo, en el botón.

Me gustaría que eso se pueda ajustar desde la declaración con @font-face, de forma que pueda "eliminar" ese espacio en blanco y poder utilizar la fuente seleccionada en cualquier alineación y al cualquier tamaño, pero no existe nada como eso. O bien utilizo vertical-align y padding-bottom/top según si el texto requiero centrarlo con otro elemento padre o centrarlo en su propio box.

¿Cómo lo harían Ustedes? ¿Qué método aplicarían para corregir esos pequeños cambios de altura en las fuentes? ¿No hay otro remedio que aplicar las correctivas (padding-bottom/top) en el momento que se trata de centrar?

Espero haberme explicado bien. Muchas gracias. Saludos.

[winjose]

Prueba con la propiedad "line height". El tamaño que asignes a line-height se divide entre dos para repartirse equitativamente sobre y debajo de una línea. Así, line-height:20px crearía un espacio de separación de 10 píxeles encima y otros 10px debajo de los caracteres. Yo lo suelo usar para centrar (verticalmente) textos que se ubicaban dentro de divs y que con un "vertical-align" no consigo el efecto deseado.

No te será de mucha ayuda, pero es una herramienta válida.

salu2!

[el_agu_4ever]

Buena idea.

[metalfox6383]

Ok, pero tengo un caso en el que si coloco line-height con el valor de 0, algunas fuentes siguen dejando un espacio en blanco debajo de ellas. Es como si las fuentes llegasen con una línea base propias de su diseño.

Por ejemplo, sin ir muy lejos, traten de modificar con las herramientas de desarrollador del mismo navegador el botón "Enviar Respuesta" que aparece en esta página cuando escriben una réplica y eliminen por completo el padding, el margin y el line-height y notarán que el texto parece estar ligeramente más abajo del centro del botón. Lo he probado con Chrome y Opera, no lo he probado con Firefox.

¿Alguién tiene el mismo resultado? El corregir esto me llevaría a darle más valor de padding abajo que arriba. Este es el efecto que quiero corregir y por el que estoy consultando.

Saludos.

[g3kdigital]

Hola. Algunas fuentes de letras agregan una corrección óptica de la altura en X para compensar con espacio en blanco, la "mancha" de negro generado por la escritura en minúscula, puedes leer un poco más de ello aquí:

https://es.wikipedia.org/wiki/Altura_de_la_x

Y sobre la razón de estos efectos opticos y su importancia aquí: Unos tipos duros

Ahora hay fuentes diseñadas para aprovechar el 100% del interlineado (como para que lo veas equilibrado) aunque algunos sostienen que aunque no altera la legibilidad, si que afecta la lecturabilidad. Fuentes como las mayoría de las serif o las famosas helveticas (incluso la arial) o la futura.

La mayoría de fuentes modificadas "pixel fift" como las de google font, no tienen este problema tampoco.