Foros del Web » Creando para Internet » CSS »

Alineación vertical según la fuente seleccionada

Estas en el tema de Alineación vertical según la fuente seleccionada en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/09/2017, 09:42
 
Fecha de Ingreso: octubre-2006
Mensajes: 267
Antigüedad: 11 años, 1 mes
Puntos: 6
Pregunta Alineación vertical según la fuente seleccionada

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.

Última edición por metalfox6383; 02/10/2017 a las 18:00
  #2 (permalink)  
Antiguo 14/10/2017, 11:59
 
Fecha de Ingreso: julio-2008
Mensajes: 230
Antigüedad: 9 años, 5 meses
Puntos: 8
Respuesta: Alineación vertical según la fuente seleccionada

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!
__________________
"La diversidad de opiniones crean una perspectiva capaz de ver todas las caras del objeto"
  #3 (permalink)  
Antiguo 26/10/2017, 10:10
Avatar de el_agu_4ever  
Fecha de Ingreso: agosto-2004
Mensajes: 223
Antigüedad: 13 años, 3 meses
Puntos: 4
Respuesta: Alineación vertical según la fuente seleccionada

Buena idea.
  #4 (permalink)  
Antiguo 04/12/2017, 14:10
 
Fecha de Ingreso: octubre-2006
Mensajes: 267
Antigüedad: 11 años, 1 mes
Puntos: 6
Respuesta: Alineación vertical según la fuente seleccionada

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.
  #5 (permalink)  
Antiguo 07/12/2017, 00:22
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 179
Antigüedad: 4 años, 1 mes
Puntos: 28
Respuesta: Alineación vertical según la fuente seleccionada

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.
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital



La zona horaria es GMT -6. Ahora son las 09:00.