CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/
より良いタイポグラフィのための知られざるCSS
CSS組版 Vivliostyle ユーザーと開発者の集い 2020秋 https://vivliostyle.connpass.com/event/189940/
「デザインが雑すぎる...」タイポグラファーのiOS11に対する辛辣な意見 - iPhone Mania
故スティーブ・ジョブズ氏は、それまで退屈だったパーソナルコンピュータの書体に、美しいカリグラフィーを導入したことで新領域を切り開きました。ジョブズ氏によるスタンフォード大学卒業式での伝説のスピーチで語られたタイポグラフィの美学は、残念ながらiOS11ではあまり発揮されていないことが、タイポグラファーのブログポストから明らかになりました。 タイポグラフィとは？ タイポグラフィとは、文字表現を行なう際、書体、大きさ、行間などの構成を、読みやすさ、美しさなどを考慮しながら適切に整える技芸のことをいいます。 iOS10と比べてわかるiOS11デザインの首尾一貫性のなさ 上海ベースのデザイナー兼タイポグラファーのライアン・ラオ氏（@oueryan）は、ベータテスターとしてiOS11を使用していた際に発見した、数えきれないほどのデザインミスをブログポストにまとめています。 メールアプリ iOS11のメ
なぜWebブラウザの文字組みは汚いのか？元エディトリアルデザイナーが解決策を提案します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。入社以前はエディトリアルデザイナー（新聞・雑誌・書籍などの出版物のデザイナー）として書籍の装丁などもしていました。フロントエンドエンジニアのほりでーです。 今回は紙のデザインとWebデザインにある大きな違いのひとつ、「文字組みアキ量」というものについてお話しします。日本語組版のルールにも詳しく触れていくため、Webの経験しかない方も是非読んでみてくださいね！ 2017年2月27日追記：有識者の方からのご指摘を反映し、記事の内容を一部訂正いたしました。詳細な訂正内容については記事末尾をご覧ください。 今回の要点 日本語組版は約物（記号類）のアキが大事 Webブラウザの文字組がイマイチなのは、約物のアキ量が常に一定であることが原因 font-feature-settings: “halt” 1; で約物のアキをなくせるようになった jQury.yakumonoプラグインで行末約物半
欧文の読み方のメカニズム：単語の塊で読む（１） | デザインの現場 小林章の「タイプディレクターの眼」
日本のなかでも、注意書きに英語が添えてある例が増えてきました。 でも、なんとなくギクシャクして読みづらい。綴りは間違っていないのに、一瞬考えないと伝わらない。途中で読みたくなくなってしまう。そんな欧文のサイン表示や注意書き、けっこう多いんです。欧文の読まれ方のメカニズムを知っていれば避けられるミスなんです。 写真の「Emergency」や「stop」、小文字 g や y、p を切り詰めた形なので読みにくいですね。日本語フォントに含まれるローマ字の典型的なデザインです。 電光掲示板の英字にもなかなかスゴイものが。 これはデジタルフォントとは違うでしょうが、英字の情報を見る人にとっては、だれがつくっているかとか、アウトライン表示かドットなのかは関係ないですからね。ここでも g や y がかわいそうなことに。 たいていの日本語フォントに含まれるローマ字は、小文字の g や y などの下に飛び出る
Budou: 日本語のための自動折り返し制御ツール
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
画像の最適化 | Web | Google Developers
Web performance is a crucial aspect of web development that focuses on the speed at which pages load, as well as how responsive they are to user input. When you optimize your website for performance, you're giving users a better experience. The initial release of this course focuses on web performance fundamentals, that beginners should find informative. Each module aims to demonstrate key perform
Budou - 機械学習を用いた日本語改行問題へのソリューション - ウェブ雑記
こんにちは！ 日本語のウェブサイトを作っていると、日本語特有の問題にぶちあたることがありますよね。 その中でも今回着目したいのは、日本語改行問題。最近、この問題を解決するためのライブラリを公開したので、紹介します。 github.com そもそも日本語改行問題とは何か ウェブブラウザで日本語で書かれたウェブサイトを見ていると、ときどき文章が変なところで改行されているのを目にすることがありますよね。 たとえば、こんなかんじ。 「ソリューション」が「ソリューショ」と「ン」に分かれてしまっています。読みにくいですね。 英語では単語がスペースによって区切られますが、日本語や中国語などのアジア圏の言語では単語がスペースで区切られないことが多いです。 そのため、英語では単語の途中で改行されることは通常ありませんが、日本語では単語の途中で改行されることがよくあります。 本文ならともかく、見出しやキャッチ
Mojik
Mojikは、ウェブにおける和文の文字組みをコントロールするためのJavaScriptライブラリです。現在のところ、以下のパターンでの「アキ」の調整ができます。 連続する約物のアキ 行頭の始め括弧のアキ 和欧間のアキ デモ 「行頭の開き括弧や、『（連続した）括弧』」「句読点」、｛中点・［コロンなど：（約物のアキをコントロール。）；］，｝！ 【こんなふうに】？ 「行頭の開き括弧や、『（連続した）括弧』」「句読点」、｛中点・［コロンなど：（約物のアキをコントロール。）；］，｝！ 【こんなふうに】？ Windows 10（ウィンドウズ テン）は、マイクロソフトが開発およびリリースしている、Windowsシリーズに属するパーソナルコンピュータおよび8インチ以上のタブレット用のオペレーティングシステム（OS）である。コードネームは「Threshold（スレッショルド）」（ビルド10586まで）および
モリサワ Webフォントサービス「TypeSquare」で文字詰めに対応 | ニュース&プレスリリース | 企業情報
株式会社モリサワ（代表取締役社長：森澤彰彦 本社：大阪市浪速区敷津東2-6-25 Tel.06-6649-2151 代表、以下モリサワ）は、Webフォントサービス「TypeSquare」で、モリサワフォントを含む配信中のWebフォントが文字詰めに対応したことを発表します。 これにより、個々の文字幅に合わせて再調整を行う「プロポーショナルメトリクス」や、全角の約物を半角幅に再調整する「字幅半角メトリクス」を利用でき、一文字ずつ調整することなく文字間の幅を調整できます。適切な字間調整を行うことで、見出しなどで引き締まった印象を与えることができ、Webページ上でのタイポグラフィ表現の幅が広がります。 この文字詰めは、特別なスクリプトなどを必要とせず、CSSの標準的な仕様である「font-feature-settings」を用いて利用できます。すでにTypeSquareを利用している場合、文字を詰
アニメ版「シドニアの騎士」プライマリーデザイン
少々前の話になりますが、ポリゴン・ピクチュアズさまからお声掛けいただき、2014～2015年にかけてテレビ放送されたアニメ「シドニアの騎士」（原作: 弐瓶勉さん）のプライマリーデザインを弊社 三階ラボ で担当させていただきました。 プライマリーデザインの具体的な内容は以下の２つです。 モニターグラフィックメインビジュアルの開発 シドニアフォントの作成 ともに、原作の漫画にはすでにオリジナルのデザインが存在していますが、しっかりと時間をかけて目視できる静止画とは違い、アニメのような動画では、様々な要素が一瞬しか表示されないことが多くなります。 今回は、原作の素敵なテイストを維持しつつ、アニメ向けにデザインを再構築することが主な目標でした。 モニターグラフィックメインビジュアルの開発 原作の漫画から、モニター内に表示される主なグラフィックを抽出し、機能性や視認性、汎用性を高める再デザインを行い
エンジニアも今すぐ始めたい「タイポグラフィ」と「ロゴデザイン」｜Technical Creator Hub
前川 裕一 Github: kaelaela Twitter: kaelaela31 2014年度入社。755のAndroidエンジニア。 前回 、 前々回 に引き続き、エンジニアがデザインについて学び、身につけていくテクニカルクリエイター研修についてのレポートです。 今回は 「 タイポグラフィ 」 と 「 ロゴデザイン 」 を実際に手を動かしてやってみました。 本業としている人からみたら基礎中の基礎かもしれないですがとても勉強になる研修でした。 少しくらいエンジニアでも聞いたことがあると思いますが、今すぐ始められてなおかつ奥深いのがよかったです。 タイポグラフィというと幅広いですが、今回の課題は 自分の名前をローマ字でタイプする と 自分の肩書きと所属を日本語でタイプする でした。自分が課題に対して考えたのは以下のようなことでした。 - 書体・字体 - 文字の大きさ
DTPの勉強部屋（名古屋）で登壇しました
2014年8月30日（土）第33回DTPの勉強部屋（名古屋）勉強会にて、当研究会の加納と的場が登壇しました。 これまでデザイン事務所での勤務経験がなく、本や資料での学習や、セミナー、インタビューなどと現場での実務のみで、タイポグラフィ技法を培った2人の話は内容が偏っていたり、違う意見の人は少なくなかったとは思いますが、概ね好評だったようでほっとしています。「技法書にあまり載っていない話をしたい」という目的はある程度達成できたと思います。書籍組版の仕事が中心の方は色々と難しい問題はあるかもしれませんが、グラフィックデザインにおいては「合成フォント」は是非活用して欲しい機能です。時間配分の関係から、一部のパートが省略されたり、練習不足だったりでお見苦しい点などもありました。省略された部分も含まれた、当日のスライドをPDFデータにて公開しますので、興味のある方は読んでみてください。
jquery.kerning.js
jQuery.Kerning.js A kerning plugin specific with Japanese webfont Get Source Demo うつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォのすき
超初心者のための文字組入門（追記あり） #moji_for_webya - Suikolog
このエントリは#LOVEFONT Advent Calendar 2014 への参加エントリです。好きなフォントについて語るブログ・アドベントカレンダーではあるのですが、失礼して「フォントの使い方」に解釈を広げてお送りいたします。 このエントリを書く理由 JUSO Coworkingで9月から11月にかけて、私が企画し開催した「ウェブ世代のデザイナーのための文字組入門 第一回・Illustrator / Photoshop 文字組一日集中入門」。「文字組みに関する知識ゼロのウェブデザイナーであっても受講でき、理解できる基礎講座を開きたい」という願いから、組版屋の大石十三夫氏（はあどわあく・なんでやねんDTP）を講師としてお迎えし、実現したものでした。 この講座を開催した理由はいろいろありますが、ひとつは文字組みを知らぬままデザイナーになってしまった私が勉強してみたいから、ということでした。
「ウェブ時代のデザイナーのための文字組入門 」に参加してきました - デザイナーのイラストノート
JUSO Coworkingで10/4に行われた「ウェブ時代のデザイナーのための文字組入門 」に参加してきました。講師はなんでやねんDTPで有名な大石さん。最近パンフレットなど印刷物をご依頼いただく機会も増え、本を買って読むもののなかなか疑問を解消できないわたしにはぴったりの勉強会でした。今回の記事はIllustratorで印刷物のデータを作る、という前提です。 そもそも文字組・文字詰めは何のため webデザインでは、デバイステキストを自由に詰めたり組んだりすることがむつかしいため、文字組・文字詰めと聞くと「なんか難しそう」と構えてしまいがちです。 私たちがよく使うフォントというのは、四角い箱の中でデザインされています。しかし日本語のように「ひらがな」「カタカナ」「漢字」と様々な文字の形があると、当然小さい形、大きい形が出てきます。また、約物と言われる「」や（）や・などは、隣り合うと何だか
新人くん、これわかる！？書体の要素が手っ取り早くわかる例え画像 | WebNAUT
こんにちは！新人デザイナーの入社を今か今かと待ち望んでいるデザイナーのタカハマです。 前回は「定番書体代わりに使えるGoogle Fonts」をご紹介しましたが、今回は「書体の要素」をちょっとした例え話と画像を用いてご紹介します！ フォントにも家族がある デザイナーが書体を語る上で、まず知っておきたい言葉「フォントファミリー」 書体の太さ・傾き・字幅が異なっても、書風に一貫性のあるフォント群をまとめて「ファミリー」と言います。 そう、書体にも家族があるんです！次の画像はヘルベチカファミリーの一例です。 そんなフォントファミリーの特徴をWebNAUTにちょこちょこ登場しているキャラクター「ウェブノートくん一族」に例えてご紹介します。 太さ（ウェイト） 同じ書風で太さに変化をつけた書体を用意することをウェイト展開といいます。いわば体重ですね。 シンくんはガリガリタイプで、レギュラー・ブックくん
jquery.kerning.js
jQuery.Kerning.js A jquery plugin which adjust text kerning in HTML. Get Source Demo うつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォ
デザイナーは文字詰めに命をかけよう ～和文と欧文のフォーマットの違いから考える～｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは。梅雨入りしたのかしてないのか曖昧な天気が続きますが、体調は崩してませんか？比較的嫌われやすい時期ではありますが、私は雨は好きなほうです。「小夜時雨」「涙雨」「白雨」等、雨を含んだ日本語は美しいですよね。 さて、先週は明朝体とゴシック体について書きましたが、今週は和文書体と欧文書体について書こうと思います。 フォントには日本語の漢字、ひらがな、カタカナで構成された「和文書体」と、アルファベットで構成された「欧文書体」があります。二つの書体は、文字の形状の違いから文字のフォーマットも違います。 それぞれのフォーマットから、文字間隔の詰め方について考えてみましょう。 和文書体のフォーマット 和文書体は【仮想ボディ】という正方形のフォーマット内で文字が収まるようにデザインされています。実際は仮想ボディの枠いっぱいではなく、ひとまわり小さい枠（字面枠）の中に文字が作られます。 仮想ボディ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://creative-tweet.net/blog/2012/05/ui-for-flautokerning.html
「Webデザイナーのためのタイポグラフィと文字組版（Reloaded）」鷹野 雅弘（スイッチ）
