Scaling Text is a very simple widget that allows you to effortlessly scale the size of text relative to the viewport. This extra level of control and finesse ensures your typography will look perfect across all screen sizes.
While Muse offers responsive resizing of text containers, the font size of the text within is left unchanged. Our Scaling Text widget is a game changer, allowing fluid scaling of the text itself.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Release Log
1.0: Initial widget release
Setup
Drag the widget from the library and drop into your project in Design mode.
Placement of the widget isn't important. We suggest placing the widget out of the way, off canvas.
Create a text box and enter your text.
Apply a paragraph style to the text box. If you're using existing text, apply the paragraph style to the existing text.
Open the widget option panel.
Define the style name in the Paragraph Style field.
TEXT SCALING SETTINGS
Open the first section: Mobile Breakpoint
Font Size (vw): The font size setting uses viewport width units. This setting is different from the standard fixed font size units you may be used to. Viewpoint width (vw) units are relative to the viewport (the screen space). The number entered represents a percentage of the viewport. So a setting of 10 represents 10% of the viewport. Overall, expect to use lower numbers for vw-based font sizes. Try out the default setting of 6 to get started.
The Font Size (vw) set in the widget option panel overrides the font size set in Muse. We suggest styling text as normal in Muse, appropriate for the design. Then use the Font Size (vw) unit in the widget option panel to match the font size appropriate for the design.
Line Height (%): This percentage-based setting applies to the height between lines of text. For most instances, you will use the default setting of 1%. However, keep in mind that this setting accepts fine settings such as 0.54.
Bottom Margin (%): This setting determines the margin of space beneath the text. When previewed, the text will appear closer or further from the element beneath.
All font scaling settings in the widget accept decimal-based entries for fine-tuned control
Breapoint Min Width & Breakpoint Max Width: These settings set the width range (in pixels) that the font scaling settings will apply to. So if you wish to have unique scaling settings for the mobile breakpoint, possible entries would be 0 for the Breakpoint Min Width and 479 for the Breakpoint Max Width, assuming that the next set of scaling settings began at 480.
A Few Notes About Breakpoints
While the widget includes sections for 4 breakpoints, you are not required to set them all up. The font scaling options set in any breakpoint section can apply to any pixel width range you like.
This widget may be used in responsive or non-responsive sites.
If your site is responsive and contains breakpoints, the breakpoint settings in the widget option panel (Breakpoint Min Width & Breakpoint Max Width) do not have to match the breakpoints set in the Muse site. Our widget works independantly from the breakpoints in Muse.
If you wish to have your text scale at one rate across all screen sizes, you may set the first section (or any section to cover all possible widths. Something like 0-5000.
If you're using individual scaling settings at multiple breakpoints, it's best practice to set the Breakpoint Min Width to the beginning of the breakpoint range. In this sense, examples of four breakpoint ranges could be:
0-499
500-767
768-959
960-5000
Again, the above breakpoint ranges are just examples. You can use any ranges you like. Simply try to ensure that the min and max widths don't overlap.
USING WITH THEMES
A great way to use this widget is to use it with templates or exisitng sites. If your site uses paragraph styles applied to headlines and body text throughout your site (MuseThemes templates typically use paragraph styles for all text), you can quickly apply this site to text across your entire site.
To apply text scaling to exisitng sites and templates:
Open an exisiting site or theme. In this scenario, we'll use headlines as an example.
MuseThemes templates generally use paragraph styles for all of the text throughout. For existing sites built from scratch that don't use paragraph styles, you can easily add them. Select one headline text box, and apply a paragraph style. Now to apply the same parapraph to other headlines throughout the site, simply select another headline, open the Paragraph Styles panel, and click on the paragraph style you previously created. The style will be automatically applied.
Now that we have headlines throughout the site with the same paragraph style applied, we can set all of these headlines to scale, in one simple action.
Start by copying the paragraph style name. Make sure that there are no spaces in the name. While the paragraph styles in Muse can accept spaces, our widgets cannot because they create CSS style names (which cannot use spaces) when published. If your paragraph style name contains spaces (many MuseThemes template paragraph style names do), simply replace the spaces with hyphens or underscores.
Drop the Scaling Text widget onto your Master Page. This way, the paragraph style set in the widget will apply to any text throughout the entire site (with the defined paragraph style applied). Widgets placed on individual pages will only apply to paragraph styles on that page.
So for our headline example, assuming each page has a headline, and each headline has the same paragraph style applied to it, text scaling will be applied to every page headline when the widget is placed on the master page, and the style name is properly defined in the widget.