Grundlinienausrichtung verschiedener Schriftgrößen

[Gunnar Bittersmann]

@@Kerstin83

Ich habe zwei nebeneinander liegende div-Container in denen jeweils eine Überschrift ist,

Ein sicheres Zeichen dafür, dass es keine div-Container sein sollten, sondern sections.

die jedoch verschiedene Größen haben. Diese beiden Überschriften möchte ich gerne vertikal so ausrichten, dass sie an einer gemeinsamen Grundlinie fluchten. Irgendwas mit padding und margin hinzudipsen funktioniert einigermassen. Aber gibt es einen "sauberen" Weg ?

Verschieden große Schriften innerhalb einer Zeilenbox werden per Default an der selben Grundlinie ausgerichtet. Die Grundlinien in verschiedenen Elementen (verschiedenen Zeilenboxen) wissen aber nichts voneinander.

Du kannst die Zeilenboxen der beiden Überschriften (vorausgesetzt, sie sind einzeilig) gleich hoch machen. Bsp.:

• 1. Überschrift font-size: 1.8em; line-height: 1.1. 1.8 × 1.1 = 1.98. Zeilenbox also doppelt so hoch wie Grundschriftschröße
• 2. Überschrift font-size: 1.4em; line-height: 1.2. 1.4 × 1.2 = 1.68. Der Zeilenbox fehlen 0.3× Grundschriftschröße an Höhe zur ersten

Die könnte man nun als Padding oben und unten dazugeben: padding-top: 0.15rem; padding-bottom: 0.15rem (wenn die Grundschriftschröße in dem Kontext 1rem ist). Oder in em, dann durch Schriftgröße 1.4 teilen: padding-top: 0.107em; padding-bottom: 0.107em.

Die Schrift sitzt nun aber irgendwie mittig in der Zeilenbox. Irgendwie. Möglicherweise muss man die 0.3 anders verteilen, um die Grundlinien auszurichten. Bspw. padding-top: 0.18rem; padding-bottom: 0.12rem.

Da ist Augenmaß gefragt. Und der Wert gilt dann für die betreffende Schriftart auf dem betreffenden System. Andere Schriftarten könnten anders in der Zeilenbox liegen. Was

So dass es auch in verschiedenen Browsern funktioniert und möglichst auch, wenn im Browser z.B. eine Schrift fehlt und durch eine andere ersetzt wird.

wohl unmöglich macht.

LLAP 🖖