rem と vw で画面幅に対して常に可変な要素サイズを指定するCSSの書き方｜noteエンジニアチームの技術記事
rem と vw で fluid responsiverem と vw は相対的な単位で、rem はルート要素 html のフォントサイズに連動し、vw はビューポートの幅に連動します。 基準となる html に ビューポート基準の vw 単位でフォントサイズを指定すると、テキストサイズや要素サイズや余白や位置などに rem 単位を使った要素がビューポート幅と連動するようになります。フォントサイズに関連したrem 単位を、別なサイズ表現のプロパティに与えられるCSSのおもしろいところを利用します。 html { // viewport 375px のとき font-size 16px font-size: calc(100vw * 16 / 375); } .ex-object { margin: 1rem; font-size: 1rem; transform: translate(1r
今さら聞けないWebフォントの基礎知識 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの花ちゃんです！ デザインをするとき、どのようなフォントを使えば、そのサービスや商品、あるいは企業のイメージがより魅力的に伝わるのかを考えますよね。それはもちろん、Webサイトのデザインでも同じだと思います。 私もWebデザインを始めたばかりの頃は、フォントにずいぶん悩まされました。Webフォント？ デバイスフォント？ なんで端末によって表示されているフォントが違うの！？ と大混乱したのを覚えています。 仕組みや特徴を知っていれば、フォントを選ぶうえでの一つの基準になります。 今回はデザイナーが知っておきたい、Webフォントの基礎知識をまとめてみました！ それぞれのWebサイトの目的に合った、フォント選びをしたいですね。 よく聞く「Webフォント」ってそもそもなに？ 今や当たり前のWebフォントですが、少しおさらいをしたいと思います。 Webフォントとは、あらかじめサ
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
Google Chromeでもfont-sizeを10px以下で表示させるCSS - 株式会社アップシェア ブログ
【2021年7月更新】 Webサイト制作で極小フォントサイズを使用したいときに厄介なのが Google Chrome。 Chromeは可読性を維持するため、10px以下のフォントサイズを指定したテキストも10pxで表示される仕様になっています。 ブラウザごとの表示の違い まずは Firefox、Chrome、IE、Safari での表示の違いをご覧ください。 Firefox Google Chrome Internet Explorer Safari 頑なにフォントサイズ10px以下で表示させようとしないGoogle Chrome。 font-size が効かないとなると、諦めて10pxにするか画像を作るか…といった妥協策が思い付きますが、CSSだけで思い通りのフォントサイズに表示させる方法がありました。 transformプロパティでブロックごと縮小する [html] <span cla
商用可！手書きでナチュラルな無料フォント決定版（日本語・英語）
オシャレなカフェの黒板にチョークで書かれたような、ナチュラルな手書きフォントを検討中のひとにおすすめしたいコンテンツ。 ラフで少し崩したような絶妙なバランスは、利用する素材で仕上がりが大きく変わってきます。 今回は、商用利用できる手書き風フリーフォント素材をまとめてご紹介します。 日本語、英語フォントごとに分けています。 かわいいフォントや、レトロなフォント、おしゃれな筆記体フォントやブラシフォントなどと一緒に活用してみましょう。 コンテンツ目次 Adobe Fontsの手書きフォント（8個） 和文、日本語の手書きナチュラル・フリーフォント（73個） 英語の手書きプレミアムフォント（16個） 英語の手書きナチュラル・フリーフォント（72個） 現在、169個の手書きフリーフォントを集めており、アップデート継続中。 Adobe Fontsで使える手書きフォント 「日本語フォントをまとめてダウン
多言語組版について | 多言語フォント | モリサワのフォント
○MORISAWA PASSPORT 英中韓組版ルールブック（タイ語含む） 全ページPDF （30MB) 多言語組版に必要なルールと、その言語の組版に活用できるMORISAWA PASSPORT収録書体を紹介したハンドブックです。近年需要が高まるタイ語を新たに収録しました。 ○言語別PDFダウンロード はじめに（3MB) MORISAWA PASSPORTの多言語対応 p2 MORISAWA PASSPORTに収録されている多言語フォントのフォントベンダー p4 欧文（10MB) ラテン文字と欧文組版 p6 欧文組版の考え方 p8 欧文組版の手法 p12 欧文約物（Punctuation）p18 併記組版の考え方 p22 データ受け渡しとアプリケーションの設定 p24 欧文書体の選び方 p32 欧文組版の確認リスト p33 フォント紹介 p34 中国語 - 簡体字（7MB) 中国語（簡体字
【かわいいハングルフリーフォント】韓国デザイナーが使うおすすめ10種類をご紹介 | KOREANLIFE
元韓国在住デザイナーも現場で使っていた、代表的な無料ハングルフォントをご紹介します。 私もデザイナー時代にお世話になったフォントたちです。 パワーポイントを作成したり、サムネイルを作成したり、どれも実際デザインの現場で使えるものばかりです。 これらは全てフリーなので、安心して使えます。 是非ダウンロードして使ってみて下さいね。 NAVER ナヌムシリーズ NAVER ナヌムシリーズフォントです。 まずは何と言っても近年、大ヒットしたフォント。 Naverが作ったフォントです。 韓国はグーグルよりもネーバーをよく利用します。 そのネーバー様が作ったフォントになります。 よく見かけすぎて、ちょっと飽きている感はありますが、まだまだ健在です。 ナヌムシリーズには（上から順に） と８種類あります。 太さもだいたい３種類ほどあり、これだけで多様な表現ができちゃいます。 基本のナヌムゴシックはちょっと
多言語サイトのフォント指定 | 日本語、中国語、韓国語ページで使うfont-family - TOKiiRO
必要な言語でWEBサイトを制作する フランクフルトは10人に1人は移民と言われるぐらい各国の移民が多く暮らす国際的な都市です。制作時のヒアリングの際、お客様も日本人だけではなく、各国のお客様がいるということで、「銀座マツナガ フランクフルト様」のサイトでは以前、 日本語 ドイツ語 英語 中国語 の4言語のページを作成しました。 毎月のアクセス解析レポートとヒアリング 銀座マツナガ フランクフルト様のサイトをオープンした2013年末から毎月アクセス解析をして、どのサイトから、どんなキーワードで、どのページが…など情報を調べて、キャンペーン等のアドバイスを行っています。 ヒアリングの際に「最近韓国人のお客様がくるようになった」とお聞きし、韓国語サイトを提案し、4月に制作をしました。 韓国語ページ：「긴자 마츠나가」 프랑크푸르트∙함부르크 일본인 미용실 その際にサイトに表示するフォントはどれ
Photoshopでフォントを追加する方法
Photoshopを利用して、作品を作ったり、仕事の資料を作成したりしていると、テキストを挿入することも多いと思います。テキストはサイズや色などが変えられるだけでなく、好きなフォントにすることもできます。 今回は、Photoshopで使えるフォントを追加する方法をご紹介します。 Photoshopで使用できるフォントは、macでも、windowsでも、パソコン自体にインストールされているフォントがそのまま使用できるようになっています。なので、Photoshopで使用できるフォントを追加しようとした場合、パソコン自体のフォントを追加でインストールすることになります。 フォントの追加の仕方は、マシンによって違うので、以下を参考にしてください。 macの場合 1.フォントをダウンロードします。 2.大抵ダウンロードしたファイルは、zip形式等なので、解凍しておきます。 3.アプリケーションフォル
Font-familyメーカー：フォント種類一覧からサクッと指定
Windows メイリオ 'メイリオ', Meiryo, 愛のあるユニークで豊かな書体 Meiryo UI 'Meiryo UI', 愛のあるユニークで豊かな書体 游ゴシック YuGothic,'Yu Gothic', 愛のあるユニークで豊かな書体 Windows8.1~ 游明朝体 'Yu Mincho Light','YuMincho','Yu Mincho','游明朝体', 愛のあるユニークで豊かな書体 Windows8.1~ Yu Gothic UI 'Yu Gothic UI', 愛のあるユニークで豊かな書体 Windows10~ ＭＳ ゴシック 'ＭＳ ゴシック', 愛のあるユニークで豊かな書体 ＭＳ Ｐゴシック 'ＭＳ Ｐゴシック','MS PGothic', 愛のあるユニークで豊かな書体 MS UIゴシック 'MS UI Gothic', 愛のあるユニークで豊かな書体 MS明
Chromeでも読みやすい游ゴシックを指定する方法 - Qiita
Windows8.1から搭載された「游ゴシック」ですが、ChromeとOperaで薄く掠れて見難くなってしまいます。 一般的にはbodyにfont-weight: 500;を与えて回避している方が多いですが、フレームワークなどを使用した場合、font-weight100～400を指定しているコンポーネントの数だけfont-weight: 500;と指定しなければならなく、あまり現実的ではありません。 「游ゴシックについて」と「ベストなfont-family」がごちゃ混ぜになって記事が見難くなってしまいました。より詳細に書き込んだため記事を分割しました。 ストックされているかたや、ブックマークされている方にはご迷惑おかけします。 この記事はタイトルの通り游ゴシックのみを扱います。 当記事を踏まえたゴシック体のfont-familyの指定は「2020年まで使えるはずだったfont-family
Web 制作で使える！ Android で使えるフォント一覧 – ミルログ
iOS の方なんかは使えるフォントの解説等があったのですが、Android にはそういったものがないなぁと思ったのでメモがてら作成。 日本語フォントは 1 フォントしか搭載されてないので、以下に書くものは全部英語フォントです。 ※掲載している画像は Android 5.1 lollipop 実機での画像です。 Androidで使えるフォント Roboto Androidのシステムフォントです。 " sans-serif "と指定すれば本来は出るのですが、日本語環境だと (正確には Fallback font 環境だと) その言語のフォントが優先されてしまいます。 Roboto フォントを指定するには、Arial, Helvetica, Tahoma, Verdanaのどれか一つを Font family 内に記述する必要があります。 指定するのはどこでも良いので、sans-serif の直
2016年最強のFont family設定 - ミルログ
いつもサイト運営者を悩ませる Font-Family の指定。 今回は最先端な Font-Family 指定を考えてみました。 2017年になりましたが特にフォント環境の動きがなかったので、少なくとも当年中はこの記事を更新の更新を続けていきます。 当サイトで指定しているFont Family 当サイトでは現在、こんな感じで指定しています。 font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', meiryo, sans-serif; クリップボードにコピー スポンサーリンク Mac では安定のヒラギノ Mac では普段目にするフォント、ヒラギノ角ゴを指定します。 なんだかんだでずっと Mac のシステムフォントとして使われてます
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
游ゴシックのfont-family指定方法！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証 | WEMO
【Swift】 iOSで使える内蔵フォント一覧と文字の比較
無料で商用利用も可能！日本語のフリーフォント49選
韓国語のWEBサイトに最適なfont-familyとは?書き方まとめ2019年版
英語のWEBサイトに最適なfont-familyとは？書き方まとめ2019年版
http://akkagi.info/20160711_web/
フォントサイズpx,em,%,pt
