• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

My website launched — Responsive font question

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › My website launched — Responsive font question

This topic is: resolved

Tagged: ems, fonts, pixels, rems, responsive design, responsiveness, scale, text

  • This topic has 2 replies, 2 voices, and was last updated 9 years, 2 months ago by Carla the Moose.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • September 27, 2014 at 12:19 pm #125972
    Carla the Moose
    Member

    The website I've been working on had to launch before I was ready. I was wondering if you could please take a look and give me some feedback specific to responsiveness.

    The website is here.

    I had some wonderful help making the banner area responsiveness. There are still things I need to address, though, and I would welcome your thoughts.

    The middle div where the book covers are displayed is one image, including the text above them. It's responsive and scales down nicely, except the text, which is already blurry due to this being a place holder, gets even blurrier. So I assumed not using an image for the text would be best.

    I'm trying to learn about text responsiveness and pixels, percents for fonts, ems and rems. Pixels are used throughout the eleven40 Pro theme. Using Firebug, I changed the body and Shakespeare text to ems, thinking this would make the text responsive, but it doesn't seem to change anything.

    1) Do you feel text should remain the same size, no matter the screen size?

    2) Why doesn't using ems make the text responsiveness?

    3) If I do use text for the Shakespeare header, it breaks on to a second line in smaller screens. I'd prefer keeping it on one line. Does this mean my only option is an image?

    Thank you!

    September 27, 2014 at 10:02 pm #126032
    Marcy
    Participant

    Fonts don't scale the way you think they should. No matter which system you use, px, em, rem, %, when you want the font to change size, you need to tell it. You can set up a system, so at certain media sizes you can scale by a percentage, but usually it's just easier to change the pixel size.

    I just determine the break points - when the text goes to a new line - and at that point, I make the text a smaller font-size in a media query.

    For slider text, I may resize it twice to make sure it continues to fit the space I set for it.


    Marcy | Amethyst Website Design | Twitter

    September 28, 2014 at 5:52 pm #126085
    Carla the Moose
    Member

    Thanks for your feedback, Marcy. The key I've been missing is break points, so I'm glad you pointed that out.

    :o)

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘My website launched — Responsive font question’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble