Word Break

  • Unknown's avatar
    kmarler · Member ·

    Hey there!

    When viewing my website on my iPhone 7 iOS 15.5 in Safari I’m experiencing a word break near the top of the page where it says, ‘World Traveler. Hometown Voice.’ The word ‘Hometown’ reads, ‘Hometow’ and then the ‘n’ appears on a new line. I’m using the free version of WordPress and the ‘Appleton’ theme. I’m wondering if the issue is fixable given my current status or if I’d have to upgrade.

    Thanks a million!

    WP.com: Yes
    Correct account: Yes

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    hlbecker · Member ·

    Hey there,

    I looked at your site on my iPhone 13 and see the same that you are seeing. The problem is likely the font size of the words ‘World Traveler. Hometown Voice.’

    Upon inspecting the site the words in question are set as an H2 Heading. If you drop that down to be an H3 Heading you will not have the issue as the font will be a little smaller.

    Hope this helps.

  • Unknown's avatar
    kleyhalisson · Member ·

    Hello @kmarler. You can solve this problem by reducing the Font size or Letter spacing.
    If you go into the Site Editor, you can select the block and, in More Settings, look for the section Typography. You can find them both there and reduce one or the other depending on how you want the design.


    @hlbecker    , changing from H2 to H3 is not ideal because he would be changing the hierarchy of the headings on the page. The convention is to never use HTML to style, that’s why in the Typography section, it changes the CSS which is intended for styling.
    The hierarchy goes from H1 to H6.

    H1 = more important content.
    H6 = less important content.

    Just an example in kmarler’s site, the site title, KYLE MARLER VOICE SERVICES, is H1 and is smaller than the title of the post, WORLD TRAVELER. HOMETOWN VOICE., which is H2.

  • Unknown's avatar
    kmarler · Member ·

    @kleyhalisson @hlbecker

    Thank you all so much for your input. I decreased the font size and it worked like a charm on my iPhone 7 with a viewport of 375px!

    I do wonder though… a device like the iPhone 5 has a viewport size of 320px (the smallest still in active use). Rather than decreasing the font size even further to accommodate for that device I wonder if there’s a way to make the font size responsive to the viewport size. I know with CSS you can set font-size to a percentage so it scales with the viewport, but perhaps that’s a paid feature to do through WordPress.

    Any thoughts gang?

    Thanks again.

  • Unknown's avatar
    kleyhalisson · Member ·

    In my Android with a viewport of 360px worked fine. I emulated in the browser the iPhone 5, and the problem persisted there. I discovered that this happens for screens at 340px or smaller.
    If you keep decreasing the size, it might affect your users with bigger screens.
    The solution I know is to use CSS, but that’s for Premium plans or higher.

    This is a classic problem with the development of sites or other software. It’s a tradeoff. This is a situation where you have to decide what’s best for you and your users while sacrificing something: do you spend more money? Do you focus on users with bigger screens? Or do you prioritize smaller screens?

  • Unknown's avatar
    kmarler · Member ·

    @kleyhalisson

    Understood. Thanks for your thoughtfulness.

  • The topic ‘Word Break’ is closed to new replies.