CODEWITHSUNDEEP
htmlcssresponsive-design
Quesofat
Quesofat

Reputation: 1531

Media Queries for responsive typography

I'm trying to find a way to make my typography responsive. My code will follow. Whenever I refresh in dev tools this doesn't seem to have the desired result. How can I get a good result to have text displayed well on phones, tablets and laptop/desktops? 

 @media only screen and (min-width: 320px) 
  {
    html {line-height: 1.25em, font-size: 16px;}
    h1{line-height: 1.25em, font-size:32px;}
    h2{line-height: 1.15384em, font-size:26px;}
    h3{line-height: 1.136363em, font-size:22px;}
    h4{line-height: 1.111111em, font-size:18px;}
  }

Upvotes: 1

Views: 1187

Answers (4)

sandrina-p
sandrina-p

Reputation: 4160

I use rem instead of em On my projects. The difference between them is that rem is looking always to the root of the document, in this case html.

Then on my css i have:

html {
    font-size: 1rem;

    @media (min-width: 320px) {
        font-size: 1.2rem;
    }

    @media (min-width: 760px) {
        font-size: 1.5rem;
    }
}

That way all the font-size inside <html> will change in the right way.

Upvotes: 1

Alex Waddelove
Alex Waddelove

Reputation: 16

You could use the css calc function.

font-size: calc(1em + 1vw);

As talked about here

https://www.reddit.com/r/web_design/comments/4hhs53/responsive_typography_root_fontsize_calc1vw_1vh/

Upvotes: 0

Rob
Rob

Reputation: 15160

There are a number of ways to do this and it starts with the design. Where do you decide to change the values for font size and line height? What looks good and when does it start to look bad?

When you widen the browser window and it starts to look bad, that is your break point of when to change the values using media queries or javascript. In fact, there is a javascript library to help you do such things (but the name escapes me at the moment).

Thus is the venue for the web developer to create those media queries that change the values to what looks good to you, the designer.

Upvotes: 0

Paul Redmond
Paul Redmond

Reputation: 3296

Did you set your viewport meta tag in your HTML?

<meta name="viewport" content="width=device-width, initial-scale=1">

Also, Why don't you use REMs for this to make it more simple? You could specify the initial html font-size and line-height and then change the REM value for each query. Read: https://css-tricks.com/confused-rem-em/

Upvotes: 1

Related Questions