Since the earliest days of the teletype machine, code has been set in monospaced type — letters, on a grid. Monaspace is a new type system that advances the state of the art for the display of code on screen. Every advancement in the technology of computing has been accompanied by advancements to the display and editing of code. CRTs made screen editors possible. The advent of graphical user inter
対象読者 Figmaを使うデザイナー Figmaを見ながらスタイルのコーディングをするエンジニア なぜこの記事を書いたのか 弊社ではデザインシステムを構築しています。 テキストもコンポーネント化しているのですが、ある日エンジニアから上がってきたPull Requestを見ると font-weight: 700; となっていたのです。 デザイナーとしては、太文字は font-wight: 600; になる用にコンポーネントを作っていたので、なぜ700と指定されてしまったのか不思議でした。 原因を調査した結果、他でも嵌る可能性があるかもしれないと思ったので、今回記事に残そうと思いました。 すべての答えはFigmaにある 弊社で使っているFigmaの文字設定は下記のようにしています font-familly Figmaでのfont-weight ブラウザでのfont-weightとして出力したい
これを回避するために、iOSの実装側でHiragino Sansを使うという方法もありますが、その場合にも注意が必要です。Hiragino Sansを使った場合にAutoLayoutでのテキストオブジェクトの高さが、グリフを表示するための見た目の高さより小さく計算されてしまい、アルファベットのyやgなどの下に飛び出しているグリフが切れて表示されてしまうことがあります。 これはおそらくiOSに組み込まれているHiragino Sansのフォント側の問題だと思われますが、かなり前からこの問題は報告されており、修正されることはあまり期待できないでしょう。 日本語文字サイズ問題をFigma Pluginで対応する今回の問題はiOSのシステムフォントが日本語グリフの表示の場合に、特殊な文字調整を入れていることから発生しているというのが上の説明です。 つまりFigma上でシステムフォントと同じ状況が再
タイポグラフィーは、ブランドやサビースのブランディング、マーケティングのプロセスにおいて重要な役割を果たしてきました。ブランドのアイデンティティーを表現することができるようなグラフィックの設計がタイポグラフィーの主な役割です。 グラフィックスの大部分を構成しているのはフォントです。一種類のフォントのみで構成されたWebサイトやブログは単調で面白みのないものになってしまします。二種類、多くても三種類のフォントを組み合わせるのが確実に好評を得ることができるアイデンティティーの形成に良いでしょう。 雰囲気の全く異なるフォントを組み合わせ、デザインの価値を損ねているのをよく見かけます。以下、フォントを組み合わせる際に気をつけるべきポイントについてまとめました。 フォントの組み合わせは視覚に訴えるもので、メッセージ性があるものでなければなりません。もしそうでなければ、ページは見劣りしてしまいます。
海外デザインブログCanva Design School Blogで公開された「10 Golden Rules You Should Live by When Combining Fonts: Tips from a Designer」の著者より許可をもらい、要点をまとめて日本語抄訳しています。 デザインやアートの世界には、変えることができないいくつかのルールがあります。基本ルールを知ることで、自由にルールを壊すこともできるようになります。では、フォントの効果的な組み合わせ方はどのように学べよいでしょう。デザインとしてうまく利用できると証明されている、いくつかのガイドラインを見ていきながら、実践的なデザインの基本を学んでいきましょう。 詳細は以下から。 01. デザインに合ったフォントを選ぼう 多くのフォントはカジュアルさや、陽気さ、真面目さ、エレガントさなど、他とは異なる雰囲気(英: M
※追記あります Mac OS X El Capitanのヒラギノ角ゴシック — Medium ヒラギノ角ゴシックは10ウェイトあるが、CSSでは9つ(100から900まで100間隔)でしか指定できない。しかも、具体的にどのウェイトで表示されるかが、ブラウザによって異なっているようだ。 font-weightと実際に使われるウェイトの対応の表: CSS font-weight Firefox Chrome 100 W0 W0 200 W2 W1 300 W3 W3 400 W4 W4 500 W5 W5 600 W6 W6 700 W7 W7 800 W8 W8 900 W9 W9 また、normalとboldはそれぞれ400と700を指定するのと同じなのだが、今までのヒラギノ角ゴではW3とW6を使ってきたのだから、これでは少し太いかもしれない。こういう時は、@font-faceを使って、ウ
この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。(最終調査日:2023年7月) font-familyの役割とは CSSのf
WinXP Win7 Win8.1 Win10 MacOSX macOS Catalina / MSOffice AdobeCS6 AdobeFont(日) AdobeFont(英) 一太郎 DynaFont / 選択済 現在のフォーム状態のURL URL : 各グループのフォントの一覧 選択中のフォント WinXP Arial, Arial Black, Arial Bold, Arial Bold Italic, Arial Italic, Batang, BatangChe, Gungsuh, GungsuhChe, Comic Sans MS, Comic Sans MS Bold, Courier, Courier New, Courier New Bold, Courier New Bold Italic, Courier New Italic, Estrangelo Edes
フォントを愛するマークアップエンジニアのアシュリーです! 今回は非Web系の方から「Webデザインに使えるフォントって何ですか?」と聞かれたときに、アシュリーならこう答える!のまとめです。 おおざっぱに言うと、下記のとおりですが… Macでデザインする場合は「ヒラギノ角ゴ」か「游ゴシック体」、「ヒラギノ明朝」か「游明朝体」Windowsでデザインする場合は「游ゴシック体」か「メイリオ」、「游明朝体」デザイン内でのフォントの太さバリエーションは「太い」「通常」の2パターンもっと詳しくご紹介していきますよ♪ ※この記事は「デザインフォントを愛しているが、必要ないときは和文書体の本文はシステムフォントで実装したい派」が書いています! Webブラウザで表示されるフォントは、OSや機器(ときにブラウザ)によって違うそもそも、なぜ「Webサイトに使っていいフォントって何ですか?」という話になるかという
WebデザインでWebフォントを利用してデザインを構築していくことがよくあります。 そこで使えるのがCSSの@font-face規則です。 @font-face規則はWebフォントを利用するために用意された規則です。Webフォントで有名なのがGoogle Fontsではないでしょうか。 他にもたくさん提供されているフォントや自作のフォントなどのデータを、CSSで読み込んで利用することができます。 Webサイトのデザインでこだわりのあるフォントを利用すると、PhotoshopやIllustrator等で作成したデザインカンプから、Webで表現できない場合があるので、こだわりのあるフォントの部分だけ画像で書き出すしかありません。 もちろん画像として扱っていくのは問題ないのですが、レスポンシブWebデザインに対応しようとすると、画像よりもできるだけHTMLのマークアップとCSSで表現したいところ
Google Fontsとは、Googleが提供するWebフォントのサービスです。無料で利用でき、様々な言語のフォントにも対応している点が大きな特徴です。Google Fontを使用している高品質のサイトをフォントのタイプ別にまとめました。フォントを選ぶ際の参考に是非してみてください! ・・・ 01. 欧文フォント(サンセリフ体)①LATO株式会社Koloha|https://koloha.co.jp/■使用サイト 株式会社Koloha|https://koloha.co.jp/ アクシスコンサルティング株式会社|https://axc-g.co.jp/ TRUE TOWEL|https://true-towel.com/
ウェブサイトのフォントは何を指定すればよいのでしょうか? CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー&ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
<link href="https://fonts.googleapis.com">って書くと罰金取られます。 以下はGerman Court Rules Websites Embedding Google Fonts Violates GDPRというニュースの紹介です。 German Court Rules Websites Embedding Google Fonts Violates GDPR ドイツのミュンヘン地方裁判所は、あるWebサイトの運営者が、ユーザの個人情報を本人の同意なしにフォントライブラリを経由してGoogleに提供したとして、100ユーロの賠償を命じました。 Webサイトが原告のIPアドレスをGoogleに無断で提供したことは、ユーザのプライバシー権の侵害に当たると判断しました。 さらに、Webサイトの運営者は収集した情報をその他のデータと突き合わせることで『IPア
900ライセンスApache License 2.0Noto Sans CJK の配信サービス(余談)Google Fonts : Early Accessでウェブフォントとして配信されている。 Noto Sans Japanese (Japanese) ただフルサイズなので 16MB ぐらいある。さすがに、このサイズは現実的ではない(動作確認には良いかも)。 @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); Noto Sans CJK JP を入手するGoogle Noto Fonts からダウンロードする。 言語ごとにフォントが分けられているので「Noto Sans CJK JP」を選択してダウンロード。 zip 形式で圧縮されているので解凍すると、それぞれの形式のフォントファイルが入
Source Han Code JP(源ノ角ゴシック Code JP)を version2.010に更新しました。 このバージョンで、MS Office製品などで使われるスタイルリンクを機能するようにしました。これによりフォントのメニューバーにあるボールドやイタリックボタンがスタイルが変更できるようになりました。また、 Windows10のフォントフォルダやMS office製品などのフォントメニューで、フォント名が正しくソートされない問題を修正しました。 変更点: U+2423 OPEN BOX '␣'を、667unitsの文字幅にしました。#12 スタイルリンク機能を使えるようにしました、アプリのフォントメニューバーに'B' や 'L'ボタンがある場合、スタイルリンクで設置されたボールドやイタリックを利用可能。 Windows10の「フォント」フォルダーで、源ノ角ゴシックのファミリーが
国内初、和欧混植をWebフォントとして利用できる「混植フォント」サービスを開始 FONTPLUSは、和文フォントと欧文フォントを組み合わせた「混植フォント」の第1弾として、フォントワークス社とMonotype社のWebフォント(4ファミリー8書体)を2020年10月15日よりご提供開始いたします。混植フォントはWebフォントサービスにおいては、国内初のサービスとなります。 FONTPLUSをご利用中のお客様は、追加費用なしでご利用いただけるサービスとなります。 「和欧混植」をWebデザインにも気軽に取り入れたい 印刷物のデザインでは、欧文フォントの文字サイズやベースライン位置などを調整した上で和文フォントと組み合わせる「和欧混植」という手法が広く使われています。和文フォントに含まれる英数字をそのまま使うよりも、欧文フォントを使う方がより本格的で高品質なタイポグラフィを実現できる場合があるた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く