On the most part, formatting is handled in Taxi by the designer at the Email Design System level, but sometimes you may wish to add control over font size in the editor.
To begin, we'll use the implied default code that happens with you wrap an <editable> tag around some text:
<editable name="" label="">
<field type="text" name="content" label="Text"></field>
<content replace="{{content}}"></content>
</editable>
Now we'll add a number field to let users add a font size:
<field type="number" name="fontsize" label="Font Size" default="14"></field>
We can set the default on this field, in this case it's 14.
Then, as we want a tag to put the font size onto (and <content> gets stripped out at export), we'll use a <span> instead of <content>
<span replace="{{content}}" replace-style="font-size:{{fontsize}}px;"></span>
Lastly, we can use Liquid Filters to automatically adjust the line height, which may be declared elsewhere in the HTML build, to ensure that it always works the new font size. In this case, we'll add 8px to the font size value, which should be adequate for most font sizes in email.
<span replace="{{content}}" replace-style="font-size:{{fontsize}}px;line-height:{{fontsize | plus: 8}}px;"></span>
<editable name="" label="">
<field type="text" name="content" label="Text"></field>
<field type="number" name="fontsize" label="Font Size" default="14"></field>
<span replace="{{content}}" replace-style="font-size:{{fontsize}}px;line-height:{{fontsize | plus: 8}}px;"></span>
</editable>