April 7th, 2018

A good start.

body {
    font-size: calc(0.8em + 1vw);
    line-height: calc(1.4em + 1vh);
    margin: 7.5vmin;
}

48° N , 122° E

Also on Twitter

Reply Retweet Favourite

Responses

Eric Meyer

Why calc the line-height rather than use a unitless value? (I can’t get the URL to load on my iPhone, is why I ask blindly.)

# Posted by Eric Meyer on Saturday, April 7th, 2018 at 6:14pm

Fred Simmons

Every time I try something like this, someone sends me a screenshot of their Pixel XL in landscape and my plans are ruined.

Jeremy Keith

I want the line height to adjust (slightly) to the viewport height. A unitless value would always be relative to the text size, regardless of viewport height.

Jeremy Keith

Downside: I have to use units inside calc(), which means I’m going to have redeclare line-height for other elements like headings. It would be nicer if I could declare calc(1.5 + 1vh).

Eric Meyer

I’ll have to test this out later. An interesting approach to be sure!

# Posted by Eric Meyer on Saturday, April 7th, 2018 at 6:27pm

Tom Tinkerson

curious, why do you relate the font size to the vw, but the line-height to vh?

Jeremy Keith

I’m mostly just futzing around, and brainfarting these little experiments as they come up. (I’m most definitely endorsing this approach as anything scalable.)

Matthias Ott

Maybe Jeremy wants to adjust the line height to the longer line length on larger viewports. Short, “mobile” columns stay readable even with a dense line height, while longer lines require more leading.

Timo Häkkinen

Did something similar a month ago for hobo.fi body { font-size: x-large; font-size: calc(130% + 0.25vw); line-height: 1.3; width: 95%; max-width: 30em; margin: auto; } h1, h2, h3 { line-height: 1.1; hyphens: auto; }

11 Shares

# Shared by Jordan 💀 Dobson on Saturday, April 7th, 2018 at 6:11pm

# Shared by Wellington Torrejais da Silva on Saturday, April 7th, 2018 at 6:27pm

# Shared by roger walsh on Saturday, April 7th, 2018 at 6:30pm

# Shared by Zulema ❦ on Saturday, April 7th, 2018 at 6:35pm

# Shared by MëJJï MęJJį on Saturday, April 7th, 2018 at 8:22pm

# Shared by Joe Snell on Saturday, April 7th, 2018 at 9:24pm

# Shared by Al Graham on Saturday, April 7th, 2018 at 10:08pm

# Shared by Sami Keijonen on Sunday, April 8th, 2018 at 1:09pm

# Shared by Marcel Bootsman ♎ on Sunday, April 8th, 2018 at 1:48pm

# Shared by Roni Laukkarinen on Sunday, April 8th, 2018 at 1:56pm

# Shared by Rob à fleurs 🌸 on Monday, April 9th, 2018 at 4:31pm

100 Likes

# Liked by roger walsh on Saturday, April 7th, 2018 at 6:43pm

# Liked by Michael Bishop on Saturday, April 7th, 2018 at 6:44pm

# Liked by Wellington Torrejais da Silva on Saturday, April 7th, 2018 at 6:44pm

# Liked by Bogdan Soare on Saturday, April 7th, 2018 at 6:44pm

# Liked by Josh Clari on Saturday, April 7th, 2018 at 6:45pm

# Liked by Luís R. on Saturday, April 7th, 2018 at 6:45pm

# Liked by Foxymoron 🦋 🌊 on Saturday, April 7th, 2018 at 6:45pm

# Liked by Darren McSorley on Saturday, April 7th, 2018 at 6:45pm

# Liked by aurel kurtula on Saturday, April 7th, 2018 at 6:45pm

# Liked by Dale Blackburn on Saturday, April 7th, 2018 at 6:45pm

# Liked by Luca Degasperi on Saturday, April 7th, 2018 at 6:46pm

# Liked by Nathan Kunicki on Saturday, April 7th, 2018 at 6:46pm

# Liked by Andres Fulla on Saturday, April 7th, 2018 at 6:46pm

# Liked by ʟᴜᴄᴀs on Saturday, April 7th, 2018 at 6:46pm

# Liked by Francesco Migliorato on Saturday, April 7th, 2018 at 6:46pm

# Liked by Harkanwal on Saturday, April 7th, 2018 at 6:47pm

# Liked by Eka on Saturday, April 7th, 2018 at 6:47pm

# Liked by mastodon.social/@tbaxter on Saturday, April 7th, 2018 at 6:47pm

# Liked by Imageboss.me on Saturday, April 7th, 2018 at 6:48pm

# Liked by Ram 🦌 on Saturday, April 7th, 2018 at 6:48pm

# Liked by बिचरो on Saturday, April 7th, 2018 at 6:48pm

# Liked by Fredrik Sogaard on Saturday, April 7th, 2018 at 6:48pm

# Liked by Wate on Saturday, April 7th, 2018 at 6:48pm

# Liked by Jort van der Heide on Saturday, April 7th, 2018 at 6:48pm

# Liked by Alex Carpenter on Saturday, April 7th, 2018 at 6:49pm

# Liked by Emanuel Kluge on Saturday, April 7th, 2018 at 7:18pm

# Liked by Joel Rodelo on Saturday, April 7th, 2018 at 7:18pm

# Liked by Raymond Brigleb on Saturday, April 7th, 2018 at 7:18pm

# Liked by Jeremy Heath on Saturday, April 7th, 2018 at 7:18pm

# Liked by Lode Vanhove on Saturday, April 7th, 2018 at 7:18pm

# Liked by Hans Fjällemark on Saturday, April 7th, 2018 at 7:19pm

# Liked by Andy Bell on Saturday, April 7th, 2018 at 7:19pm

# Liked by Michał Miszczyszyn on Saturday, April 7th, 2018 at 7:19pm

# Liked by Kilian on Saturday, April 7th, 2018 at 7:19pm

# Liked by Mateo on Saturday, April 7th, 2018 at 7:19pm

# Liked by Jordan Moore on Saturday, April 7th, 2018 at 7:19pm

# Liked by Peter Antonius on Saturday, April 7th, 2018 at 7:57pm

# Liked by Emiliano Omar on Saturday, April 7th, 2018 at 7:57pm

# Liked by John S on Saturday, April 7th, 2018 at 7:57pm

# Liked by Kuba Bartwicki on Saturday, April 7th, 2018 at 8:40pm

# Liked by Dave Woodall on Saturday, April 7th, 2018 at 8:40pm

# Liked by SAMYFARAF on Saturday, April 7th, 2018 at 8:40pm

# Liked by Romaric Pascal on Saturday, April 7th, 2018 at 8:41pm

# Liked by MëJJï MęJJį on Saturday, April 7th, 2018 at 8:41pm

# Liked by Vicky G on Saturday, April 7th, 2018 at 8:41pm

# Liked by Pete Lambert on Saturday, April 7th, 2018 at 8:42pm

# Liked by Craig Morey on Saturday, April 7th, 2018 at 9:16pm

# Liked by Oliver Müller on Saturday, April 7th, 2018 at 9:16pm

# Liked by mattpritchard on Saturday, April 7th, 2018 at 9:17pm

# Liked by Chris_ on Saturday, April 7th, 2018 at 9:17pm

# Liked by Luiz Sócrate on Saturday, April 7th, 2018 at 9:17pm

# Liked by corenominal 👾 on Saturday, April 7th, 2018 at 9:51pm

# Liked by Richard Thiel on Saturday, April 7th, 2018 at 10:33pm

# Liked by Bramus! on Saturday, April 7th, 2018 at 10:35pm

# Liked by Mark Everitt on Saturday, April 7th, 2018 at 10:35pm

# Liked by Tawny Bartlett on Saturday, April 7th, 2018 at 11:14pm

# Liked by 80ssundries on Saturday, April 7th, 2018 at 11:45pm

# Liked by Shogo Sensui on Sunday, April 8th, 2018 at 1:23am

# Liked by Aung Kyaw Hein on Sunday, April 8th, 2018 at 2:20am

# Liked by Thomas Albrighton on Sunday, April 8th, 2018 at 2:20am

# Liked by Adam Meyer on Sunday, April 8th, 2018 at 4:09am

# Liked by John F Croston III on Sunday, April 8th, 2018 at 4:09am

# Liked by Heath Flohre on Sunday, April 8th, 2018 at 4:12am

# Liked by Scott Mallinson on Sunday, April 8th, 2018 at 4:18am

# Liked by Chase McCoy on Sunday, April 8th, 2018 at 4:58am

# Liked by Marc Friederich on Sunday, April 8th, 2018 at 7:20am

# Liked by Brian on Sunday, April 8th, 2018 at 7:21am

# Liked by rolf ahlborn on Sunday, April 8th, 2018 at 9:02am

# Liked by Anthony Pauwels on Sunday, April 8th, 2018 at 9:36am

# Liked by Tosbourn on Sunday, April 8th, 2018 at 10:10am

# Liked by Christian Hockenberger on Sunday, April 8th, 2018 at 10:10am

# Liked by Michael on Sunday, April 8th, 2018 at 12:03pm

# Liked by Marcus Kramer on Sunday, April 8th, 2018 at 12:48pm

# Liked by Rasmus Kaj on Sunday, April 8th, 2018 at 1:29pm

# Liked by Cale Mooth on Sunday, April 8th, 2018 at 1:29pm

# Liked by Pat Ramsey on Sunday, April 8th, 2018 at 1:29pm

# Liked by Juho Ruohola on Sunday, April 8th, 2018 at 1:30pm

# Liked by Letra Studio on Sunday, April 8th, 2018 at 2:01pm

# Liked by Marcel Bootsman ♎ on Sunday, April 8th, 2018 at 2:01pm

# Liked by Roni Laukkarinen on Sunday, April 8th, 2018 at 2:01pm

# Liked by Guillaume Soldera on Sunday, April 8th, 2018 at 2:01pm

# Liked by Bryan Hidalgo on Sunday, April 8th, 2018 at 2:01pm

# Liked by Hubert SABLONNIÈRE 😎 on Sunday, April 8th, 2018 at 2:02pm

# Liked by Arne Sierens on Sunday, April 8th, 2018 at 2:03pm

# Liked by ZOMDir on Sunday, April 8th, 2018 at 3:06pm

# Liked by August van de Ven on Sunday, April 8th, 2018 at 3:07pm

# Liked by Lawrence Meckan on Sunday, April 8th, 2018 at 3:07pm

# Liked by Jason Mayo 🍩 on Monday, April 9th, 2018 at 1:36am

# Liked by Gerard Girbes on Monday, April 9th, 2018 at 1:36am

# Liked by Luke McDonald on Monday, April 9th, 2018 at 1:36am

# Liked by Mathias Dannevang on Monday, April 9th, 2018 at 1:36am

# Liked by Usman Abiola on Monday, April 9th, 2018 at 1:36am

# Liked by A Book Apart on Monday, April 9th, 2018 at 1:36am

# Liked by Paul Straetmans on Monday, April 9th, 2018 at 9:42am

# Liked by Antje Vogt on Monday, April 9th, 2018 at 9:42am

# Liked by alberto ferrero on Monday, April 9th, 2018 at 9:43am

# Liked by PO. DEMULSANT on Monday, April 9th, 2018 at 9:44am

# Liked by Manuel Balland on Monday, April 9th, 2018 at 2:44pm

# Liked by Rob à fleurs 🌸 on Monday, April 9th, 2018 at 4:38pm

# Liked by Royal Geek Lord on Tuesday, April 10th, 2018 at 10:18pm

Have you published a response to this? :