Things I've Tagged ‘Responsive Design’

Page 1 of 1

Fluid Type for Better Responsive Text

I’ve been playing around with fluid type for a while and happened upon a pen by…I don’t remember who. I forked it a while ago, but in essence we’re simply attempting to scale type based on viewport size.

In the instance highlighted here, let’s say we want a bold header in a hero space to essentially always have that bold feel no matter what screen size we’re viewing items at:

See the Pen Scaling Text with Viewport Units by mikemattner (@mikemattner) on CodePen.

Not a bad solution, but if you’re not careful that can scale infinitely and in a way that is just a bit too in your face. My suggestion is to set–at the very least–an upper bound to that scaling. I’ve done something similar on this very site.

My minimum size is set at 14px, plus a half a percent of the viewport width with a line-height set based on 1.1em plus a half a percent of the viewport width. This will scale up infinitely, but I found that that maximum font-size I wanted was closer to 20px. Through a little viewport resizing and code inspection, I found the viewport width where this formula would generate a nominal 20px size and set that as my upper bound:

html {
  font-size: calc(14px + 0.5vw);
  line-height: calc(1.1em + 0.5vw);
  @media (min-width: 1200px) {
        font-size: 20px;

Not too bad of a result as far as I can tell. The rest of my typographic sizing builds on this initial sizing and seems to work out fairly well for my purposes.

Easy technique.

More Responsive Changes

When I was first building/designing my responsive site, I based my initial efforts on a slightly modified version of Joni Korpi’s Golden Grid System. It served me fairly well to begin with, but the way the media queries were set up made the layout’s reaction to changes in screen size never look quite right.

Needless to say I needed to make it work, and so I kept a lot of the underlying code intact, but pretty much abandoned the grid that was in use in that system, and came up with something that worked a little bit better for me. This allowed me to set a static width for larger screens and then adapt a little more naturally for smaller sizes.

Which is precisely the point in systems like that. You take what works for you, then adapt and modify the rest to better fit your needs.

Making Changes, Responsive Experimentation

With all of the changes going on in my industry, the improvement and exceedingly common use of responsive design techniques, and my general evolution as a web developer I needed to take a leap forward on my personal site. Hard to sit back and see all that was changing, see my own skill as a developer improve, and not do something. The problem has always been time.

I’ve been sitting on this redesign since at least November, and have scrapped many an iteration since then, but the holiday season kept me busy, and quite frankly I was never going to finish this unless I just launched the thing.

So in all it’s glory this is what it is for now. I’ll be making several changes as I go, improvements in the details, making sure I get everything right, because right now, it’s a hot mess, and adding back a lot of important functionality that I’ve not included in this theme just yet.

This site is tentatively responsive, but not everything plays nicely at this time. I’ll get there, I’m new to this. I’ve based the grid on Joni Korpi’s Golden Grid System, and it’s been modified slightly to accommodate my needs. A lot of my needs, unfortunately, made creating a workable grid kind of tough, but it works mostly.

I have a lot of modification to go through on older posts once I get to adding my archive links and search. I stupidly used a hacky grid in the old layout.

Well, take a look around, let me know what you think.