Update: After using a custom font "Gotham" in the @font-face, I encountered several bugs that seem to stem from this source. I'm unsure of how to resolve these issues while still retaining my custom font. Any suggestions?
Update #2: The problem was resolved by adding ascent-override: 80%; to the font-face. However, this solution does not work on Safari browsers. Is there an alternative fix available?
During testing of my website by resizing the browser window height, I noticed a horizontal invisible line cutting off my h1/h2 text. Research suggests it may be related to line-height, but I am uncertain.
Considerations:
Without setting a line-height for h1/h2, their height renders as 0px and becomes invisible. Strangely, the p tag remains unaffected with or without a line-height specified. Why is this the case? see below, all line height removed
When a line-height is defined, the text of h1/h2 appears offset from the container. When inspecting the h1 in devtools, the text aligns higher than the box, extending beyond the margins.
Resizing the window causes the 'invisible line' intersecting the text to remain stationary, while the text moves along with the page adjustments. The page appears normal when the invisible line falls between lines of h1/h2 text.
I have a script animating numbers by updating the innerHTML with the next number. Could the use of .innerHTML be causing an issue? During the animation, the invisible line intersects the numbers before correcting itself upon window resize.
Could the font usage be a factor? My custom font, 'Gotham', is implemented through @font-face in the css.
I apologize for any confusion in my description, and I would appreciate any guidance on resolving this issue.