Ethan Marcotte

Ethan Marcotte RWD
Ethan Marcotte across four different breakpoints

View Ethan Marcotte

Ethan Marcotte has just relaunched his .com site and it is looking fabulously responsive as you might well expect.

The attention to detail in this site is impressive, there are quite a few different media queries to adjust and restructure the layout of the page starting with a min-width:0 however there is a heavy use of calc in the font-size, margin and padding.

Extra flexible with calc

The first law of responsive design is a flexible gridbased layout and we would achieve this by changing the pixel based widths with percentage based widths. Simple. In the beginning, however, we would still keep our margin and padding set to px, and then we started to set them as em. Now we have a better way to set both our margin and padding, as well as our font-size so that it remains as flexible as our grid.

Calc and font-size

It shouldn’t be a surprise to anyone that you need a different font-size on small screens than you do a much larger screens.  Some basic assumptions are that the small screen (watches, phones, tablets) have much less space and are often viewed quite close with the added bonus that in most situations you can move the device closer and further from your face to satisfy your reading needs.  The other thing you need to consider is the line length… make the text too big and it becomes difficult to read because the line lengths are so short, too small and the reader will strain to see the screen.

As the viewport/device size increases then we have the reverse.  Most occasions the user will be slightly further from the screen and not have the freedom to easily change the position, and there is the danger that the line lengths begin to get really really long as we try and fill the screen making it, again, very difficult to read.

Ethan has a solution to this (he always does) where by he sets the font-size based upon a CSS calculation.

body {
font-size: calc(14px + (16 - 14) * ((100vw - 300px)/ (1400 - 300)));
max-width: 40em;

This effectively gives us something along the lines of this scale

Viewport Size font-size
200px 13.81818182px
300px 14px
500px 14.36363636px
800px 14.90909091px
1000px 15.27272727px
1200px 15.63636364px
1600px 16.36363636px

If you want to get to grips with the approach check out the article by Made by Mike who came up with this approach.

And to keep everything just as fluid as the type the same approach is taken on both the margin and padding as you can see below.

margin: calc(1em + 5vh) calc(.5em + 5vw);

padding: calc(.5rem + 1vh) calc(.5rem + 2vw);

Ethan Marcotte Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Media Queries

@media (min-width:0) { }

@media (min-width:27.5em) { }

@media (min-width:34em) { }

@media (min-width:50em) { }

@media (min-width:27.5em) { }

@media (min-width:40em) { }

@media (min-width:64em) { }

@media (min-width:39.375em) { }

@media (min-width:60em) { }

@media (min-width:50em) and (max-width:74em) and (min-height:70em) { }

@media (min-width:50em) and (max-height:56.125em) { }

@media (min-width:80em) and (max-height:51em),(min-width:110em) and (min-height:65em) { }

@media (min-width:39.75em) { }

@media (min-width:39.75em) and (max-width:50em),(min-width:100em) { }

@media (min-width:50em) and (min-height:56.125em) { }

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.