Adding display: flex to the h1 styling seems to have fixed the alignment issue, getting rid of the shift upwards. This way you don’t have to use a negative margin or padding to counter the misalignment.
I trying to add a css-only typewriting animation. The starting letter should always be displayed and a word should appear. I using the method of using span in combination with display: inline-block;, overflow-hidden and keyframes.
However giving a span the value inline-block; will cause the span to shift upwards on top of the baseline.
I already thought about countering it with a negative margin/padding but I see issues with full responsivness in mind where I dont actually know the line heightor the baseline.
So I need help to fix that issue by either fixing the vertical shifting to the baseline or by solving the animation in a different way (css)