Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

text always has weird extra space above capitals and below the baseline. one-line CSS fix: `text-box: trim-both cap alphabetic;` Perfectly trims the text box to the actual glyph bounds. No more padding hacks.

zenith

1,429 subscribers

73,955 views • 5 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

✂️ Achieve optical balance with CSS text-box-trim → Chrome 133 lets you tailor the space above and below text, giving developers and designers more control over text layout and appearance.

✂️ Achieve optical balance with CSS text-box-trim → Chrome 133 lets you tailor the space above and below text, giving developers and designers more control over text layout and appearance.

Chrome for Developers

124,757 views • 1 year ago

I’m trying out two different styles for object descriptions. 🔹 Left: black box, Disco Elysium style 🔹 Right: clean text, line animation Which one feels better for the game’s atmosphere? 🔍

I’m trying out two different styles for object descriptions. 🔹 Left: black box, Disco Elysium style 🔹 Right: clean text, line animation Which one feels better for the game’s atmosphere? 🔍

Marw

37,574 views • 1 year ago

One line of CSS. Perfectly responsive typography on every screen. font-size: clamp(1rem, 1vw, 1.75rem); 🪄 1rem minimum keeps text readable on phones 🪄 1vw makes it scale fluidly with the viewport 🪄 1.75rem caps it elegantly on large displays No media queries or breakpoints. Try it!

One line of CSS. Perfectly responsive typography on every screen. font-size: clamp(1rem, 1vw, 1.75rem); 🪄 1rem minimum keeps text readable on phones 🪄 1vw makes it scale fluidly with the viewport 🪄 1.75rem caps it elegantly on large displays No media queries or breakpoints. Try it!

Kyrylo Silin

193,045 views • 3 months ago

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉

Seems like a good opportunity to share a trick I used on the React Aria website to make headings scale to fit the viewport on mobile, even with SSR. I used fontkit, a library I wrote 10 years ago to parse fonts and layout glyphs, to measure the width of the heading at build time in the "em" unit. width = font.layout('DateRangePicker').advanceWidth / font.unitsPerEm This is a size independent measurement using the font's internal metrics. When multiplied by any font size, you get the pixel width of the text. To calculate the font size, set this as a CSS variable and divide the target width (100vw minus padding). Clamp to make sure it doesn't get too big or small. font-size: clamp(35px, (100vw - 32px) / var(--text-width), 55px) And tada! You have perfectly scaling text no matter the viewport size. 🎉

Devon Govett

48,276 views • 5 months ago

Save this for the next time your typography feels weird and you can’t explain why. Nine times out of ten, it’s line-height - the vertical space between lines of text that decides whether type feels confident or clumsy, readable or tiring. Headlines Compress them. ~1.05–1.25 is usually right. Headlines aren’t meant to be read carefully line by line. They’re meant to land as a shape. Tighter leading pulls words into a single visual block and makes the headline feel confident and intentional. One hard rule: ascenders and descenders should never touch. If your t’s and l’s are colliding with g’s and y’s, you’ve gone too far. Body text Do the opposite. Give it air. ~1.4–1.7, depending on the typeface, its x-height, and the line length. Body text is about endurance. Your reader shouldn’t notice the typography at all. If they’re aware of the type, something’s off. The goal is that they just keep going, paragraph after paragraph, without friction. In Framer, you can find the Line-height settings in the Text Panel > Line. And yes, this applies even if you’re using the same font for headlines and body text! Same font, same page, but they have completely different jobs - and different line height. Sometimes, choosing a good type isn’t enough - you need to know how much space to give letters so they can do their work.

Save this for the next time your typography feels weird and you can’t explain why. Nine times out of ten, it’s line-height - the vertical space between lines of text that decides whether type feels confident or clumsy, readable or tiring. Headlines Compress them. ~1.05–1.25 is usually right. Headlines aren’t meant to be read carefully line by line. They’re meant to land as a shape. Tighter leading pulls words into a single visual block and makes the headline feel confident and intentional. One hard rule: ascenders and descenders should never touch. If your t’s and l’s are colliding with g’s and y’s, you’ve gone too far. Body text Do the opposite. Give it air. ~1.4–1.7, depending on the typeface, its x-height, and the line length. Body text is about endurance. Your reader shouldn’t notice the typography at all. If they’re aware of the type, something’s off. The goal is that they just keep going, paragraph after paragraph, without friction. In Framer, you can find the Line-height settings in the Text Panel > Line. And yes, this applies even if you’re using the same font for headlines and body text! Same font, same page, but they have completely different jobs - and different line height. Sometimes, choosing a good type isn’t enough - you need to know how much space to give letters so they can do their work.

charlota

21,862 views • 6 months ago

I just cloned myself using OpenAI and every text message I sent since I was 12. I fine-tuned gpt-4o-mini on 150,000 of my text messages. The first model ended up being so unhinged that I could not release it publicly (or risk being cancelled forever). So I had to train another one, on almost all my text messages. And this one you can try for yourself in the thread below

I just cloned myself using OpenAI and every text message I sent since I was 12. I fine-tuned gpt-4o-mini on 150,000 of my text messages. The first model ended up being so unhinged that I could not release it publicly (or risk being cancelled forever). So I had to train another one, on almost all my text messages. And this one you can try for yourself in the thread below

Ali Shobeiri

61,998 views • 1 year ago

In the Codex app, you can move chats in and out of projects, reference another chat with `@` or drag it into the text box, and ask one chat to message another on your behalf. Including telling it that pineapple doesn’t belong on pizza. 🍍 ChatGPT OpenAI Developers

In the Codex app, you can move chats in and out of projects, reference another chat with `@` or drag it into the text box, and ask one chat to message another on your behalf. Including telling it that pineapple doesn’t belong on pizza. 🍍 ChatGPT OpenAI Developers

Gabriel Chua

247,354 views • 12 days ago

Font morphing [orbit] Last month I spent a lot of time creating sphere projections. I wanted to take this further by extending UILabel and mapping each glyph, making it possible for letters to spin in space. Love this as a metaphor for the text 'thinking'.

Font morphing [orbit] Last month I spent a lot of time creating sphere projections. I wanted to take this further by extending UILabel and mapping each glyph, making it possible for letters to spin in space. Love this as a metaphor for the text 'thinking'.

Kristian Wagner

60,933 views • 1 year ago

07.03.2026🇫🇷FC Nantes - Angers SCO, FC Nantes ultras entered the press box to hand out caricatures of Kita and Al-Khelaifi, and also threw them down into the presidential box below, click here for more: All in one place. Tap to download. 🔗

07.03.2026🇫🇷FC Nantes - Angers SCO, FC Nantes ultras entered the press box to hand out caricatures of Kita and Al-Khelaifi, and also threw them down into the presidential box below, click here for more: All in one place. Tap to download. 🔗

Hooligans.cz Official

32,042 views • 5 months ago

Um WHAT THE FUCK…? So the first thing Victor Marx does when he realizes that Charlie Kirk is dead, is text Erika Kirk — “No one is going to kill you. You’re safe, you and the kids. They just wanted Charlie.” What the ACTUAL fuck did I just hear…????

Um WHAT THE FUCK…? So the first thing Victor Marx does when he realizes that Charlie Kirk is dead, is text Erika Kirk — “No one is going to kill you. You’re safe, you and the kids. They just wanted Charlie.” What the ACTUAL fuck did I just hear…????

Kay Su

2,576,607 views • 3 months ago

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️

This one line of CSS will fix the annoying layout shift that scrollbars cause. This happens when a non-scrollable container becomes scrollable due to its content. This gets rid of that problem: .container { scrollbar-gutter: stable; } With that, space is reserved for the scrollbar before it even appears. So there's no layout shifts when content grows. Use both-edges if your content is centered. It mirrors the reserved space on both sides of the container to keep the layout balanced. If you found this one useful, follow for more. ❤️

Ali

66,222 views • 3 months ago

Voicenotes Dictation is now live on iOS. You can now use the Voicenotes keyboard to speak into any app with a text box - Messages, emails, notes, comments, basically anywhere you’d normally type. Just speak, and your words appear instantly. Update Voicenotes from the App Store to try it.

Voicenotes Dictation is now live on iOS. You can now use the Voicenotes keyboard to speak into any app with a text box - Messages, emails, notes, comments, basically anywhere you’d normally type. Just speak, and your words appear instantly. Update Voicenotes from the App Store to try it.

Voicenotes

33,876 views • 2 months ago

Someone got tired of paying for Higgsfield and built the free version instead. Its called Open Generative AI → Packs 200+ models into one self-hosted interface. →Text to image, text to video, image to image → Cinema mode with actual camera controls → Your files never leave your machine Getting 200+ models talking to each other under one roof isn't a two-minute setup, but once it's running there's no subscription left to cancel. 100% Open-source.

Someone got tired of paying for Higgsfield and built the free version instead. Its called Open Generative AI → Packs 200+ models into one self-hosted interface. →Text to image, text to video, image to image → Cinema mode with actual camera controls → Your files never leave your machine Getting 200+ models talking to each other under one roof isn't a two-minute setup, but once it's running there's no subscription left to cancel. 100% Open-source.

Oliver Prompts

13,022 views • 1 month ago

004/100 Buttons. A bit of the process on building an animation. When looking at a finished animation or in this example a finished button, it can look quite complex inside the CSS. But when building it, it’s more like a lot of simple steps, one after another. Here I had the idea to make some kind of text animation like the footer logo on the Osmo site. I try to add the base animation with no complex easing, for example transition: translate 0.4s ease. Starting with just moving the one text from bottom to top and the other text to top. Adding a stagger, play around with it. Searching for a way to make it more circular. On the research I found the sin() function inside CSS which can build a more smooth non linear curve for the stagger which creates this circular effect. And step by step adding more complexity like, different easing for hover/hover-out, opacity, 3D transform and more. I use also the sin() function to rotate the letters, so the middle ones are getting more rotated than the outer ones. Another thing which helps is to add a small delay on hover, for example 0.05s or 0.1s, you don’t really see the difference, but when you hover pretty fast on and out it doesn’t get that jumpy. I’m using here GSAP’s SplitText to split every char into spans. And then I’m adding a CSS index variable to every span, starting from the center. SplitText can provide CSS index variables, but you cannot tell it from which direction. For the sin() it’s also important to have a max length, so I add another CSS variable with the max char number on it. Crafting 100 Buttons with Osmo ⏳ Total time: 63h

Eduard Bodak

166,023 views • 3 months ago

Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)

Who said range sliders need to be straight and boring?! Hey CSS, distort the line! 〰️ Another funny demo powered by border-shape, scroll-driven animations, and more The HTML code? Only an input element (no extra code is needed)

CSS by T. Afif

32,241 views • 2 months ago

Okay this is really cool. Codex app has a new feature that is really useful. Highlight any text, and you'll notice a new popup. "More Details" uses GPT 5.5 Instant to explain in more detail about the highlighted portion of your text, allowing you to understand the reasoning/concept/statement/etc in greater detail. What's interesting about this versus a side chat is that it's instantaneous, and still retains context from the thread. With /side chat, you'd have to type out a prompt "what are the details on this?" With "more details" the prompt is implicit and the response is instantenous Very nice feature, as I'm always making side chats/branches to expand/learn/understand agent outputs better.

Okay this is really cool. Codex app has a new feature that is really useful. Highlight any text, and you'll notice a new popup. "More Details" uses GPT 5.5 Instant to explain in more detail about the highlighted portion of your text, allowing you to understand the reasoning/concept/statement/etc in greater detail. What's interesting about this versus a side chat is that it's instantaneous, and still retains context from the thread. With /side chat, you'd have to type out a prompt "what are the details on this?" With "more details" the prompt is implicit and the response is instantenous Very nice feature, as I'm always making side chats/branches to expand/learn/understand agent outputs better.

am.will

38,454 views • 1 month ago