0

I have this basic css style. What am i trying to do is to make the text responsive(fonts), i know i have to use ems / rems to do that ( i choose rems with a fallback to px not sure if it's right but you can see in the code how i did, the px i'm not sure if i set it right), the formula i used was font size divided by 16px. Now we have a relative font size for h tags i think.. but still if i would like to resize the browser doesn't do any magic. Can you help me understand how to make the fonts responsive using rems or something else, using rems/other on setting margins, paddings, line-height? a complex example and explanation is welcomed :-d thank you very much for your time.

html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  background-color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  color: #000000;
  position: relative;
  -webkit-font-smoothing: subpixel-antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  width: 100%;
  min-width: 0;
}
html,
body {
  height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  margin: 0  0;
  margin: 0  0;
}
h1 {
  font-size: 3px;
  font-size: 3rem;
}
h2 {
  font-size: 2.25px;
  font-size: 2.25rem;
}
h3 {
  font-size: 1.5px;
  font-size: 1.5rem;
}
h4 {
  font-size: 1.125px;
  font-size: 1.125rem;
}
h5 {
  font-size: 1px;
  font-size: 1rem;
}
h6 {
  font-size: 0.875px;
  font-size: 0.875rem;
}
Bogdan
  • 693
  • 7
  • 26
  • By the wording of your question I get te feeling that you've heard you *should* use rems/ems (they are *totally* different), but I'm not convinced you understand how they work. If you're concerned about responsive typography, read http://ia.net/blog/responsive-typography-the-basics/ – stephenhay Jul 10 '13 at 06:38
  • rem is relative to the root font-size ( html ), em is inherited. and yes i don't quite understand how they work that's why i came here and ask you guys questions to understand better the entire process from scratch. – Bogdan Jul 10 '13 at 06:41
  • 1
    OK. Really, I think this article can explain it better than I can here: http://trentwalton.com/2012/06/19/fluid-type/ – stephenhay Jul 10 '13 at 06:47
  • those two articles are very interesting and making a point on few things some of them already knew other i didn't. now i know why at the office i want bigger fonts and it drives me crazy when i have to read small fonts. :-) – Bogdan Jul 10 '13 at 07:25
  • from what i've read the code is a little bit wrong. the font-size in px value should be the one that i divided by base font not the final result. :-) – Bogdan Jul 10 '13 at 07:43
  • 1
    Yes. As it is now, if a browser doesn't support `rem`, then your text is going to be way too small. If you want to use `rem`, then I would advise using `em` as a fallback instead of `px` (although this doesn't save you any time because you still have to do the relative math). A good help could be to use a preprocessor like Sass, which can allow you to create the font-size formula you want once and allow you to reuse it on the desired elements. Also, the typography section on http://bradfrost.github.io/this-is-responsive/resources.html could be a big help. – stephenhay Jul 10 '13 at 07:53
  • yes i'm using preprocessor with a mixin to calculate font-size i just input the px size and i get the two versions. Changes: set in html font-size: 100% or font-size: 16px use the formula context divided by base and set in em & rem units. Woow that website you gave me is very good, very nice collection. – Bogdan Jul 10 '13 at 07:55
  • 1
    I'd usually opt for `font-size: 100%`, since some devices' default browsers default to something other than `16px`. Then what you do with `rem`/`em` will always be relative to that. – stephenhay Jul 10 '13 at 07:57
  • i see, i will use font-size: 100%;, how about margins and paddings how can i calculate them in em,rem units? i need to divide the size i want to something... but i don't know to what. – Bogdan Jul 10 '13 at 08:26
  • I tend to use percentages for *horizontal* margin and padding, and `em`s for vertical margin and padding. There's no real formula; if you figure out how you'd like it to look in pixels, and then convert that pixel value to `em` (or `rem`), that would be one way to do it. Say your font-size is 16px and you want a ~16px margin, then your margin would be 1em. If you wanted a ~20px margin then you'd use 20/16 == `1.25em`. – stephenhay Jul 10 '13 at 10:27
  • so in the end i would still divide by base font to get the size i want for margin / padding in em, rem. – Bogdan Jul 10 '13 at 11:38

1 Answers1

2

Here is a comparison between the sizing units: http://www.narga.net/understanding-font-sizing-in-css-em-px-pt-percent-rem/

This should get you pointed in the right direction.

DreamWave
  • 1,934
  • 3
  • 28
  • 59