×

Change to Appearance > Typography

This is a breakpoint specific appearance page. Mind the Viewport Switch at the top of the settings screen.
All values you enter or edit while a certain breakpoint is selected will affect the frontend appearance of your WordPress page for this breakpoint.

Use the Reset All Elements button to reset each and every value for the current breakpoint.

By selecting any breakpoint from the Copy values from … dropdown you are able to copy those values to the currently selected breakpoint.

Let's change some values …

… while doing so you might notice some values with a label and a small note right behind them.

Those values are multiples of the labeled value.
So in this example body line-height depends on the originally set Line-height value (on the Grid appearance page). This is important to keep every element aligned to a grid.

Switch to another breakpoint and enter your desired values.

Always confirm your changes by clicking the Save Changes button in the upper right corner or on the bottom of the appearance page.

Pro users will have the option to add additional CSS font-styles.

Just type your selector in the selector field and press Add Tag.

New settings for your selector will appear.

… the font-family …

… the line-height (which is also a multiple of the breakpoints line-height) …

… the font-size …

… the font-weight as well …

… as values for the top and bottom margin.

Another very useful feature is the WYSIWYG button. By activating it you will enable your newly set font-style in all instances of the WordPress WYSIWYG editor in your entire installation.

As well as all the other values your newly created font-style values are responsive and can differ from breakpoint to breakpoint too.

Let's add one more font-style.

Always confirm your changes by clicking the Save Changes button in the upper right corner or on the bottom of the settings page.

Now when clicking through those breakpoints you notice how the individual settings change its values …

… this happens on the frontend as well. Users with a device using the Small breakpoint will have those values activated, user with a device qualifying for the Medium breakpoint those values and so on.

Pro You will also notice that the additional font-styles you just created are minimized and only a summary of those is shown.
This is just to save space and to easily reorder, edit or delete them.