How are you handling responsive typography?

[mikes02]

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.

Looking forward to hearing input.

[Sedana]

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.

[iknowdavehouse]

Genuine question – Is there really an issue with using px for fonts in RWD? As long as the typography is considered and resized as needed at key break points it’s much of the same isn’t it?

[Sedana]

As Hompimpa said earlier. If you use em or % you can change the base font size of the body and all the fonts will follow in size accordingly.

If you have declared font-size in px in 50 places in your stylesheet you will need to override 50 places in your media queries instead of just one.

[iknowdavehouse]

That’s a very good point – I guess I’ve only needed to make a handful of changes previously / haven’t always scaled the typography at the same ratio as it initially appears. Thanks

[Sedana]

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

[Paulie_D]

>and give us rem

So old news, vh & vw FTW :)

[mikes02]

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?

[Author]

Posts