In our new EverWeb 4.0 release we introduced a small but important feature – Minimum Font Size – to the Text Inspector. This new feature allows you to easily scale seamlessly scale your text to suit whichever device you are displaying your page upon. You can apply this feature to TextBoxes, the Styled Text Editor and to blog posts in the Blog Post Editor.
To be able to use this feature, you will need to be using EverWeb 4.0 or higher. Prior to EverWeb 4.0, you could make text scaleable using a combination of EverWeb’s Show on Device feature and different sized TextBoxes or Widgets that used the Styled Text Editor, such as the FlexBox and Text Section widgets. You can find out more on how to mimic scaleable text in in older versions of EverWeb in our blog post Scaleable Text in EverWeb.
In EverWeb 4.0 the whole process of setting up, and using, scaleable text is incredibly simple.
‘On The Fly’ Scaleable Fonts
You can make any text in a TextBox scaleable instantly. Simply highlight the text you want to scale, then go to the Text Inspector if it is not already displayed. You will see the font size of your selected text displayed in the default font size field, for example, 36 point. Further down the Fonts section of the Text Inspector, is the ‘Minimum Font Size’ field. If the field is set at zero, then there is no text scaling. You can As the default font size in this example is 36 point, you could set the minimum font size to 18 point.
Once you have set the default and minimum font size, you can test out the scaleable text by reducing the right hand side of the EverWeb app. You should see the text size reduce down from 36 to 18 point. Reset the width of the EverWeb app back to its original width.
Setting Up Default Scaleable Text Defaults
In some instances, it is useful to just have a scaleable font as and when you need it. There may be other times however, when you want to set up you scaleable font as a default. Again, that is easy to do in EverWeb. If, in the above example, the text you selected was linked to a Paragraph Style, you can update the Paragraph Style with the Minimum Font Size value that you input. To do this, simply click on the blue Update button to the right of the Paragraph Style.
If your text does not have a Paragraph Style associated with it, you can either create a new Paragraph Style using the current font settings, or change an existing unused Paragraph Style. If you choose the latter option, use the settings button to the right of the Paragraph Style (this will either be an eclipse in a circle icon, or a down arrow icon) and select the option to ‘Redefine Style from Selection’.
The third way to make your Minimum Font Size a default for a Paragraph Style is to update the Paragraph Style in the Format-> Default Styles… dialog box. In the Paragraph Styles section, select the Paragraph Style you want to update. Enter the Minimum Font Size value that you want to use for the Paragraph Style, then press Save when finished. Done!
Upcoming blog posts will feature how to set up and use Paragraph Styles both in the Text Inspector and using the Format-> Default Styles… menu option.
Using Minimum Font Size in the Styled Text Editor and Blog Post Editor
You can also take advantage of minimum font size in the Styled Text Editor which is used in the FlexBox, Text Section and PayPal widgets. To use the minimum font size feature you will have to associate your piece of text with a Paragraph Style. To do this, just select the text you want, then select the Paragraph Style from the dropdown menu at the top of the Styled Text Editor. If you ever want to change the Minimum Font Size value, you will need to do this either via the Format-> Default Styles… menu option of via the Text Inspector.
The same principle also applies when using the Blog Post Editor as with the Styled Text Editor. Simply highlight the text in the Blog Post Editor that you want to scale, then click on the Paragraph Style button in the Blog Post Editor’s Toolbar. Select the Paragraph Style you want to use. Again, to change the Minimum Font Size, you will need to use either the Format-> Default Styles… menu option or the Text Inspector.
EverWeb’s Minimum Font Size option brings scaleable text to your website and makes it super easy to set up and use!