Fontsize for H1 Headlines

• 

  manuelkuehner · Member · May 31, 2015 at 11:02 am

  • Copy link
  • Add topic to favorites

  Hello, I want to adjust the fonz size for headlines (H1, H2 and so on) and I want to change them so that they are all capital letters. How can I do that (CSS maybe)?

  Best regards from Germany
  Manuel

  The blog I need help with is: (visible only to logged in users)

• 

  alexjgustafson · Member · May 31, 2015 at 7:13 pm

  • Copy link

  Hi Manuel,

  Yes, with Custom CSS you can make this adjustment. In CSS there is a text-transform property that can make text elements all capital letters.

  For example:

  h1 , h2 , h3 , h4 , h5, h6{
       text-transform: uppercase;
  }

  However, CSS is very site-specific, so that exact selector may not adjust all headings as you’d expect. You may need to also adjust some of your site’s classes to use this text-transform property as well, for example:

  h1 , h2 , h3 , h4 , h5 , h6 , .wf-active .entry-title{
       text-transform: uppercase;
  }

  If you run into trouble adding this to one of your sites, please let me know specifically where you cannot make the change.

  -Alex G.

• 

  manuelkuehner · Member · Jun 2, 2015 at 9:14 pm

  • Copy link

  Thanks Alex,
  that helped – but there are two points:

  1. The answer is missing the part “change the font size”.
  2. I made a mistake in my question – my current theme as all uppercase but I want normal case.

  Thank you very much and excuse my very short reply.

  Manuel

• 

  alexjgustafson · Member · Jun 3, 2015 at 1:55 pm

  • Copy link

  Hi Manuel,

  Try this CSS for a start:

  h1 , h2 , h3 , h4 , h5, h6{
       text-transform: none;
       font-size: 7em;
  }

  Using ‘none’ for text-transform means the element will appear exactly as its source is typed in. No changes to the capitalization.

  Play with the font size numbers (7.5em , 8em, 8.5em etc) to make it bigger or smaller.

  You may need to create several of these CSS rules, with different selectors, to adjust different headings around your site.

  -Alex G.