Fonts, borders, and Rounded Corners for responsive sites

Responsive design is great but there are some things that can be a real pain to deal with.

The first is font sizes. Since fonts don’t respond to the browser size we need another solution and the easiest to add and manage uses a tiny bit of javaScript:

document.body.style.fontSize=(window.innerWidth / 100)+"px";

When this piece of code is triggered is measures the width of the viewport, divides that number by 100 and drops the result into the body tag as an inline style.

You can trigger it any way you want – I’m currently using jquery for my project so I’m using something like this:

$(window).resize(function() {
    document.body.style.fontSize=(window.innerWidth / 100)+"px";
});

So, that sets our base font size – now we can use a percentage or em measurement to set a relative font-size that will scale based on the width of the screen!

We can now also use em units for things that will not accept percentage units – like border thickness or even corner radii:

border: 0.15em solid rgba(153, 153, 204, 1);
border-radius: 1em;

So you can now make rounded corner boxes with tame borders that scale!

Nice!

Advertisements

2 thoughts on “Fonts, borders, and Rounded Corners for responsive sites

  1. Very nice solution, but it is important to remember that on small screens we need RELATIVELY bigger fonts. It looks quite useful for reducing @media-queries breakpoints but it can’t eliminate them completely.

    1. This was really aimed at managing scaling design elements such as borders and rounded corners within a particular screen-size range but I take your point about font-sizes and, yes, until another solution comes along, there will always be media queries and breakpoints.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s