mikes02

# February 27, 2013 at 8:24 pm

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.

Taufik

# February 28, 2013 at 12:02 am

I often use a fixed base font size and use percentage for the heading font size. So if the media query going to change the base font size, then the others will follow the ratio.

Sedana

# February 28, 2013 at 4:15 am

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

# February 28, 2013 at 4:50 am

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

# February 28, 2013 at 5:13 am

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

# February 28, 2013 at 5:27 am

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

# February 28, 2013 at 7:27 am

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

# February 28, 2013 at 10:04 am

>and give us rem

So old news, vh & vw FTW :)

mikes02

# February 28, 2013 at 11:49 am

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?