Here we discuss the relationship between line height and font size and how to properly set them the first time, to speed your setup and allow for responsiveness.

Responsiveness is what controls the size of how font (text) appears when viewing a page across a variety of screen sizes, browsers and devices.

EBG is unique in how we do this to make sure your content displays as best as possible no matter how anyone views it, no matter what device they use.

It is really simple, just follow the below instructions.

Using the "Format" drop down on the left, there are two settings.

#1-EBG Responsive Font Size (for content) sets the font size on the line
#2-EBG Responsive Line Height (for content) sets the height of the line (the line that will be containing the font)

We always say use a line height 10 px larger than the font to allow room for the text lines to fit inside that line.
Line height sets the height of the line the font goes on, font size sets the size of the font on the line.

If you want a text at 20px, then the minimum line height should be 30px.

A-First, select the text in question, then click on the formats drop down as shown in the top red box in the picture below.

 

B-Notice the EBG Responsive line height (for content) is already checked at 30px in the above picture.

C-To change that setting, you simply need to hover over where it says "EBG Responsive Line height (for content)"
then when you see the size, click on the 30 px to uncheck it. 

In EBG to make sure you are setting correctly, we force you to uncheck "already checked" settings first, then reopen the formats box to select the setting you want.

D-So first we uncheck as in the picture below, 30 px is no longer highlighted, if you scroll up and down the size chart and nothing is highlighted, as shown in the previous screenshot above, then you know the line height is now OFF.
Go to next step to set line height. Sounds like extra steps but it saves agony overall and gives you absolute knowledge the responsive settings are correct.


E-Notice in the shot below, how if you select a second setting, EBG will allow BOTH to highlight, THIS is what you want to avoid, 


F-always uncheck unneeded settings first, THEN check the setting you want.

Once you uncheck the extra setting, it will once again look like this below showing the line height is now set to 30,

Remember line height needs to be at least 10 px larger than your intended font size (20),
and by the way if you want MORE space between lines,
set line height higher than 10 px bigger than the font,.....to give the font on the line more breathing room.

G-So if your goal is font at 20px, then line height should be set to 30 px as above. (10 px bigger line than the font "text")

Now that you have UNCHECKED any other unneeded line height settings, ONLY the 30px is set for line height as shown above.

H-NOW simply go to the EBG Responsive Font Size (for content) setting, as shown in next screenshot, to set the font size to 20 px as shown below.
Of course making sure NO other font sizes are selected first. (if they are, same as before, uncheck them before setting the size you want)
 
GOAL ACHIEVED!
Now you have a correctly set line height at 30 px and a font size at 20 px (10 px smaller font than line height)

Doing this in this fashion will avoid issues with responsiveness, which is the automatic resizing of all of these elements when viewing on different devices or screen/browser sizes.

I hope that helps, if you want further great tips on laying out these elements and others watch video 2 on this page.
https://members.eyeballglue.com/ebg-tutorials/quickstart/#contenteditor