Fit-to-Width Text: A New Technique
The Example Why don’t we look at the example of my new technique right away? What if I will tell you What if I will tell you how we could use how we could use registered custom properties registered custom properties (alongside container query length units and math) (alongside container query length units and math) to solve to solve fit-to-width text fit-to-width text in all latest browsers? in al
The Streamline Icon System
100,000 icons across 4 families and 24 variations. All the icons you need, in every style you love. 0:00 /1:02 1× The Streamline Icon System is based on 4 big families: Core, Flex, Sharp and Plump. Each of them with a unique and strong style, from neutral to brutal. Each family comes in 6 different variations: Line, Solid, Duo, Flat, Remix and Gradient. A total of 24 different sets to suit your br
Fluid Design with CSS Round
I feel a little conflicted about fluid type/spacing. I love how it simplifies CSS and enables truly responsive design. I always dig a massive, unapologetic heading that elegantly scales with the viewport. And, I’ve worked a lot with Utopia over the last few years — it rocks. But, I also like working to a baseline grid. The two don’t always pair well. Fluid design encourages us to define a minimum/
Typography Terms Cheat Sheet
Aperture The negative space, not completely enclosed, created within certain letters. For example, the inside of C, the two spaces in S, and the bottom of e. Typefaces with large apertures tend to be more legible than those with narrow or tight apertures. Ascender A section of certain lowercase letters that stretches above the x-height, like the stem of “b,” “d,” “k,” or “t.” See also: x-height B
“Multiplexed” Fonts Have a Cool Superpower – Frontend Masters Boost
“Multiplexed” Fonts Have a Cool Superpower May 3, 2024 Just to cut to the chase, the superpower is being able to adjust their weight (or at least one of their attributes, or as variable fonts call them, an “axis”) without changing the space they occupy. This means that interactive effect and animations can be done without worry for awkward reflow situations and performance problems. I’ll snipe the
The hidden power of typography | Microsoft Design
The science behind how design choices influence perception and behavior
5 ways to style text with CSS inspired by the Spider-verse - LogRocket Blog
Here’s a screenshot of how it should look: It looks glitchy even as a still image, but we can take it further with some CSS animation — simply add a pseudo-element hidden behind the header. The main text will remain stationary while we animate the position and opacity of the pseudo-element, creating the glitching effect: h1::before{ content: attr(data-text); position: absolute; top: 0; left: 0; co
CSS に 4 つの新しい国際化機能を導入 | Blog | Chrome for Developers
CSS テキスト モジュール レベル 4 の 4 つの新しい国際的な CSS 機能が Chrome に導入されます。この投稿では、すでにリリース済みの製品と、間もなく提供予定の製品について説明します。 Chrome 119 以降: word-break: auto-phrase での日本語のフレーズ改行。 Chrome 120 のフラグの背後: text-autospace プロパティによるスクリプト間のスペース。 開発中: text-spacing-trim プロパティを使用した中国語、日本語、韓国語（CJK）の句読点カーニング。 言語間で最小フォントサイズを統一します。 日本語のフレーズの改行: word-break: auto-phrase 日本語の読みやすさを向上させるこの機能（Chrome 119 以降） 中国語や日本語など東アジアの一部の言語では、単語を区切るためにスペースを使
Responsive type scales with composable CSS utilities
If you’ve ever attempted to create responsive type that seamlessly adapts and scales between pre-determined sizes within a type scale based on viewport or container widths, you may have wrestled with JavaScript or wrangled with CSS calculators. But with the help of calc(), clamp(), and a somewhat wonky use of CSS vars, we can simplify this process and tap into the dynamism that modern CSS affords.
Fonts In Use – Type at work in the real world.
Advertising (1830) Album Art (3527) Art/Illustration (462) Booklets/Pamphlets (2026) Books (5572) Branding/Identity (6907) Ephemera (1062) Exhibition/Installation (935) Film/Video (887) Infographics/Maps (487) Magazines/Periodicals (1641) Mobile/Tablet (766) Newspapers (255) Object/Product (958) Packaging (2043) Posters/Flyers (4846) Signs (1851) Software/Apps (285) Web (4689) Acumin (54) Adobe Ca
Shuffling Typography Animation | Codrops
A shuffling type animation with various effects for a geeky terminal look. The other day, I stumbled upon a captivating type animation created by Andreas Gysin. I was immediately inspired and decided to experiment with similar effects. You can witness the brilliance of Andreas’ animation on his project site LCD 1 and also on his website. This totally geeky effect looks like some terminal applicati
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Better text wrapping using text-wrap
https://99designs.com/blog/tips/typography-design/
Retrofitting fluid typography
Game Font Forensics
The World’s Writing Systems
Why should type be fluid, anyway?
Can you create beautiful stroked text in CSS? - LogRocket Blog
DJR
Bringing Letters to Life: Coding a Kinetic SVG Typography Animation | Codrops