Are you trying to customize some text in your post editor, making it bigger with the TT tool tool but it looks smaller than your regular size once you publish it?
Or after changing your theme and setting a bigger font size, a lot of your old posts have smaller text?
The reason is how Blogger handles the text sizes with its TT tool
Once you highlight your text, click the button and choose any value. Blogger will wrap your text with a span tag with the CSS necessary to do the change, like this:
<span style="font-size: x-large;">My largest text</span>
And probably in your editor, it will look bigger than the regular text. But remember, how a text looks inside the editor is not the same as the published post.
 |
| How do we see the text in the post editor vs how the post looks once is published. |
There is a common misconception, that 'largest' in the editor means largest than the font size I previously set in the theme/customizer.
And no, we can see in the next table that Largest means 24px, always, no matter what you choose in your theme.
| Name in Blogger | Absolute value | value in PX |
|---|---|---|
| Smallest | xx-small | 9 |
| Small | x-small | 10 |
| Normal | no span wrapping the text | font size specified in the theme |
| Medium | medium | 16 (browser default size) |
| Large | large | 18 |
| Largest | x-large | 24 |
And there is more, at the very moment we choose any of these options, editing in the theme will not affect the size of the text easily. This kind of styling is called Inline CSS and is just not very flexible.
So the best practice is to just avoid this tool unless you need to customize some paragraph at some moment.
How can I have a bigger font then?
You still can use the tool, and my trick is:
- choose any option.
- then change to HTML mode in the editor
- locate the span and change the style attribute to use length value (I recommend in this situation em values over px values) instead of absolute values like Blogger uses.
For example, instead of having this:
<span style="font-size: large;">My large text</span>Result: My large text
Edit that code to look like this:
<span style="font-size:2em;">My large text</span>Result: My large text
But what means that 2em?
em is a value that will resize if you change the font-size at some point. No matter if you choose 24px, 15px or 30px, your 'large text' in that specific post will be 2 times, or any other value, bigger than that.
I hope that you find useful this guide about how Blogger handle font sizes in its editor and how this impact your design.
