I am learning more and more about building responsive, but one thing that still gets away from me at times is typography, primarily because I have seen so many different methods of handling it, and perhaps that is the way it will always be.
Because I like to have a more fundamental grasp of what I am learning, (http://cdpn.io/HhCzi “Responsive Typography”) that I am hoping will lead to a discussion on how to handle typography from an early point in a project.
I go for em. The base font size in em is 16px = 1 em, so it’s quite simple to calculate for example 12px (12/16).
I keep my %-units to items and contents widths.
I’m not saying my way is the correct way, but it has worked for me so far :)
I recently heard from a jQuery UI team member that “If you have px in your responsive stylesheet, you’re doing it wrong”.
I do not agree with this as heights can still be valid to determine in px. Another discussion maybe but thought I’d throw it in here.
That is also a very valid point to make. If you don’t need to make overall changes to font size then it really doesn’t matter if you use px. Maybe only headers needs to be smaller for phones for example, then I see no point in converting to a measurement you’re not used to. Em can be a handful due to it being relative to its container.
So I’d say it also has alot to do with the design and give us rem ;)
I use EM as well, I should have been more specific, I didn’t want this to be an em vs px debate. What I am really curious to find out is, how much adjusting do you find yourself doing as your layout breaks down? Are you adjusting font size a lot? Is it typically only headers that need adjusting? If you’re using the method of just increasing the body font-size percentage, how do you typically determine the percentage increase? Is it completely arbitrary or is there an equation you use?