Margen superior de la página web cuando diferentes fuentes están en diferentes columnas

Tengo una página web con dos columnas:

  • La columna izquierda estrecha es una barra de navegación vertical con una fuente de tamaño pequeño (u ordinario).
  • La columna principal derecha contiene el contenido, que tiene una combinación de fuentes (por ejemplo, comienza con un <h1>encabezado de gran tamaño).

Aquí hay una captura de pantalla de la parte superior de la página:

ingrese la descripción de la imagen aquí

Mis preguntas son:

  • ¿No cree que es importante que la parte superior del texto de la columna de la izquierda (p. ej., ".NET") se alinee con la parte superior del texto de la columna de la derecha (p. ej., "WYSIWYG")?
  • ¿Hay alguna alternativa de diseño (alguna forma de cambiar el diseño, tal vez agregar elementos adicionales al diseño, para hacer que esa alineación sea menos importante o sin importancia?
  • Si (o suponiendo que) es importante, ¿cómo se implementa?

Creo que está mal por dos píxeles en este momento, es decir, el texto de la derecha está dos píxeles por debajo.

Creo que es difícil (quizás imposible) implementar usando CSS porque:

  • La altura de la fuente es complicada
  • Los dos bits de texto son de diferentes tamaños y diferentes fuentes.
  • Las familias de fuentes ni siquiera se conocen en el momento del diseño (depende de qué fuentes existen para el navegador web del usuario)

¿Es este un problema conocido? ¿Hay una solución?

¿Debería intentar alinear las líneas de base de las dos columnas para que se vean así:

ingrese la descripción de la imagen aquí

Pero tampoco creo que sepa cómo implementar eso, usando CSS.

Normalmente (las líneas de base de los dos bits de texto alineados) ocurriría automáticamente, excepto que aquí los dos bits de texto no están realmente en la misma línea (no están ambos en línea en el mismo cuadro de línea, en un bloque principal): porque cada columna es un separado <div>.

Acabo de pensar: tal vez pueda hacerlo agregando un carácter de espacio de ancho cero (o algo así), usando el tamaño de fuente del texto de la derecha, en el texto de la izquierda (tal vez usando CSS), :afterentonces que el texto de la izquierda compartirá un cuadro de línea con un carácter invisible cuyas métricas de fuente son las mismas que las del texto de la derecha. Publicaré una respuesta si lo hago funcionar, mientras tanto, cualquier otra respuesta sería bienvenida.

Respuestas (1)

CSS como el siguiente es suficiente para implementar la segunda solución anterior:

#nav.notJumbo a[href='/']::after {
    content: ' ';
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
}

Esto agrega, a la primera línea de la columna de la izquierda, un carácter invisible (espacio en blanco) que tiene las mismas métricas de fuente que el texto en la parte superior de la columna de la derecha; esto significa los dos cuadros de línea ( izquierda y derecha) tienen el mismo tamaño: porque ahora incluyen texto del mismo tamaño.

Nota:

  • El selector es lo que se necesita para seleccionar el primer ancla (cuya hrefreferencia a la página de inicio del sitio web en este ejemplo)
  • El contentes un espacio vacío, un espacio en blanco, aquí; puede reemplazar eso con un espacio delgado Unicode o un espacio de ancho cero
  • Las otras propiedades son las que sean necesarias (incluso font-familysi es necesario) para hacer coincidir la fuente y las métricas de cuadro de línea de la primera línea (por ejemplo, el encabezado) de la columna de la derecha.

Supongo que esto resuelve la parte técnica (implementación, cómo) de la pregunta.

Todavía agradecería otras respuestas, que pueden comentar sobre el diseño.

Margen superior de la página web cuando diferentes fuentes están en diferentes columnas
RespuestasAquíPolítica de privacidad1y, 0v