CODEWITHSUNDEEP
cssmedia-queriesfont-size
Ben
Ben

Reputation: 16651

CSS font-size scaling on smaller devices

In CSS, how can I scale the font-size relative to the device?

I keep running into the issue that big headlines get cut off on smaller devices, see below image:

enter image description here

I understand that I can manually set a smaller font-size for smaller devices using CSS Media Queries. However, I wonder what the best way is to achieve this automatically?

Should I use px, pt, %, rem, vw etc?

Upvotes: 0

Views: 6579

Answers (4)

Umair
Umair

Reputation: 66

px, pt, %, rem, vw etc? You can use different units for the font-size depending on your choice. But you need to understand that some units are fixed size and some are dependent on other fixed units.

Understand the basics here:

  • px and pt are always fixed. %
  • % and em are dependent on the parent elements' size
  • rem is dependent on root size defined in the root element.
  • vw is viewport width and is the percentage value of the size of the window and so is vh which is same as vw but for height.

So to solve your problem, you can use fixed font-size on larger screens and use vw for small screen width.

Upvotes: 0

Trupti
Trupti

Reputation: 657

h1 {
    font-size: 8vw;
}

/* Different Relative Length  

vw – Relative to 1% of the width of the viewport
vh – Relative to 1% of the height of the viewport
vmin – Relative to 1% of viewport’s smaller dimension
vmax – Relative to 1% of viewport’s larger dimension

*/
<h1>Early Access</h1>

Upvotes: 0

Kristianmitk
Kristianmitk

Reputation: 4778

What you could do is to check on the screen size and depending on that set a proper default font-size for your body. Relatively to that resize other elements by using em (mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/length#em).

A noticeable alternative would be to use vh/vw units for your font-size

Surely you can use also media queries, but I think you try to avoid this...

Also there is a jQuery plugin that tries to fit the size of the parent width - see http://fittextjs.com/

Upvotes: 0

Nasir Husain
Nasir Husain

Reputation: 61

/* Tablet:768px. */
@media (min-width: 768px) and (max-width: 991px) {
 h1 {
   font-size: 26px; 
  }
}

/* Mobile :320px. */
@media (max-width: 767px) {
  h1 {
   font-size: 24px;
  }
}

you can increase or decrease font size as you want in the responsive device.

Upvotes: 1

Related Questions