The un-scrolled page title was a straightforward fix. That title can wrap to multiple lines, so overflow was only there to prevent long unborken words from breaking the width. Removing the overflow and adding overflow-wrap: break-word; will break words when there isn’t enough space.
When the title docks to the header on scroll we use overflow: hidden along with text-overflow: ellipsis to truncate titles that are longer than one line… we can’t as easily remove overflow there, so I added some padding and re-align to the left with a negative margin. Not the prettiest CSS, but it works.
https://github.com/discourse/discourse/commit/89f6ff1574d15c9d654472f9cd3536d6da833182
A little more detail on why this happens. Within a font there’s the concept of an em-box (also called an em-square). These boxes are the same size for each character and it serves as the base used for scaling, adjusting line-height, letter-spacing, etc.
Characters can extend outside of the em-box in any direction… sometimes it’s necessary for certain characters, sometimes it’s just what the font designer wanted to do. In the browser there’s no way to tell that this oveflowed content exists, so there’s nothing that can be done to account for it dynamically.
As far as I know the only options are to avoid overflow on text when possible or add a little additional padding when you can’t.