Home Forums Weaver Xtreme Theme Comparative Font Heights on Phones

Topic Resolution: Answered
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #68691

    Hi Scrambler,

    I use “Advanced Editor Tools” and “Classic Editor” (no blocks) and have the standard font as Ariel 12pt. on the editor.

    As far as I know, all our Xtreme font settings are pretty much your defaults.

    For emphasis of a long quotation from another of our posts, I occasionally change from Ariel sans-serif 12pt. to Times New Roman 12pt. or Book Antiqua 12pt., using standard editor options, as a contrast, rather than using italic, which I find difficult to read.

    On most desktop browsers, the Ariel, Times New Roman and Book Antiqua come out visually almost the same height. Close enough for any difference, not to matter.

    However, on phones, for me, there are often noticeable differences in heights between Ariel and all other fonts I have tried to use, even though they are all the same nominal 12pt.

    I have had this issue for a long time but thought to ask help to see if I have some setting issue – or if this is just a habit of different fonts being rendered differently on different phones and different browsers as I suspect.

    I have made up a special post to demonstrate this: https://www.hiskingdomprophecy.com/zzzzzzzzzz/

    And I have 2x screen captures to show what I see on my phone.
    https://www.hiskingdomprophecy.com/wp-content/uploads/2010/05/HKP-1.jpg https://www.hiskingdomprophecy.com/wp-content/uploads/2010/05/HKP-2.jpg

    I find that viewing this issue in F12 Developer Mode does not accurately reflect the phone visual font renderings and the result is more aligned with a desktop view of font height differences.

    I am happy with the standard Ariel 12pt. and don’t want to change that. So I was wondering if there any Xtreme settings changes I can make to get the two other fonts to align – height-wise – more closely.  (Clutching at straws here maybe….)

    The code I use to change font is simple:
    e.g. < s pan style=”font-family: times new roman, times, serif;” >

    Any thoughts appreciated.

    Regards and thanks,

    Best Answer

    This reply has been accepted as the best answer.

    Unfortunately as you suspected, each mobile browser renders the fonts as they please , and sometimes they don’t support the font and substitute it for another one.

    If you find that a font is consistently the wrong size on ALL phones, we could create a mobile rule to change the font size on phones using the .is-phone selector.

    If not the same on all fonts, we also have as .is-ios and an .is-android selector that could be used to target these separately.

    The problem is that may not be enough, as different browser on the same platform may have different result.

    Try to test on a lot of different phones, and then if you need help creating the CSS rule, provide a link to a page with specifics about which text you are trying to target




    Thank you very much for that confirmation and understanding.

    I have no access to other phones, so I’ll have a think about how to use standard WP typographic options to provide some form of contrast using the same font.

    While the differences are currently noticeable, a font change of +/- 1pt. is even more noticeable often glaringly so, so I’ll work on it 🙂

    Thanks again Scrambler,

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.