Typography and Font Manager BASIC Settings

Support
#1

Hi everyone,

SORRY for putting in another question about typography - I’m new to X and website-building at all and there are many issues for me…

For the last 4 hours or so I tried to find out about the settings for fonts and sizes.
Unfortunately, the article in the knowledge-base seems to be for an older version, as the settings look different?

Anyway - I found out about px and em and rem and so on, I think I understood that all the settings in “theme-options” are just for Gutenberg (and maybe the “classic” elements) but not the v2-Elements in cornerstone?
I learned, that the use of px should be avoided because of scaling issues on different screen-sizes and em or rem would be better.
I found out, that 16px would probably be a good root size, because the standard broswer setting for font size seems to be 16 and that way a compatibility to strage browser-settings would be given.

So I tried to set the root-size to use rem, and went to theme options – Typography, where I didn’t find simply the root-size but “stepped or scaling”, px or em (how can “em” be the setting for root?) and not one but FIVE settings for font size – ALL SET TO “1”???

I downloaded and installed the “Church”-Demo and I’m trying to find out about everything, but some things are strange and don’t seem to make much sense.

Is there a way to just set all the required things to a standard-basic-setting to have something to start with?
Please help :upside_down_face:

Thanks a lot
Ralf

#2

Hi Ralf,

Thank you for writing in, if you have imported the demo, that demo’s typography settings and everything on theme options settings should be imported as well.

For the Root Font Size, please use the px unit, it’s easier to base the font-size on a fixed value. Root Font Size is not the actual size of your font it’s just the base font-size(if you use rem or em unit on your actual font-size settings)

There are five font-size settings in there that is for extra small, small, medium, large, and extra large screens.

Here’s how it calculated, for example, your extra large/desktop font-size is set to 16px, and extra small/mobile is set to 12px.

Then on your Text or Headline element font-size you set to 1.5rem, so on a desktop screen that would 16px * 1.5rem = 24px this would be your actual font-size on desktop screen.

On an extra small screen (mobile), that would be 12px * 1.5rem = 18px this would be your actual font-size on mobile screen.

Hope this shed some lights,
Cheers!

#3

Hi @friech,

thanks a lot - I just didn’t understand that the 5 font-sizes are the roots for different screens - and not different text-sizes in the document (what did not make any sense for me…)

Still two questions:

  • I do not jet understand if it would be better to use stepped (maybe 10,12,14,16,18) or scaled (then 10,18). I understand that with scaled the font-size will be calculated instead of switched - but in what way would that be different for the visitor?
  • The last field would be “Content Font Size (rem)” further down - why do I need that if I already set the root sizes?
    I set that to “1”, because I understand it that way, that with “1” it will be the “root”-sizes, correct?

Thanks again
Ralf

#4

Hello Ralf,

Thanks for updating in!

  • If you choose Scaled, the site will be using a scaled font size. Your user will also have the same setting when viewing your site in any devices. It will have a calculated font size base on its device screen.

  • The root size is only the base font for the content font size before it can be calculated.

For more detailed explanation about how Responsive Typography works, please check this out:

1 Like
#5

Hey @RueNel,
thanks for that link - it helped a lot! It should be easier to find this information - maybe you can put something like it in the knowledge-base setup section, I think it would help many people…

#7

Hi Ralf,

I have submitted your suggestion to the relevant department for further review.

Thanks again for your feedback.

#8

I was looking for font size information as well so I sustain @DerDirector request

#9

Noted. Have a great day! :slight_smile:

#10

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