Understanding font size - the basics

Support
#1

Hi, could you be so kind to help me understand some basics about choosing font size of headings & text. In particular:

  1. If I choose a font size of say 40, how will this heading change in laptop view if I have 3 sections as opposed to only 1 section for that one screen? In other words, I designed a heading in one section choosing font 40; then I decide to add more sections to that one screen. Do I go back to the 1st section & reduce the font or will the font be responsive & reduce in proportion?

  2. Should I choose different font sizes for the same heading to fit various screen sizes? What is the correct way to ensure my font is suitable for various devices?

  3. Say I have a heading with 10 words. How do I fix exactly where the words break & flow to the next line? How do I do it differently for different screen sizes?

  4. The above questions apply to text size too. As I’m not a techie & I don’t know CSS, I’ll much appreciate it if you could explain in laymen terms. Any screencasts or illustrations will be welcome!

#2

Hi There,

Thank you for writing in, please read Kory’s explanation here.

I advise that you understand and follow the method #2 (Utilize rem Units Along with Differing Base Font Sizes).

Let us know if something is not clear,
Cheers!

#3

Hi Friech,
I read Kory’s explanation & was immediately lost. :joy:

For Point 2, what is meant by:
“in Theme Options under Typography in the Root Font Size section” - where is this? Can you do a screencast and show us where & how?

For Point 3, I went to Framer’s site but couldn’t find:
“The heading that starts with “Create responsive designs…” is hidden at a certain breakpoint and replaced by a much smaller sentence starting with “Easily create responsive…”.”?

What about my question 2:
“Say I have a heading with 10 words. How do I fix exactly where the words break & flow to the next line? How do I do it differently for different screen sizes?”.

Do your answers apply only to Headings or do they apply to text too?

#4

Hello @iamwithU,

Thanks for updating the thread.

  1. Root Font Size: As you are using X Theme, please navigate under X > Theme Options > Typography > Root Font size. In that you will see an option for Stepped and scaling. For an elaborate explanation on the same, please take a look at following thread.

Please see screencast to access Typography and Root font size.

  1. [quote=“iamwithU, post:3, topic:35862”]
    I went to Framer’s site but couldn’t find:
    [/quote]

Can you please elaborate this? I am not quite sure what you meant.

If you want to have a different style for various screen-sizes then you have the option to use Hide based on screen size feature under Customize > Hide During Breakpoints. To help you get started here is a screencast that you can take a look. https://cloudup.com/cR6IMf6IAFR

If you have any doubts, please let us know.

Thanks.

#5

Thanks Prasant. Both your screencasts are extremely helpful.

What I wanted to ask was, not about “breakpoints”, but how do I insert a line break, i.e. the “return on your keyboard”: so the words go to the next line. Eg in your video, if I want the word “Display” to be on the 1st line, and “on desktop” the next line. This is important for headings with many words.

As for the Framer’s site, Friech had asked me to read Kory’s explanation. There, Kory’s point 3 referred to Framer’s website. Kory’s last sentence said: “The heading that starts with “Create responsive designs…” is hidden at a certain breakpoint and replaced by a much smaller sentence starting with “Easily create responsive…”.”?

I couldn’t see that heading that Kory was referring to.

#6

Hello @iamwithU,

Thanks for updating the thread.

You can use Shift + Enter or <br> tag to go to next line. Also to adjust the spacing you can use mbn or mtn class to remove spacing. To suggest you to please take a look at following guide to learn about the CSS class index. Please give special attention to Spacing Helpers section:

To learn about HTML <br> tag, please take a look at following article:

https://www.w3schools.com/tags/tag_br.asp

Thanks.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.