Same font size displayed differently in different modules

Beaver Builder
1

I;ve always felt that font sizes in the text module displayed bigger than should be but was not quite sure. However I have created the same section - one as a Heading and the second in a text module - bit the size is displayed differently. The text module seems to display the size larger when using TinyMCE Advanced Font sizes in the text module or when using HTML to change font size in text mode.

Image 1 - Heading settings (text at top - is smaller)
http://i.imgur.com/8PBlSiW.png

Image 2 - Text settings (text is much bigger)
http://i.imgur.com/v9HxoBK.png

The default settings for H3 on this site is 38px.

Is this the way it is designed to work or is something bizarre happening here?

2

This image shows difference also.

The text at top (heading) is 60px.
The text at the bottom (text module) is 46px

http://i.imgur.com/yhVFcX9.png

3

Hey Dennis,

Thanks for getting in touch. The WordPress editor or tinyMCE uses pt values as default for their font-sizes. If you take a look at your 2nd screenshot, the font-size is 46pt whereas on the 1st screenshot, it is 46px. You can manually change the value to 46px on the text editor and that should take care of it. You can also check out this thread to try and change the default values.

Hope this helps!

Ben

4

Thanks for the explanation Ben.

5

No problem, Dennis! Have fun with The Beaver! :slight_smile:

Ben

6

I added this code to an mu-plugin, and it worked perfectly.

// Customize mce editor font sizes
if ( ! function_exists( 'wpex_mce_text_sizes' ) ) {
	function wpex_mce_text_sizes( $initArray ){
		$initArray['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
		return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'wpex_mce_text_sizes' );
7

Thanks for letting us know, Dennis. And glad it worked out for you! Have fun with The Beaver! :slight_smile:

Ben