CSS Font Guides
Understanding font-family, font-size and more. Please leave a comment if you find any posts here helpful. These guides also include tips on loading fonts and handling fonts in general.
This is a collection of top and trending guides written by the community on subjects related to CSS Font concepts. For all things CSS, check out the CSS tag! Please contribute more posts like this to help your fellow developer in need.
Using CSS viewport units (vw, vh ...) for font sizes can be tricky
In this example, a font-size is defined on the document's root using
vw, and all the other elements useremas their length unit, which basically translates as "use the font-size defined for<html>to determine the size of x". As such, the dimensions of most elements on the page are directly connected to thefont-sizeof<html>.
Add custom icons to Font Awesome
In one of my recent projects I used Font Awesome as icon set but I needed to add a new icon not included in the standard Font Awesome's library, the DuckDuckGo logo 🦆
How to add custom font file to your React App?
In this case, I will download Airbnb Cereal App font from this website: Airbnb Cereal App Font.
Use Font Awesome to Change The Mouse Cursor
I find it very easy to use icons from Font Awesome for the cursor. You can download the icons as SVG and then all you need to do is to specify a height and a width (e.g. 20x20) and remove the unnecessary attributes:
Your Buttons Get Wider on Hover Because You Change Their Font Weight? Here's How to Solve This.
So, A while ago, I've had to implement a design that called for buttons that change their
font-weighton hover. Now here's the problem with this:
Scaling sizes (e.g., font size) with the browser width or height
If one of the dimensions of an object should scale linearly with the viewport width (or height), e.g. scaling the font size from 12px at 375w to 24px at 1280w, the interpolated size can be calculated using the slope-intercept line equation (
y = mx + b) whereyis the resulting size (in pixels),xis set to100vw(orvh) andbis measured inpx.
The Icon evolution and "How I switched from Font based Icons to SVG"
Last week, we made the decision to migrate from our font-based icon set to feather icons - an SVG based font set. Since I've been using font based Icons like forever and had to read a bit about icons in general, I'm going to share what I learned with you. So please join me on a journey into...
What CSS font-size units do you prefer to use?
There are several different ways you can declare the size of a font in CSS. The units fall into one of two categories - absolute and relative.
Importing custom font in HTML and CSS
Adding a unique font to your website is a great way to make your design stand out online.
Relative Font Size in CSS
One of the biggest confusions in web design is caused by none other than the font-size property.
The most commonly used font sizes are the pixel(px), em and rem.
How to Fix Font Awesome Icons Flashing Wrong Size in Gatsby
Recently, I was working on a project with Font Awesome and Gatsby. I noticed that every time the page loaded after publishing the site, the icons would render huge for a split second. In my pre-React days, I remembered running into this annoying problem with Bootstrap 3 and Glyphicons. In that case, I knew it happened because I was importing the styles for the Glyphicons in the wrong order but wasn't sure how to fix that problem using React and Gatsby.
Web-Safe Fonts and Font Fallbacks
Today, I had a colleague mention that the font we are using is “web-safe” in response to why it was so weird that it wasn’t showing up correctly on my screen.
Adding Custom Font Classes to TailwindCSS
In Tailwind, we have a set of classes that allow us to change our font family, such as
font-sans,font-serif, andfont-mono. But what if we want to use a font that Tailwind doesn't have built in?
User-friendly way to set your CSS font size
Today I learned that from the perspective of accessibility, it's bad practice to hardcode a root font size in your application in pixels 🙈
Variable Font Animation
Introduction to Google Variable fonts with some GSAP animation sprinkled in to animate letters to and from low/high font-weights. Shoutout to @jh3y for making me aware of variable fonts.
Kentico CMS Quick Tip: Using Font Awesome Icons for Custom Page Types
We want to give our Content Management team the ability to quickly identify the Custom Page Types we create for them, both in the Content Tree and when creating new Pages, using the huge Font Awesome 5 font icons set, integrated into Kentico Xperience.
CSS Houdini Worklets, Paint API and Font Metrics API
The Font Metrics API is still in a very early stage of development, so its specification may change in the future. In its current draft, Font Metrics API will provide methods for measuring dimensions of text elements that are being rendered on screen in order to allow developers to affect how text elements are being rendered on screen. These values are either difficult or impossible to measure with current features, so this API will allow developers to create text and font-related CSS features more easily. Multi-line dynamic text truncation is an example of one of those features.
CSS Smooth Font Edges
I thought this would be a great exercise to try and use CSS to smooth font edges.
CSS Font Face
Note: Before reading this article, you need to know about CSS Font Family. I assume you know about the CSS font family.
Get that hundo 💯 (Part 1) - Handling unused font-awesome css styles
Today we will be taking a look at how we can improve our lighthouse score by taking care of unused CSS issue that was caused by font-awesome, according to how it worked for me at least. So the story of how I decided to go through this topic goes like this, I just threw some stuff like font-awesome and some styles to the landing page without considering performance at first and see how that can affect my lighthouse score. Note that I have only written a few lines of Javascript to handle some smooth scrolling at this time, but lo and behold the performance score is in the gutters.
em vs rem in CSS Font Size
If you inspect the headings in dev tools, switch to computed tab, the outer heading has font size 90px and the inner has 60.
Would you use Google Fonts or a strong font stack?
My company's website uses Google Fonts to serve our sans-serif (Open Sans) — which is used for most of our headings. A while ago, we noticed that the bold face was loading really slowly, creating a laggy effect whenever a page was loaded. (The font would appear regular and then change to bold after a moment). We decided that the bold was too slow, so we removed the bold from our Google Fonts. We also don't include the italics or light. This means that we have very little creative freedom in designing the site.
Emoji Bug in Heading Tags or Wherever The Emoji Has 500+ Font Weight 🤔
Have you realized it? This started 2/3 weeks ago when I created a landing page for my app. I noticed that the emoji on my landing page suddenly turned black and white. I searched for a solution for several hours and realized that the emojis in the [p] tags are still the same but the heading [h1], [h2], [h3] tags and tags that have a font-weight class that has a value of 500 and above will create emojis are black and white.
Tailwind CSS Numeric font variants
It's called the
font-variant-numberproperty, and it is used to distinguish how a particular font should render specific numeric values.
Experimental Solution For "Container Query" Font Sizing
What we really want is to have a smaller font-size when a container is narrow, which may or may not mean the viewport is narrow.
Use font-relative units for font sizes
We will talk more about the font readability and contrast in the next few posts... but before that, let's see something in the same line as the previous publications: how developers can make CSS work better for the end-users' needs.
Should we set a default font-size? Ideals and practicalities
Recently I had quite a productive conversation about default font sizes in browsers in a PR comment section. I thought I would preserve the outcome here for later reference.
CSS 101 - Font and text
The font-size can be represent in different measurement unit:
Learn web development 02 - HTML Font tags
In today's article, you'll learn about font tags in HTML. Earlier, We discussed about HTML, and programming languages. So, if you want, you can to checkout that article first.
9 Beautiful Cool Text Effects using Google font Effects👌
Looking to style your headers or text in a more decorative way? Then you are in right place. We all use google fonts in our daily projects but did you ever notice google font is more than just that. Google fonts provide a font effect feature that is less popular & can help you in generating stylish text for your projects.
How To Finally Figuring-out the Font Size for Titles
Using heading sizes based on the body maintains a visually appealing flow on your website. Instead of handpicking font sizes, we can take a base size and multiplicate it by a number - the size ratio - to obtain a bigger size, and so on. Every font size will scale when the main font size changes.
Relative Font Weights Considered Harmful
The real harm is that you can very easily conceal the semantics conveyed by
font-weightdepending on the font that's rendered, which is not always in your control. This all depends on how you define the base weight to which your relative values refer, and (1) whether that base weight is actually available in the rendered font and (2) which value is substituted if it isn't.
Happy CSS Font coding!
(adsbygoogle = window.adsbygoogle || []).push({});
