CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor
Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 最近のやり方としてはvw, calc()を使用したフォントサイズの定義などがありますが、clamp()を使用するとかなり簡単です。最小値と最大値を決め、その間の変化の度合いも変更でき、もちろん日本語フォントのfont-sizeでも大丈夫です。 Modern Fluid Typography Editor Modern Fluid Typography Editor -GitHub Modern Flu
Are you using ztext and happy with it? Your kind support keeps open-source JS libraries like this free for others. InitializationThere are multiple ways to use ztext. Pick whichever method is easiest for you. HTML attributesVanilla JavaScriptReact JS NewVue JS New How it worksZtext gives the illusion of volume by creating layers from an HTML element. There's no need to spend hours fiddling with <c
clamp(1.5rem, 2vw + 1rem, 2.25rem); clamp(1.5rem, 2vw + 1rem, 2.25rem); Copy link https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=24&fluidSize=2&relativeSize=1&maxSize=36
Web、タイポグラフィ、「伝える」ということ。「OnScreen Typography Day 2019」を振り返る - デザイン情報サイト[JDN]
6月9日、“オンスクリーン”におけるタイポグラフィについて、7人の登壇者たちがそれぞれの考えを発表したイベント「OnScreen Typography Day 2019」が渋谷Abema Towersにて開催されました。中心となったのは、日本デザインセンターのクリエイティブディレクター／デザイナーの関口裕さんと、POLAAR代表を務めるコンセプター／デザイナーのカワセタケヒロさんの2人。当日は、なにか答えを提示するようなセミナーでもなければ、Tipsを紹介するレクチャーでもない、 “オンスクリーン”という言葉をめぐって、さまざまな考えが交わされる1日となりました。 7月終わりの某所、ふたたびイベントに登壇した7人が集まりました。なぜ、オンスクリーンについて語り合うイベントを実施したのか。そして、そもそも“オンスクリーン”とはどういう意味なのか。主催の2人が感じていた、Webにおけるタイポグ
![Web、タイポグラフィ、「伝える」ということ。「OnScreen Typography Day 2019」を振り返る - デザイン情報サイト[JDN]](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa3054481ff9502044a2aba7c71c853574be1724/height=288;version=1;width=512/https%3A%2F%2Fwww.japandesign.ne.jp%2Fwp%2Fwp-content%2Fuploads%2F2019%2F09%2F190730_JDN-0365R-1.jpg)
ピクセルへの愛を確かめろ！ ガジェットDITOOとゲームフォント本Arcade Game Typography いつも机の上にピクセルを 最初にDivoomの製品を意識したのは香港の警察宿舎の建物を改築したアート施設PMQの「ご当地メーカー品コーナー」だった。「TIME BOX」という8ビットコンピューター時代のピクセル画を表示できるデジタルガジェットや「TIVOO」というテレビ型ガジェットで、日本でも話題になったのでご存じの方も多いでしょう。 同社の公式サイトを見ると「9%の愛、17%の美、13%のファッション、5%の狂気、17%のパワー、8%の土壇場のゴール（！）、6%のアドレナリン、25%のハートとソウル」が、すなわちDivoomだと書かれている。いまデジタルの世界を楽しくしてくれている会社の１つだが、今回、発売した「DITOO」は、そのものコンピューター心をくすぐってくれる製品だ。
In recent months, I couldn’t help but notice how many people (and companies) when referring to “design tokens” what they actually mean is colors, typography, spacing (and in some cases elevation, timing, and sizing). While this is perfectly true, I think a key part of the picture is missing: design tokens can be much more than this. As Sarah Federman puts it perfectly: In this post, I share my poi
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Fluid typography is the idea that font-size (and perhaps other attributes of type, like line-height) change depending on the screen size (or perhaps container queries if we had them). The core trickery comes from viewport units. You can literally set type in viewport units (e.g. font-size: 4
Modern Fluid Typography Using CSS Clamp — Smashing Magazine
In this article, we’ll explore fluid typography principles, use-cases, best practices, implementation with CSS clamp function and how to calculate the right parameters. We’ll also learn how to address some accessibility concerns and watch out for one important issue that we cannot fix as of yet, but have to be aware of regardless. The concept of fluid typography in web development has been present
Home / Articles / The State of Fluid Web Typography Matej Latin ~ 11 min read Fluid typography gives us so many opportunities to better design the reading experiences on the web but, at the same time, it introduces problems of font sizes scaling uncontrollably and potential accessibility issues. Is fluid web typography ready to be used? Please note that this article uses animated gifs to illustrat
SVG VAE: Generating Scalable Vector Graphics Typography
SVG VAE: Generating Scalable Vector Graphics Typography Oct 15, 2019 Rapha Gontijo Lopes irapha iraphas13 SVG-VAE is a new generative model for scalable vector graphics (SVGs). With it, artists and designers have the power of machine learning at their fingertips to create new styles of fonts, intuitively manipulate character attributes, and even transfer styles between characters. SVG-VAE outputs
Home / Articles / 5 Keys to Accessible Web Typography Matej Latin ~ 14 min read I wrote about fluid web typography in last month’s blog post and I realised that a lot of the popular implementation techniques come with accessibility issues. So I wanted to go back and revisit the basics and the best practices of accessible web typography. I think it’s safe to claim that a large part of website acces
Ed Benguiat, a Master of Typography, Is Dead at 92 (Published 2020)
The graphic designer Ed Benguiat in an undated photo. “The most beautiful thing in the world,” he once said, “is a blank piece of paper.”Credit...Milton Glaser Design Study Center and Archives/Visual Arts Foundation Ed Benguiat, a celebrated graphic designer known for his expertise in typefaces — including the one you see at the top of the print and web editions of this newspaper — started his des
日本の空港、駅、行政機関などの公共施設や観光関連施設などで見かける不自然な英文表示や分かりづらいサインデザイン。 英語情報だけが頼りの人の目線で今の日本を歩き回ると、とても困ることに気づきます。たとえば「STOP! 歩きタバコ」のような一部だけが英語の表示は、何を STOP しろと言われているのか読み手には伝わりません。また、一般の人には分かりにくい特殊な略語が使われているサイン、文字を左右から極端に縮小して非常に読みづらくなっているサインも増え続けています。 訪日外国人が3000万人を超え、オリンピック・パラリンピック開催を控えた現在、きちんと伝わる英文案内・表示（英文サイン）の整備がされなければ、将来のインバウンド需要は先細りになることは明らかです。 本書は、欧文書体デザインと英文翻訳の専門家がそれぞれの視点から日本の英文表示の問題点を提起し、コンパクトでも伝わりやすい英文とその見せ方
Intrinsic Typography is the Future of Styling Text on the Web | CSS-Tricks
Intrinsic Typography is the Future of Styling Text on the Web The way we style text hasn’t changed much over the years. There have been numerous advancements to help make things more flexible, like layouts, but in terms of styling, most finite aspects of our designs, like text, remain relatively unchanged. This is especially true of text styling. We write code to style text explicitly for every po
Use advanced typography with local fonts | Capabilities | Chrome for Developers
Web safe fonts If you have been doing web development long enough, you may remember the so-called web safe fonts. These fonts are known to be available on nearly all instances of the most used operating systems (namely Windows, macOS, the most common Linux distributions, Android, and iOS). In the early 2000s, Microsoft even spearheaded an initiative called TrueType core fonts for the Web that prov
1Tel Aviv University, 2Goldsmiths University, 3Reichman University *Denotes equal contribution SIGGRAPH 2023 - Honorable Mention Award A few examples of our Word-As-Image illustrations in various fonts and for different textual concept. The semantically adjusted letters are created completely automatically using our method, and can then be used for further creative design as we illustrate here. A
Micro-Typography: How To Space And Kern Punctuation Marks And Other Symbols — Smashing Magazine
For hundreds of years, we have been using white space in typography. Today, in 2020, how do we add spacing to punctuation marks and other symbols, and how do we adjust the space on the left and right side in an easy and consistent way? It is actually not as easy and quick as it should be. This article is for anyone who works with typography, in any medium, and it is especially for those designers
プロンプトを元に動く文字ロゴを生成するプロジェクト「Dynamic Typography」が、香港科技大学とテルアビブ大学の研究者らにより公開されました。 🪄 animate your word! https://animate-your-word.github.io/demo/ 生成される文字ロゴはこんな感じ。 以下は「カップルが手をつないで歩いており、女の子が男の子の後ろを歩いている」というプロンプトで作成された文字。 「2人がキスをし、1人が手でもう1人のあごを押さえる」 「発砲する2人の兵士」 「砂漠をしっかり歩くラクダ」 「望遠鏡を持つ手をカメラに向ける」 「騎士が剣を抜いて前方に向け、戦いの準備をしている」 「蝶が横向きに飛んで羽をばたつかせる」 「危険な怪物が口を開き、誰かを飲み込もうとしている」 香港科技大学のリュウ・ジチェン氏らは「テキストアニメーションは感情を呼び起こ
Googleフォントを使ったテキストのみのシンプルなロゴを作成、SVGやPNGでダウンロードできる・「Typography Logo Maker」
Typography Logo MakerはGoogleフォントを使ったテキストのみのシンプルなロゴを作成、SVGやPNGでダウンロードできるWebアプリです。 Googleフォントを使ってタイポグラフィロゴを作るならわざわざWebアプリを使わなくても良いっちゃ良いんですけど、使ってみたら割と需要もあるのかなと感じました。 ブラウザで手軽に作れて良い気がします。フォント検索はキーワード検索式になっているので任意のキーワードで検索してください。ユーザー登録、ログイン、メールアドレス等は不要、透かしも入らず無料で利用できます。 Typography Logo Maker
Container Query Units and Fluid Typography | Modern CSS Solutions
Container Query Units and Fluid Typography Updated on: Jun 4, 2023 Written by Stephanie Eckles Fluid typography is the term for designing font-size rules that responsively adapt the size based on the amount of available inline space. Before the availability of container query units, techniques usually relied on the viewport width - vw - unit. The viewport method is excellent for main page type, su
iOSのSystem Fontは、英文はSF Pro、和文はヒラギノ角ゴシックです。 SF Proは、2015年のWWDCで発表されたAppleの製品向けの欧文フォントです。 AppleのWebサイトではSF Pro JPなる、SF Proの日本語フォントが使用されているようですが、現在開発者サイトから配布されているSF Proに日本語は含まれておらず、iOSのSystem Fontにも使われておりません（2022/03/06現在）。 SF Proに比べてヒラギノはおよそ1pt小さいSF Proとヒラギノ角ゴシックは大きさの印象が異なるため、iOSのSystem FontではSF Proに対してヒラギノ角ゴの方が小さく表示されるように調整されています。フォントサイズが大きくなればなるほど差が大きくなります。フォントサイズ16ptのとき、ヒラギノ角ゴの方がおよそ1pt小さく表示されると覚えて
文字がカッコよく動き回るページデモ「Repetitive Typography Animation」:phpspot開発日誌
Repetitive Typography Animation - Codrops 文字がカッコよく動き回るページデモ「Repetitive Typography Animation」 文字を動かすだけでもこれだけカッコよくできるということで色々応用してみても面白そうです
Bringing the user into the design process has been an exciting time for users, designers and developers. Users can land on your experience and seamlessly begin consuming content, their preferences richly integrated into the design result. This blog post explores using CSS media queries with a variable font to tailor the reading experience even further. Font grade and weight can be customized with
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ページを開く
ztext.js | 3D Typography for the Web
Modern fluid typography editor
ピクセルへの愛を確かめろ！ ガジェットDITOOとゲームフォント本Arcade Game Typography
Design Tokens beyond colors, typography, and spacing.
Simplified Fluid Typography | CSS-Tricks
The State of Fluid Web Typography
5 Keys to Accessible Web Typography
［Typography Books］英文サインのデザイン 利用者に伝わりやすい英文表示とは？
Word-As-Image for Semantic Typography
テキストをアニメーション化して生成するプロジェクト「Dynamic Typography」が誕生
UIデザイナーに必要なiOSのTypographyの知識｜よつくら
Adapting typography to user preferences with CSS
Shuffling Typography Animation | Codrops