Typescale - Create stunning typography, generate CSS, and find inspiration.
Typescale Save CSS Go Pro Login Typescale New Board My Boards Bookmarks Likes Explore Login Go Pro Support Terms Privacy © Typescale Board Settings Responsive Body size Scale Responsive Min-width Body size Scale Body Font Weight Line-height Letter-spacing Color Background Headings Font Weight Line-height Letter-spacing Color
オプティカル？メトリクス？Adobeソフトの文字詰め機能を解説！｜モリサワ note編集部
「InDesignやIllustratorを使ってデザインを作ったはいいが、何か締まらない……」と悩んだことはありませんか？ 例えば…… 全体をもう一段階まとめたい！全体的にもう少し締まったまとまりのある感じを出したい！というとき、デザイン作業で意外と盲点になりがちなのが文字の「間隔」です。 この画像の場合、文字周辺がパラパラしていることでかなりゆったりした感じが出ています。 日本語における文字配置の基本日本語書体は原則、正方形の枠（仮想ボディ）を基準に作られています。 そして、日本語組版の原則はベタ組み……つまりこの正方形の枠が接する形で配置されるのが基本です。 （このあたりの話を詳しく知りたい方はぜひこちらもご覧ください！） しかし見出しなど、大きく文字を使う時は文字間が目立って見えてしまうことがあるため、文字を詰める作業が必要な場合があります。 文字配置の調整はプロのひと手間、料理で
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
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
鈴木丈「音楽、数学、タイポグラフィ」 | ÉKRITS / エクリ
タイポグラフィとしてのスタイルシート タイポグラフィでは、文字や単語は機械的な手法で生み出されます。……（サイズや位置などの）情報は他の人に渡すことができ、別の機会にまったく同じものを再現することもできます。 フレット・スメイヤーズ『カウンターパンチ※1』 タイポグラフィとは、人の手によって直接描かれるものではなく、機械的な手法によって生成されるものです。そして、その書体や文字サイズや行間といったものをデータとして定義でき、そのデータをもとにまったく同じものを再現できるものでもあります。 ここに示したのはウェブサイトやモバイルアプリケーションなどの表示スタイルを記述する言語であるCSS（カスケーディング・スタイル・シート）のコードです。これによって書体や文字サイズ、行間、そして文字サイズを基準にしたスペーシングなどが定義されます。このコードをもとにして、ウェブブラウザなどユーザーエージェン
トップ | 株式会社ボーンデジタル
CONTACT 製品のご購入、書籍やセミナー、 CGWORLDに関するお問い合わせはこちら 購入者向けソフトウェアサポート に関するお問い合わせはこちら 個人情報に関する お問い合わせはこちら ボーンデジタルへのお問い合わせは上記の各種お問い合わせフォームからお願いいたします。状況によっては、お返事にお時間をいただくことがございます。
HAS Magazine - Life Story Magazine
HAS Magazine is a life story magazine based in Kyoto, Japan. Our concept is to weave beautiful stories woven by diverse life through various journey and encounters.
astamuse Lab
こんにちは、中塚と申します。 今回の記事では、私が先日参加したKaggle Days x Z by HP World Championship (以降、Kaggle Days Championship) について紹介します。ただし、どれくらいCompetitionの内容に触れていいのかが不明なので、今回はタスクや解法の詳細には触れませんのでご理解願います。 私はチームで参加しましたが、チームメンバに恵まれたこともあり、上海開催ではPublic (暫定順位) 11位 / Private (最終順位) 14位、ニューデリー開催ではPublic 4位 / Private 3位でした！各開催のいずれかで3位以内に入ると、バルセロナのオフラインでの最終開催への参加権を得ることができるので、私はスペインへ行くことができそうです。 Kaggle Days Championshipとは？ Kaggle D
英語コンテンツを作るときに気をつけたいタイポグラフィのディテール
ウェブやソーシャルメディアなどで、日本語の原稿を英語に翻訳した（と思われる）コンテンツを目にする機会が増えています。しかしそういった英語のコンテンツの中には、欧文タイポグラフィの視点から見ると少しおかしく感じられるものも少なくありません。たとえば句読点や記号の使い方が間違っていたり、語句が不自然に強調されていたりといった具合です。このようなちょっとしたミスは、ひとつひとつは些細なことでも、結果としてコンテンツが正しく伝わらなかったり、書き手の信用を下げてしまったりする原因にもなります。 この記事では英語のコンテンツを作るときに気をつけたいタイポグラフィのディテールについていくつか解説します。タイポグラフィといっても、グラフィックソフトを扱う技術も高度なCSSの知識も必要ありません。ほんの少しテキスト原稿に手を入れたり、マークアップを工夫したりするだけでも、タイポグラフィの質を高められるので
Photoshopの文字入力：編集やフォント設定方法を総まとめ
この記事では、Photoshopでの文字入力の方法とポイントを解説します。フォトショ初心者の方でも分かるよう、一部初歩的な部分も詳しく説明しているので、必要に応じて読み飛ばして頂ければと思います。 文字入力で使うところ 1.横書きツール 文字入力をするときは、まずツールバーで横書きツールを選びます。 2. 文字パネル 画面右側の文字パネルは、フォントサイズやフォント種類をはじめとして、文字入力に関する細かな設定をする場所です。使い方は後で詳しく説明します。 文字パネルが表示されていない場合は、メニューバーの［ウィンドウ］（上の図の★のところ）から［文字］をクリックすれば現れるはずです。 3.オプションバー オプションバーでも文字の設定ができます。文字パネルとオプションバーどちらでも文字設定ができますが、文字パネルの方が細かな設定ができます。 1-2.文字入力の流れ 文字ツールを選んだ状態で
デザイナーに次に知ってほしい文字組み初級 – 503DESIGN
BLOG / 2018.09.18 2014年に「デザイナーにまず知ってほしい文字組み入門」という初心者向けエントリーをあげて以来、早数年が経ちました。 その月日の中で「絶対フォント感」という言葉が流行したり、「フォント」あるいは「文字組み」という単語が（より一層）脚光を浴び、メディアコンテンツとして取り上げられることが多くなったなと感じます。 例えば2017年にはTBSさんの「マツコの知らない世界」でも取り上げられ、マニアには垂涎の的の「フォントかるた」という大人気商品も生まれたりしています。 さらに、文字組みに関する記事も爆発的に増えていると感じますが、手法が先行した記事が多いことに少し私は疑問を持っています。 特に「なぜ文字をツメることが“大”前提」なのでしょうか？ この記事は、上記の“なぜ”の部分を少し意識してもらい、Adobe Illustratorをメインで使用するデザイナーが
Webデザインにおけるタイポグラフィの10のヒント
一般的には、フォントの数は最低限に抑え、全体を通して同じフォントを使用しましょう。フォントは、大抵の場合１つで十分であり、２つでも多い方です。もし２つ以上のフォントを使う場合は、文字の太さを基に、お互いを引き立たせるものにしましょう。以下は、フォントの組み合わせの例です。左の GeorgiaとVerdanaの組み合わせは、文字の太さが似ており、調和が取れています。 一方で、右のBaskervilleとImpactの組み合わせは、Impactの太さでもう片方のセリフ体が見劣りしてしまっています。 ２. 標準的なフォントを使うよう試みる Google Web FontsやTypekitなどのフォント埋め込みサービスは、多くの良いフォントを提供しており、デザインに新しさや新鮮さ、意外性を加えることができます。また、これらのフォントはとても簡単に使用できます。Googleでの例を見てみましょう。
なぜWebブラウザの文字組みは汚いのか？元エディトリアルデザイナーが解決策を提案します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。入社以前はエディトリアルデザイナー（新聞・雑誌・書籍などの出版物のデザイナー）として書籍の装丁などもしていました。フロントエンドエンジニアのほりでーです。 今回は紙のデザインとWebデザインにある大きな違いのひとつ、「文字組みアキ量」というものについてお話しします。日本語組版のルールにも詳しく触れていくため、Webの経験しかない方も是非読んでみてくださいね！ 2017年2月27日追記：有識者の方からのご指摘を反映し、記事の内容を一部訂正いたしました。詳細な訂正内容については記事末尾をご覧ください。 今回の要点 日本語組版は約物（記号類）のアキが大事 Webブラウザの文字組がイマイチなのは、約物のアキ量が常に一定であることが原因 font-feature-settings: “halt” 1; で約物のアキをなくせるようになった jQury.yakumonoプラグインで行末約物半
美しいデザインを作る鍵「タイポグラフィ」基礎の基礎 デザイン会社 ビートラックス: ブログ
美しいデザインとは何だろうか？ 言い換えれば、何がデザインの美しさを決定するのだろうか？ デザインを構成する要素はレイアウト、線、図形、色、形式、質感、そしてタイポグラフィなどがあるが、実はこのなかで最も重要なのがタイポグラフィである。 今回はこのタイポグラフィの基礎について、btrax CEO、Brandon K. Hillによる社内ワークショップの内容をもとにお伝えしたい。 デザイナーではないビジネスパーソンの方にとっても、書類作成等に大いに役立つ内容であるので是非参考にしていただきたい。 1．そもそもタイポグラフィとは？タイポグラフィとは、言葉を見やすく、読みやすく、 そして魅力的に見せる ための、 字体を配置する技術であり芸術である タイポグラフィの歴史は古く、15世紀まで遡る。最初のタイポグラフィはBlackletterである。（ちなみにこの発明以前、本などは人による手書きであっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebook
Kern Type, the kerning game
CSSで作れる！ロゴのようなテキストシャドウエフェクト16種【ドロップシャドウ】
Hellveticafont.com
CSSだけでここまで出来る！？タイトルや見出しにオススメなぬるぬる動く最新のCSSテキストエフェクト19選 | WebDesignFacts
Why UI design is all about typography