CODEWITHSUNDEEP
cssfont-size
user3473001
user3473001

Reputation: 71

How to make responsive text that isn't too large or too small

I'm new to web design. I have a decent understanding of CSS/HTML, but I'm conflicted on how to style fonts to fit mobile devices.

Currently I use px to make my fonts larger or smaller on my web pages. However, doing this will make my fonts look very small on high px/inch devices.

How can I make my fonts appear legible on these high resolution screens without making them look super small?

For example:

.thisClass{
font-size:12px;
}

is what I am used to using. On my laptop it looks fine, but I have no idea how it looks on tablets because I don't own one D:

Upvotes: 4

Views: 6214

Answers (2)

Simone
Simone

Reputation: 166

According to this link https://ux.stackexchange.com/questions/7820/font-size-for-mobile-sites, font-size:medium; is a flexible solution, and many people there have experimented for optimal size if you know more about the target device.

By the by, this isn't the best way to solve this problem, but since you say you're new to mobile web design I'd also like to point you towards the @media css selector https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries It lets you set different styles depending on things like device type, screen size, phone orientation... I imagine it might come in handy in your future :)

Upvotes: 1

ѺȐeallү
ѺȐeallү

Reputation: 3017

Check this out from CSS3...

  • 1vw = 1% of viewport width
  • 1vh = 1% of viewport height
  • 1vmin = 1vw or 1vh, whichever is smaller

  • 1vmax = 1vw or 1vh, whichever is larger

    h1 { font-size: 5.9vw; } h2 { font-size: 3.0vh; } p { font-size: 2vmin; }

Upvotes: 5

Related Questions