How can I have consistent font size across different screen sizes?

Question

I have an ebook reader app where it takes in a epub file.

How can I make it so that the font size is consistent with the screen size? I have tried doing '5.0vh' and it gets very close to matching a different screen size but it's not the exact same.

If you see the attached images you can see how in the bigger screen size, the last word of the first page is restless while in the smaller screen size, the last word is such .

I'm trying to make it so that with all screen sizes, the last word on each page matches up, so I can splice the audio of a book based on the pages, if that makes sense.

  getRendition = rendition => {
    console.log('getRendition callback', rendition)
    // Set inital font-size, and add a pointer to rendition for later updates
    const { largeText } = this.state
    this.rendition = rendition
    rendition.themes.fontSize('5.0vh')
  }

Answer 1

vh is used to size relative to the viewport's height. In your screenshots, I see the title at the top, Narrative of the Life of Fredrick Douglass , is larger in the second screenshot vs the first. Less viewport height means the font size will be different.

If you're unable to control the height of the title element, maybe try using rem , which is relative to the root element (HTML tag). But I'm guessing here.