Create a Scaling Full Screen Headline
Sometimes you want to have a block of copy stretch across the width of your layout, sometimes you want to maintain scaling in layout with verbiage so it fills its space uniformly, and sometimes you want to have a block of content fully centered in the screen.
Let’s solve all three problems in just 10 lines of CSS:
See the Pen Scaling Headline Demo by Dan Cruzat (@DanCruzat) on CodePen.
So not immediately obvious, but our Hey There message is filling its immediate available space, be it a tiny container in a layout, as above, or more apparent in a full-screen treatment.
The full screen also shows the centering effect more clearly, playing with our window size shows us the text scaling in direct proportion to the window’s width, line breaks never happen and there isn’t a jarring font size change at a media breakpoint.
To run through the rules:
Full Screen
html, body { min-height: vh; }
First, we are going to tie the height of our <body> tag to the full available visible area. If we don’t do this, the bottom edge of the <body> tag will hug the bottom of the content. For our purposes, it would look as though the headline was just sitting at the top of the browser, no good.
We’re able to accomplish this using viewport height, the vh, which is a percentage of the visible area and an insanely useful metric. In the dinosaur days of HTML, you would ballpark sizing on fixed layouts as to appear “full” on an average size screen, and things always looked out of date within a few months.
Viewport Units solve this problem by allowing a reference to the viewport size, aka browser size. We can grab the vh for a full stage, but we can also key font-sizes to vw, which is exactly how we scale our text.
Scaling Text
.fillscreen { font-size: 20vw; }
With traditional responsive dev, you adjust your typography treatments at certain breakpoints to ensure best broad legibility across your layouts and content. And honestly, this is the best approach for general content, you don’t want to impose scaling that would make your layout impossible for those with accessibility issues.
But in certain cases, say a headline that needs to maintain a certain relationship with a scaling image, this is perfect. That was the exact use case that I was introduced to this method, and it’s beautiful. The headline appears to be part of the image, it pulls attention, it maintains its ratios to the space around it. It just looks good.
In this case, I reached the font-size for .fillscreen through trial and error, until I found what looked best for me, there is so much value and beauty in being able to fine-tune a layout in this way.
Centering Content
.fillscreen {
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
}
Then there’s the final piece, putting our expanding text element into a full width / full height frame that centers its content. display: flex; can be finnicky about automatic sizing so we implicitly define width: 100%; and height: 100vh; to make sure we are filling the stage, then we use justify-content and align-items to center.
And there we are, centered text that scales to maintain the spaces with its scaling container, but plenty of good modern principles of CSS that can apply elsewhere.