An end to typographic widows on the web
Currently shipping in Chrome Canary, and thus soon to be in Blink-based browsers including Edge, is a relatively new CSS declaration which promises to virtually end typographic widows. The text-wrap:balance declaration in CSS Text Module Level 4 says that line breaks should be chosen to balance out the line lengths in a block of text. How exactly that is done is ’UA-defined’, in other words it’s d
縦書きHTMLにおける文字の向きはどのように定まるか - ドワンゴ教育サービス開発者ブログ
ドワンゴ教育事業Webフロントエンドチームの berlysia です*1。 はじめに この記事では、日本語の縦書きHTMLにおいて、「ある1文字が縦組みのなかで違和感なく縦書きとして表示される」とはどのように成り立っているのか、意図しない表記になりやすい文字とその理由について紹介します。 最後まで読むと、縦書き時の文字の縦横に関する問題をたちどころに分解できるようになるはずです。とりあえずフォントのせいだろうかと疑う日々には、これでおさらばしましょう*2。 はじめに N予備校における日本語縦書きHTML CSS の関連仕様 日本語の一般的な縦書きに設定する うまくいかないことが起こりやすい文字たち うまくいかない文字がうまくいかない理由を理解する 縦書きを考慮した文字の周りの方向の定義 CSS における縦書きでの文字の縦横 upright typesetting sideways type
Readability: The Optimal Line Length – Articles – Baymard Institute
Key Takeaways The optimal line length for body text is 50–75 characters Shorter or longer line lengths can hurt readability Our large-scale testing reveals that text line length often makes product or service descriptions unnecessarily difficult for users to read Having the right amount of characters on each line is key to the readability of your text. Indeed, our Premium UX research and large-sca
Fluid Type Scale - Generate responsive font-size variables
Minimum (Mobile)At this minimum viewport width, all font sizes in your type scale are computed as the base font size times a power of your chosen ratio. Base font size (px)Screen width (px)Type scale ratioMinor secondMajor secondMinor thirdMajor thirdPerfect fourthAugmented fourthPerfect fifthGolden ratio Maximum (Desktop)At this maximum viewport width, all font sizes in your type scale are comput
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
Your Body Text Is Too Small
Body text is the key component in communicating the main bulk of a message or story, and it’s probably the most important element on a website, even if people sometimes read just the headlines. Why would we limit the effectiveness of body text by minimizing its size to a browser-default that’s now over 20 years old, even on large displays? What’s Too Small?The majority of websites are still anywhe
ほぼ二字コラム: エンブレム最終4候補を書体でみてみる ● type.center
東京2020大会エンブレム最終候補4作品が4月8日に発表されて、25日に最終決定されるとか。前にも書いたようにエンブレムそのものはもちろん、それに伴って開発されるオリジナル書体もホントは注目していきたいところ。最終候補に使われている書体はどんなもんなんでしょうか。軽く調べてみました。 東京2020大会エンブレムデザイン募集のご案内(募集要項)（PDF）によると、「ワードマーク等について」という項目があります。アレ「ワードマーク」って言うんですね。以下に内容を引用します。 ワードマーク等について ワードマーク（②）はすべて大文字で「TOKYO 2020」としてください。オリンピック・パラリンピックともに同じ書体とし、既存の書体ではなくオリジナルの書体を開発してください。なお、応募段階では汎用の書体の使用も認めますが、最終的にはオリジナルの書体が必要なため、採用にあたっては修正をお願いすること
イベントレポート: 「文ッ字 －いつもの文字もちょッと違ッて見えるかも－」字事鼎談 その２「文ッ字渦 ～文字の想像と創造～」レポート！！ ● type.center
塚田：type.centerは、文字に関するサイトとして、主にデザイン関連を中心に扱っていますが、そこに捉われすぎず「文字」にまつわるカルチャーも含めたものについての情報を載せていきたいと思っていて、その一つが文学の領域でした。文字と文学っていう言葉は字面も似ているよねということから、「文字文学」というコーナーでは青空文庫から「文字」をキーワードに集めた小説などをまとめています。その中には当然中島敦の『文字禍』もあって、『文字文学』として一冊にまとめた収録作品のトリにもってきました。 そんな中、円城さんの『文字渦』連載が始まり、まずはそのタイトルに強く反応したのと、連載が進むにつれて、ルビがえらいことになっているとか、組版がすごいっていう風に話題になって、一読者として非常に楽しませていただきました。ファンである円城さんの、しかも「文字」をテーマにした本なのだから、ぜひ装丁したい！ と思った
Typography for Developers | CSS-Tricks
Taimur Abdaal leads design at Retool, a fast way to build internal tools. They’re working on a new design system for their platform, to let anyone easily build beautiful custom apps. Typography will be a huge part of this and Taimur wrote this based on that experience. You may have read the title for this post and thought, “Why on earth does a developer need to know anything about typography?” I m
CyberAgent20周年誌 ― “らしさ”を追求したブックデザインの制作秘話 ―
2018年8月末、約半年間の制作期間を経て、家族向け社内報としてサイバーエージェントの20周年記念誌が完成いたしました。 この記念誌は写真、一部の原稿以外は全て社内で制作。構成からデザイン、情報を可視化するためのイラストの数々など、計300ページを超えるこの記念誌がどういった過程を経て完成に至ったかを、装丁と誌面デザインを中心に、できるだけ詳しく解説していきますので、下記の20周年記念誌を制作するに至った経緯も含めて読み進めていただければと思います。 『家族報』の発端となったのは2017年9月に開催された“あした会議”。「ご家族のみなさまに会社のことをもっと知って欲しい、ご両親やパートナー、お子さまに会社をもっと近くに感じて欲しい」という思いから提案があり、決議されました。サイバーエージェントの20年は、様々なことに挑戦しています。この本は、“サイバーエージェントの歴史を振り返るためのもの
Why are tech companies making custom typefaces?
Why are tech companies making custom typefaces?9 min read November 9, 2018 Updated September 11, 2021 #Design #Digitaldesign More than graphic design, typography is an expression of technology, precision and good order. Typography is no longer concerned with meeting the lofty and difficult demands of art but with satisfying, formally and functionally, the everyday requirements of a craft. ― Emi
🖼 グリフを鑑賞する - みずぴー日記
技術書典に出す本のために文字について調べていたらいつのまにか、グリフを鑑賞するアプリを作っていた。柿(かき)と杮(こけら)のような見比べると楽しい文字が次々と表示される。 ✨鑑賞場所 試す: https://mzp.jp/moji/ ソースコード: https://github.com/mzp/moji/ 🖼おすすめの文字 由来が同じ文字 ギリシャ文字を元にラテン文字やキリル文字が作られた、みたいな由来により形状が似ている文字。別の文字と言うのかよくわからないが、Unicodeのコードポイントが別なので別の文字だということにした。 絵文字にもヒエログリフにもブタがいる、みたいな発見もあっておもしろい。 2000年くらいかけてブタがかわいくなった。 形が似ている漢字 柿(かき)と杮(こけら)のように形が似ている漢字。 部首や画数がそろっているせいか、Unicodeのコードポイントが連続して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Music of Type Design — I Love Typography
8 micro tips for remarkably better typography
Typography Inspiration
Modern fluid typography editor
10 Font Ideas for Designing Stunning Typography
Typetura
ATypI Hong Kong 2012「横書きかなの開発」プレゼンムービー
世界のタイプ道: アナン・シン・ナオレムさん（インド） ● type.center
