Well, Typetura seems fun
I came across this update from Scott Kellum’s and Sal Hernandez’s project Typetura via my Medium feed this morning, and what a delight?!…
I came across this update from Scott Kellum’s and Sal Hernandez’s project Typetura via my Medium feed this morning, and what a delight?!…
The concept of Fluid Typography was tossed around a couple of years ago. The main idea is that if you know what size your font is at two different viewport sizes, then you can have the font scaling smoothly between …
There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies we can use and different considerations to think about. Let us count …
We’ve covered fluid type a number of times. This page probably covers it in the best detail. It’s a little more complicated than simply using a vw
unit to set the font-size
since that’s far too dramatic. Ideally, the font-size
…
Fluid typography is pretty amazing. We have a writeup of how it all works. But as fancy as that is, it’s still scaling the type linearly. What if we wanted the type size to fall along a curve? The math …
Getting right to the code, here’s a working implementation:
html {
font-size: 16px;
}
@media screen and (min-width: 320px) {
html {
font-size: calc(16px + 6 * ((100vw - 320px) / 680));
}
}
@media screen and (min-width: 1000px) {
… There have been a couple of articles lately regarding fluid type.
Matt Smith (calling it “flexible type”):
…My preferred approach for more flexible type is to calculate the font size based on the viewport height and width using the
:root
There are values in CSS that are for sizing things in relation to the viewport (the size of the browser window). They are called viewport units, and there are a number of them that do slightly different (all useful) …