Fant*sy Girl: March 2020

30 Mar 2020

Make Sure Your Text is Legible on All Screens

You may adjust the size of your headers (h1 tags) in either the Divi Customizer (under Typography) or module by module. To set the h2, h3, h4, h5 or h6 size, you will need to add this CSS into your child theme.

To begin with, the CSS for font sizes of headlines, which will work best on larger screens:
h2 {
font-size: 16px;
}

h3 {
font-size: 14px;
}

If you want to adjust the sizes on mobile, use this:

@media screen and (max-width:480px) {

h1,h2,h3,h4,h5,h6 {

font-size: 14px;
}
}

In my example above that would make all h tags the same height, so you may want to do this:

@media screen and (max-width:480px) {

h1 {
font-size: 14px;
}

h2 {
font-size: 12px;
}
}

etc.

BUT, what I think may make your life easier is if you use em’s. Okay, I hear you, how can that make your life easier if you don’t know what I am talking about. Here goes.

em’s are a unit of measurement. They are scalable based on the browser setting of the font size. If your browser’s default pixel size is set to 12px then 1em = 12 pixels. So 2em = 24 px or .5 em = 6px.
In my opinion, and please feel free disagree and to have at it in the comments below, it makes the most sense to use em’s when you have a gigantic headline – say 96 pixels in your hero image. On the phone that size would be ridiculous and by using an em you are scaling it to fit the mobile device.
Here is a great website that will help you convert the font sizes: https://websemantics.uk/articles/font-size-conversion/ It shows font size, em’s & %’s.

So your CSS would look like this:

h2 {
font-size: 2em;
}

h3 {
font-size: 1.5em;
}

I was asked for the CSS for font name, font weight and line height and I will add in color.

Color

color: green;

Or use the hex code #000, etc,

Underline text

text-decoration: underline;

Letter Spacing

letter-spacing: 3px;

Or use a negative in front of the number to decrease the width between letters (i.e. -3)

Line Height

line-height: 0.8; (small) or line-height: 1.8; (large)

text shadow

text-shadow: 3px 2px red;

font family:

font-family: “Times New Roman”, Georgia, Serif;

font weight:

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

p.thicker {
font-weight: 900;
}

If you would like to have your h2 tag be 24 pixels high, bold, New Times Roman and spaced out a little bit this is what you would use for your CSS:

h2 {
font-size: 2em;
font-weight: bold;
font-family: “Times New Roman”, Georgia, Serif;
letter-spacing: 3px;
}

Pain in the neck? I KNOW! The folks over at Elegant Themes have been saying for ages they are going to put all of this into the Theme Customizer. I reckon at some point it will happen.
In the interim, hope this helps. Happy designing.

(cr: https://elegantmarketplace.com/css-for-h2-h3-h4-h5-h6-for-the-divi-theme-on-mobile/)

Another read: https://www.woorank.com/en/edu/seo-guides/mobile-font-size

Fant*sy Girl

30 Mar 2020

Make Sure Your Text is Legible on All Screens

16 Mar 2020

duolingo

11 Mar 2020

Companies With Long Names Can Have Good Logos

8 Mar 2020

Global Rebrand