Search
Your CSS reset needs text-size-adjust (probably)
12.2.2022
Kilian Valkhof:
[…] Mobile Safari increases the default font-size when you switch a website from portrait to landscape. On phones that is, it doesn’t do it on iPad. Safari has been doing this for a long time, as a
…
Your CSS reset needs text-size-adjust (probably) originally...
The Dilemma of Naming Font Size Variables
6.7.2021
Normally, a project will have a set of pre-determined font sizes, usually as variables named in such a way that seeks some semblance of order and consistency. Any project of considerable size can use something like that. There are always …
The post The Dilemma of Naming Font Size Variables...
Links on Typography
7.5.2021
These are a few great links about typography that have been burning a hole in my saved bookmarks folder that I'm just now getting around to sharing. There's good stuff in there, from how to choose typefaces for app design to ideas for how to fix the concept of font sizing in CSS.
The post Links...
Weekly Platform News: Focus Rings, Donut Scope, Ditching em Units, and Global Privacy Control
4.3.2021
In this week’s news, Chrome tackles focus rings, we learn how to get “donut” scope, Global Privacy Control gets big-name adoption, it’s time to ditch pixels in media queries, and a snippet that prevents annoying form validation styling.
Chrome will…
The post Weekly...
Linearly Scale font-size with CSS clamp() Based on the Viewport
25.9.2020
Responsive typography has been tried in the past with a slew of methods such as media queries and CSS calc().
Here, we’re going to explore a different way to linearly scale text between a set of minimum and maximum sizes as the viewport’s width increases, with the intent of making its behavior...
Accessible Font Sizing, Explained
23.4.2020
The Web Content Accessibility Guidelines (WCAG), an organization that defines standards for web content accessibility, does not specify a minimum font size for the web.
But we know there’s such a thing as text that is too small to be legible, just as text that can be too large to consume. So,...
How Do You Do max-font-size in CSS?
30.1.2020
CSS doesn't have max-font-size, so if we need something that does something along those lines, we have to get tricky.
Why would you need it at all? Well, font-size itself can be set in dynamic ways. For example, font-size: 10vw;. That's using "viewport units" to size the type, which will...
Using a PostCSS function to automate your responsive workflow
5.9.2019
A little while back, you might have bumped into this CSS-Tricks article where I described how a mixin can be used to automate responsive font sizes using RFS. In its latest version, v9, RFS is capable of rescaling any value for value for any CSS property with px or rem units, like margin, padding...
Using a Mixin to Take the Math out of Responsive Font Sizes
9.4.2019
Responsive Font Size (RFS) is an engine that automatically calculates and updates the font-size property on elements based on the dimensions of the browser viewport.
If you’re thinking that sounds familiar, that’s because there is a slew of tools out there that offer various approaches for fluid...
Typography for Developers
27.2.2019
This is intended as a practical guide for developers to learn web typography. We’ll cover a range of practical and useful topics, like how to choose and use custom fonts on the web, but more importantly, how to lay text out to create a pleasant user experience. We’ll go over the principles...