Hi,
what steps between the font size you choose?
For Example:
H1: 36px
H2: 32px
H3: 28px
D you use always the same steps ? 
tom
Every font is different and so is every design, so sizes are decided individually for each project. Trying to use fixed sizes just limits your design options. I would recommend using rem instead of px.
Hi,
I use different font settings for each of my projects, be it in PX or REM. That being said, I usually use something greater than 36px for H1. 50px or more. But once again, it depends on the project.
I use rem with Righteous
H1: 2.8
H2: 2.25
H3: 1.5
but it depends a little on the font type.
Another point worth mentioning is that H tags are not just about font size. They also have Seo value and tell Google information about your site, such as sections and sub sections. It is not automatically the case that an H1 tag should be the biggest on a page or even as the first line as some believe.
1 Like
I’m one of them.
Good to know.
Same here. Font size depends on the content of the heading and the overall site layout. I tend to adjust it so that it does look good on every breakpoint. And agreed to @Flashman’s comment about H1 tags don’t automatically have to be the biggest heading on a page.
The use of px is very 1990s… Essentially the problem is that they do not scale properly on modern displays. I also avoid px settings with padding because the values are fixed, rather than relative and actually require more work.
This article may help to explain it:
This article about fonts was eally interesting and yet somewhat confusing. I will feel like they had to be a math mutation to understand it. At this point I still really don’t, but I get words coming from. I too would like to hear what others have default to when it comes to responsive fonts to the viewports.
What is Righteous?
I assume paragraph you are using 1 rem, right?
1rem usually translates to 16px in most browsers. Again, it really depends on the font. Some fonts seem huge at 1rem (16px) while others seem way too small even at 1,25rem (20px).
That’s a google font.
Thanks, I’ve never heard of it.
I for the most part use rem but will also use em and make use of bootstrap classes like .display-1 for large text.
I have a tutorial coming on how to use rem and em together.
1 Like
The point about rem is that it’s flexible and independent of screen resolution, so you can forget about the maths and just go with what looks right with the reassurance that quality will be maintained.
The problem with px is that it focuses on fixed values that cannot be relied on in an age where we have so many device types and screen resolutions. Before switching to Blocs I actually started with Foundation, which uses rem by default, so all of this makes perfect sense to me, however I am frequently puzzled by the resistance to using rem and trying to fix a px equivalent value, because it’s pointless.
For sizing, every font, website and target audience is different, so focussing on fixed values to use for every site is horribly limiting.
One small piece of advice is to set the rem value slightly on the large side and also allow adequate line spacing for comfortable viewing. This makes for easier reading, especially with older visitors and is also perceived as being more trustworthy.
You should also consider on screen contrast and I recall the trend a few years ago for very low contrast between text and background that made reading unnecessarily difficult at times.
Try to learn about effective font pairings, knowing when to mix serif and sans serif fonts for example and also effective ratios for differences between header types and paragraphs.
After a while you’ll start to gain a sense for what looks right and it makes a huge difference to the way your websites look. If you manage to always have attractive fonts that fit the general theme and high quality images the web design can often be very simple and fall into the background, however the overall effect will still be excellent.
1 Like