EverWeb’s Minimum Font Size For Scalable Fonts in Your Website!

Sometimes a small new feature in a product can have a big impact on your workflow, and EverWeb’s new Minimum Font Size feature that debuted in EverWeb 4.0 does just that! This new feature allows you to easily and seamlessly scales your text to suit whichever device you’re displaying your page upon. You can apply Minimum Font Size to TextBoxes, the Styled Text Editor (used in some EverWeb widgets) and in blog posts via the Blog Post Editor.

What You Need To Get Started
To be able to use Minimum Font Size, you’ll need to be using EverWeb 4.0 or higher, for macOS or Windows. If you’re using an older version of EverWeb, you can still make text scalable but it’s more complicated and your text may not scale smoothly. You’ll need to use EverWeb’s Show on Device feature in combination with the Responsive Row widget to achieve the different text sizes on different devices. Check out EverWeb’s YouTube video on Show on Device for more information.

If you’re using an older version of EverWeb and want to upgrade to the latest version to access this new feature, just use the EverWeb-> Check for Update… menu option on macOS, or the Help-> Check for Update… menu option on Microsoft Windows, then follow the prompts to update your EverWeb version.

Setting Up and Using Minimum Font Size
Setting up and using Minimum Font Size is super easy to do. You can start straight away in your project file with an instantly scaleable font. First, select the text in a page in your project file that you want to scale. Next go to the Text Inspector in the Inspector Window. In the Fonts Section you’ll see all of the information about the font that the tex tis using, including the Font Size. At the end of the section is the ‘Minimum Font Size’ field. When the Minimum Font Size is set to zero, the font will not scale. For scaling to happen you will need to enter a value in this field that’s less than the Font Size field. So, if your font is 48 point, you could make the Minimum Font Size 24.

After setting the Minimum Font Size, it’s probably best to test out the scaling to make sure that it looks great at all device widths. This is also simple to do. You can either re-size the EverWeb app window by reducing its width, or use the Preview button then reduce the width of your browser window.

Setting Up Scalable Fonts for Regular Use
The above method gives you a way to use a scalable font as a one time action. In the long run, through, you may prefer to have scalable fonts set up as defaults. Again, this is very easy to do. Taking the above example, you will probably have noticed that if you make a change in the Fonts section of the Text Inspector, you’ll see a blue Update button appear. Simply click on this button to update the font’s Paragraph Style. Any text using the updated Paragraph Style will be updated too.

This is all fine if your text already has a Paragraph attached to it, but this may not be the case if your project file was created prior to EverWeb 4.0. In this case, you have the following options:

• Create a new Paragraph Style using the current font settings, or
• Update an existing, unused Paragraph Style. To do this, click the settings button to the right of the Paragraph Style then choose ‘Redefine Style from Selection’ from the menu options.
• Create, or update, your Paragraph Styles using Default Styles. You can easily add Minimum Font Size values to existing Paragraph Styles via the Format-> default Styles… menu option. Simply click on the Paragraph Style you want to update, then enter the Minimum Font Size in the field. In addition, you can create, delete, or update, all of your Paragraph Styles in Default Styles. When you have finished updating, or managing your Paragraph Styles, click on Save to finish.

Paragraph Styles, the Styled Text Editor and the Blog Post Editor
The good news about EverWeb’s Paragraph Styles is that you can use them throughout your website. This means that you can apply scalable fonts to your blog posts and in the Styled Text Editor which you will find in the Text Section, FlexBox and PayPal widgets.

For both the Styled Text Editor and your blog posts, you’ll need to associate a Paragraph Style to the text you have created. When using the Stryled Text Editor, simply select the text you want, then choose the Paragraph Style you want fro the dropdown menu above the styling buttons.

it’s virtually the same story when it comes to using the Blog Post Editor. Again, first select the text you want to apply text styling to in the Blog Post Editor. Next, click on the Paragraph Style button in the Blog Post Editor’s Toolbar. The Paragraph Styles that you have created will be displayed, from which you can choose the one you want to use.

Note that for both the Styled Text Editor and the Blog Post Editor it’s not possible to edit or update the Paragraph Style without having to go to Format-> Default Styles… menu option or the Text Inspector to do so.

To see your text scale, again either reduce the width of the EverWeb app itself, or Preview your page and expand and reduce the browser width to see the effect take place.

Conclusion
The new Minimum Font Size feature is a big deal for EverWb users as it allows for smooth scaling of fonts on any page of your site! We recommend implementing Paragraph Styles in to your website as soon as possible. It’s a great time saver if you do and will make updating your site a lot easier and quicker in the future!

If you have a question about this blog post, or about anything to do with EverWeb, please let us know in the Comments Section below.