4

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:

user3473001
  • 71
  • 1
  • 7
  • Don't use pixel sizes (`px`) then. Use `pt` (points) or some OTHER unit system that isn't tied to your display's physical size. 1 pt = 1/72 inches. An inch is an inch, no matter how big/small your display's pixels are. – Marc B Jun 16 '14 at 15:57
  • remenber that people can zoom themselves. Some reading about screen specification and then the use of mediaqueries could help you to set a few(2-3) safe break points to reset font-size. – G-Cyrillus Jun 16 '14 at 16:00
  • 2
    In CSS, px is _not_ equivalent to pixels. It's a measurement that's supposed to scale with the pixel-density of the device and the typical viewing distance. – Adrian McCarthy Jun 16 '14 at 16:43

2 Answers2

5

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; }

ѺȐeallү
  • 2,887
  • 3
  • 22
  • 34
1

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 :)

Community
  • 1
  • 1
Simone
  • 156
  • 2
  • 7