Search
Getting the Most Out of Variable Fonts on Google Fonts
30.7.2020
I have spent the past several years working (alongside a bunch of super talented people) on a font family called Recursive Sans & Mono, and it just launched officially on Google Fonts!
Wanna try it out super fast? Here’s the embed code to use the full Recursive variable font family from Google...
30 Beautiful Google Fonts for Your Website
3.7.2020
Finding attractive, user-friendly, legible fonts for your website isn’t always easy, but Google Fonts, launched in 2010, helps solve that problem. Having started small, the directory now includes more...
The post 30 Beautiful Google Fonts for Your Website appeared first on Onextrapixel
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,...
Maintaining Performance
27.3.2020
Real talk from Dave:
I, Dave Rupert, a person who cares about web performance, a person who reads web performance blogs, a person who spends lots of hours trying to keep up on best practices, a person who co-hosts a weekly podcast about making websites and speak with web performance professionals…...
Considerations When Choosing Fonts for a Multilingual Website
10.3.2020
As a front-end developer working for clients all over the world, I've always struggled to deal with multilingual websites — especially cases where both right-to-left (RTL) and left-to-right (LTR) are used. That said, I’ve learned a few things along the...
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...
Futuristic and Industrial: The Best Futuristic Fonts
8.1.2020
What does it take to create a design with a futuristic vibe? I believe each of you has its pack of tricks under your sleeves and most importantly, a...
The post Futuristic and Industrial: The Best Futuristic Fonts appeared first on Onextrapixel
Create Text in Three.js with Three-bmfont-text
10.10.2019
A short tutorial on how to create animated text in Three.js with three-bmfont-text and give it a nice look using shaders.
Create Text in Three.js with Three-bmfont-text was written by Mario Carrillo and published on Codrops
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...
Developing a robust font loading strategy for CSS-Tricks
10.7.2019
Zach Leatherman worked closely with Chris to figure out the font loading strategy for this very website you're reading. Zach walks us through the design in this write-up and shares techniques that can be applied to other projects.
Spoiler alert: Font loading is a complex and important part of...
15 Best Number Fonts for Displaying Numbers
20.6.2019
Website typography has multiple different aspects; displaying numbers on the screen is among the most important ones. There are many use cases when you might want to focus on...
The post 15 Best Number Fonts for Displaying Numbers appeared first on Onextrapixel
Google Fonts is Adding font-display
14.5.2019
Google announced at I/O that their font service will now support the font-display property which resolves a number of web performance issues. If you're hearing cries of joy, that's probably Chris as he punches the air in celebration. … Read article
The post Google Fonts is Adding...
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...
Colorful Typographic Experiments
21.2.2019
There have been some interesting, boundary-pushing typography-related experiments lately. I was trying to think of a joke like "somethings in the descenders" but I just can't find something that will stand on its own leg without being easy to counter.
Codrin Pavel created a fascinating multi-color...
Fighting FOIT and FOUT Together
19.12.2018
Lots from Divya with the setup:
There are 2 kinds of problems that can arise when using webfonts; Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT) ... If we were to compare them, FOUT is of course the lesser of the two evils
If you wanna fight FOIT, the easiest tool is...
Google Fonts and font-display
19.12.2018
The font-display descriptor in @font-face blocks is really great. It goes a long way, all by itself, for improving the perceived performance of web font loading. Loading web fonts is tricky stuff and having a tool like this that works as well as it does is a big deal for the web.
It's such a...
Don’t just copy the @font-face out of Google Fonts URLs
19.6.2018
I don't think this is an epidemic or anything, but I've seen it done a few times and even advocated for. This is what I mean...
You go to Google Fonts and pick a font like Open Sans, and it gives you either a <link> or an @import with a URL there in which to ready this font for usage...