- This topic has 2 replies, 2 voices, and was last updated 9 years, 2 months ago by .
- The topic ‘My website launched — Responsive font question’ is closed to new replies.
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.
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?
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.
Thanks for your feedback, Marcy. The key I've been missing is break points, so I'm glad you pointed that out.
© 2023 WPEngine, Inc.