Essence Pro (And Similar) Font Size Control?

[rcarlone]

Im not 100% certain of what the correct terminology for my question is, but here goes:

I am using the COOKED Plugin and noticed in the Essence Pro theme that the fonts seem to be disproportioned so that the text from the plugin is much smaller than that of the the Theme (if that makes sense).

You can see that the Plugins search box text looks "shrunken" compared to the rest of the page elements. - http://www.biteseeing.com/?page_id=34

However, (and the reason I'm asking this group in addition to the Plugin support channel), if I switch to the Foodie, Mai Lifestyle theme, Brunch Pro, or KickStarter Pro themes the search box is far more readable, along with other textual components on the page. [I've included pictures on that page to show what I mean for a couple of the alternate themes.]

SO to my question - is this fixable, or should I just use another theme and move on with it? I suspect it is fixable since it does render correctly in other themes.

I'm hoping I've provided enough detail and pictures on the http://www.biteseeing.com/?page_id=34 page that someone will know what I'm really trying to ask and know whether or not if is a fixable situation.

Thank you!

http://www.biteseeing.com/?page_id=34

[cbryant]

Hi,

Yes - I see what you're describing.
I think I understand what's causing the problem.
Yes - it's fixable.
But not without some effort.

I'll tell you up-front: I think the easiest solution - if possible - it to try another plugin. You can stop reading here, and do that.

But if you want to understand the problem, and maybe try to fix it, read on.

The problem
The problem is the theme and the plugin used different base font-sizes.
It looks like the Essence theme has set a base font-size of 62.5%.
(62.5% of the 'browsers root font-size' of 16px. 62.5% of 16px = 10px).

Why 62.5%?
Many designers use this approach to make it easier to calculate relative font sizes in REM values as they write the theme CSS. Basically, it lets you to set a 20px font size in rems by just dividing by 10. 20px = 2.0rems. Or, 16px = 1.6rems. And so on.

Fine. But..
But a problem arises when you have plugin that was not designed using that base font-size. Your plugin was most likely designed using 16px (not 10px/62.5%) as the base font-size.

As a result, when the plugin CSS uses a font-size of 1rem on a CSS selector - they intended it to be 16px. The plugin is inheriting the base-font size of 62.5%/10px from the theme. So 1rem is giving you 10px instead of 16px.

Or, where the plugin CSS font-size is 1.25rem, they intended 20px (or, 1.25 x 16px), but are getting 12.5px instead. You get the point.

The end result: all your plugin elements have really small text.

How do you fix this?

Solution number one: go through and change the font-sizes in the plugin CSS. Since it's a plugin, you may need to override the plugin CSS by adding the selectors and font-size properties to your child theme CSS.

For example:

.cooked-recipe-search .cooked-browse-select .cooked-field-title {
    font-size: .9rem; // default value
    font-size:  1.44rem // edited value 
}

.cooked-recipe-card-title {
    font-size: 1.25rem; // default value
    font-size:  2.0rem // edited value 
    line-height: 1.65rem; //default
    line-height: 1.65; // edited value 
}

You may need to add !importantto the updated value if the above code doesn't work, like so:

.cooked-recipe-card-title {
    font-size: 1.25rem; // default value
    font-size:  2.0rem !important; // updated value 
}

(I don't like using !important, but sometimes it's necessary).

Solution number two: find a different plugin that looks good out of the box.

Hope that gets you on the right track.

[rcarlone]

Ah yes, that makes total sense, thank you for articulating/explaining it to me! I'll work through the various options and figure out he best path forward for my site.

Thanks again, very much. I knew it had to be something under the covers but was very unclear where to start digging, so you've helped tremendously with this.

[Author]

Posts