0

I was given a Figma design of a webpage. The Figma page width was 1825px. The width of my laptop is 1080px. Suppose a text in Figma page has font-size 20px. How do I convert it to my laptop so that the ratio is maintained? I can't use a percentage because I'm using flexbox. And when I try using percentage what it does is takes the percentage of its parent container rather than the entire body.

I also tried using VW. Calculated the view width based on the 1825px breakpoint and implemented that. The issue is that the pixels are getting distorted in this approach. Also, This answer Typography using VW got lots of upvotes means VW works, Then why am I facing the issue?

I'm using react and I don't want any javascript solution. Is there any way to solve this using CSS only?

era s'q
  • 537
  • 1
  • 7
  • 27

2 Answers2

1

Are you sure you need to do it? Font size usually changes when breakpoint is reached.

But if you really need to do it, you may set the font-size based on viewport width.
So if 20px font-size on 1825px width is desired ratio then you need to set font-size to 0,01vw to preserve the ratio across all screen sizes.

fromaline
  • 507
  • 3
  • 8
  • I tried using VW but the pixels got distorted. There was no smoothness in the font. – era s'q Oct 21 '20 at 06:41
  • Yeah, exactly because of that I specified the first question. Turns out browsers don't clearly render non round font-sizes, as well as sizes in general. – fromaline Oct 21 '20 at 06:45
  • I don't understand what you mean by "Font size usually changes when the breakpoint is reached". Also, I'm excluding mobile devices for now. So we are dealing with laptops and monitors of different sizes. – era s'q Oct 21 '20 at 06:48
  • In my experience usually for font-size you want do something like this. I know it's not direct answer to your question, just want to share best practice. https://codepen.io/fromaline/pen/xxOEQXY – fromaline Oct 21 '20 at 07:02
  • This will solve my issue but isn't there a way to fix a ratio for the entire body? Otherwise I have to do this for every element I write that will be a lot of lines. – era s'q Oct 21 '20 at 07:13
  • If you want to apply this logic for multiple elements inside the body, you may just use rems on child elements and change just `:root` font-size. Check the codepen another time, I showcased how to do it. – fromaline Oct 21 '20 at 07:19
  • Ok, What I understand from your code is that: I can set the default font size based on screen size. and the use rem which will adjust based on the media queries I'm using. If font-size:12px @ 1080px screen means 1rem=12px. Also, How will I set this default font-size? As There are various tags such as

    ,

    ,

    etc whic used different font-size.

     – era s'q Oct 21 '20 at 07:33
  • Your understanding is correct. If you mean, that you have multiple `

    ` tags with different font-size, then you need to specify selectors for each different `

    `. For example, `

    `, `

    ` etc. and different font-size for `.p-medium`, `.p-big` in css.

     – fromaline Oct 21 '20 at 07:43
0

The easiest way would be to use media queries.

https://developer.mozilla.org/es/docs/CSS/Media_queries

You can also try other units like vw (view width), rem (relative to the font size of the root element), etc...

https://www.w3schools.com/cssref/css_units.asp

Marshall
  • 386
  • 2
  • 9
  • I mentioned the problem with VW. I have never used media queries before. So can you elaborate on how can I use it just to change the font size? Also, Isn't rem for adjusting font size for browser rather than screen sizes? can you elaborate on this too? – era s'q Oct 21 '20 at 06:46
  • With a media query you can set the font size when a certain width is reached. Example: @media (max-width: 1080px) { .element { font-size: 16px } } – Marshall Oct 21 '20 at 07:12