日本人開発者向けの最適解？ GitHubフォント＋IBM日本語フォント＝「Moralerspace」【4月1日追記】／「Monaspace」と「IBM Plex Sans JP」をかけ合わせ、5スタイル×6つの全半角調整【レビュー】
レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法
clamp(下限, デザインファイル上のサイズ / アートボードの横幅 * 100vw, 上限); 例） 横幅375pxのアートボード上で30pxの文字 font-size: clamp(24px, 30 / 375 * 100vw, 30px) 例） 横幅1440pxのアートボード上で650pxの画像 width: clamp(0px, 650 / 1440 * 100vw, 650px) clampという見慣れない関数を使っています。後ほど詳しく説明します。 デモ このデモでは文字と画像部分に上記のサイズ調整を施しています。 解説 上記の計算式でやろうとしているのは、どの画面幅になっても比率を維持することです。比率が維持できているのなら画面幅が大きかろうが小さかろうが絶対に崩れません。 そこで比率が維持される計算式を考えます。画面幅に対してどのくらいか、が計算できれば良いですね。 よっ
Webフォント読み込み戦略（2021年） - MOL
Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという
Puppeteer on LambdaでWebページのキャプチャを撮る | PRESSMAN*Tech
AWS Lambdaで遂にNode v8.10を使用できるようになりました。 これでPuppeteerが使える！と意気揚々としていたのですが、いつの間にか必須要件がv6.4.0以上となっていました。以前はv7.10以上必須と書かれていたはずですが・・・ いきなり出鼻を挫かれましたが、気を取り直していきます。 はじめに：PuppeteerとはGoogle謹製のGoogleChromeを自動操作するライブラリです。Nodeで動作します。 「このサイトにアクセスして、このボタンをクリックして・・・」といった操作を自動で行うことができます。雑に言うとExcelのマクロみたいなものです。 Chrome59で実装されたヘッドレスモードに合わせる形でプロジェクトが立ち上がり、主にWebアプリの自動化テストの分野で注目されています。 似たプロジェクトにPhantomJSやChromelessがあります。
Noto Sans の Web Font 対応とサブセットによる最適化 | blog.jxck.io
Intro このサイトのフォントに Web Font を適用することにした。 フォントには Google と Adobe が協同で開発した Noto Sans CJK JP を採用した。 また、このサイトでは使用しないだろう文字を削除したサブセットを作ることで、フォントサイズを最適化した。 フォントサイズの最適化 Noto font は、そもそも豆腐(フォントがなかった場合に代替表示される四角)が出ないように(No-豆腐)することをコンセプトにしているため、フォントの網羅率は非常に高い。 そのため Web Font として利用する場合は、全体だとサイズが大きすぎるため、言語毎に提供されるフォントセットの中から、必要なフォントのみを適用することになる。 本サイトでは、 ASCII 、記号、日本語のフォントを用いる。 しかし、特に網羅された漢字の中には、日常では使わない文字が多々ある。 加えて
The Android/Material Design Font Size Guidelines
The Android/Material Design Font Size Guidelines Erik D. Kennedy · Updated May 29, 2024 You’re reading Font Sizes in UI Design: The Complete Guide. Quickly navigate to other chapters: Intro · iOS · Android · Web · Principles So you’re designing an app in the Material Design style and want to know (roughly) what font size to use? Great. You’ve come to the right place. All font sizes listed below re
Font Sizes in UI Design: The Complete Guide
Font Sizes in UI Design: The Complete Guide Erik D. Kennedy · Updated May 29, 2024 One of the most common questions I receive from beginning UI designers is: what font size should I use for my project? Maybe it’s a website, maybe an Android app, maybe iPhone/iPad. Ever wish someone had compiled all the rules in one place? If you have, dear reader, bookmark the crap out of this page. These are up-t
Noto Sans CJK JP フォントをダウンロードしてサイトに適用する手順 - Qiita
CSSの埋め込み方まで詳細に説明している所がなかったのでまとめてみました。 デモプレビュー 書き出しサンプル + デモデータ 一式 1. フォントダウンロード 2. アプリインストール サブセットフォントメーカー WOFFコンバータ OTF → WOFF + EOT WOFF → TTF http://opentype.jp/woffconv.htm 3. サブセット化 サブセットフォントメーカーを使用してフォントをサブセット化しファイルサイズを削減します。 以下、アスキー文字 + 非漢字文字 + 第1水準漢字でサブセット化すると 16MB→700KB 位になります アスキー文字 !”#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¡¢£¤¥¦§¨©ª«¬
視認性の高いプログラミングフォント「Myrica」をWindows＋Sublime Textで使う方法
Myricaとは Myrica （ミリカ）は、無料で使えるプログラミング用 TrueType フォントです。 視認性、判別性 が高くなるように、複数のフォントから合成され作成されました。 Myricaの特徴Myricaは、多くの特徴をRictyから継承しています。 主な特徴は、以下のように挙げられています。 ASCII文字は「Inconsolata」が適用されます。それ以外の文字には「源真ゴシック」または「Mgen+」が適用されます。半角文字と全角文字の横幅の比が 1:2 に調整されています。視認性の高い日本語文字 (半濁音など) が使用できます。Rictyにない特徴Rictyにない特徴として、ASCII/ひらがな/カタカナにヒンティング情報が付加されています。 これにより、低解像度や、小さな文字サイズで表示させても、可読性が高くなるようになっています。 特徴のイメージ特徴に関するイメージ
グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも？ | 初代編集長ブログ―安田英久 | Web担当者Forum
今日は、Webフォントの話題を。日本語Webフォントは、「使いたい、でも重くなるからちょっと」という人が多いと思います。でも、グーグルがクラウド上でWebフォントを提供し始めたことで……。 グーグルが日本語のWebフォントをクラウドで提供開始グーグルが日本語のWebフォントを提供し始めていました。実は、2014年7月からあったらしいのですが、私はつい最近になって知りました。 その名も、「Noto Sans Japanese」。このページの表示も、「Noto Sans Japanese」にしてあります。 Noto Sans Japaneseは、6934文字に削減したサブセット版が提供されており、ウェイト（太さ）が7バリエーション。1ウェイトあたり約4.5Mバイトほどのサイズです。 使い方を簡単に説明すると、CSSで定義ファイルを読み込み、 <style> @import url(http:/
数多くの無料アイコンから必要なものだけをセットにして、軽量化されたWebフォントやSVGを作成できるサービスのまとめ
セットになったアイコンはデザインが統一されており、それはそれで便利ですが、全部のアイコンを使うことはほとんどないと思います。 自分が必要なアイコンだけをセットにし、軽量化されたセットにして、WebフォントやSVGとして利用できるオンラインサービスを紹介します。 用意されたアイコンからセットを作ってもよし、自分のアイコンを加えてセットにすることもできます。 flat icon フォーマット：font(woff, eot, ttf, svg), png, svg, eps, psd 462種類のパック、55,000個のアイコンから使用するアイコンだけを選択し、セットにすることができます。チェックしたアイコンはクッキーで保存されているので、ログインしないでも利用できます。
画像不要CSSだけで作るテキストロゴデザインのTips
WebサイトのロゴタイプといえばPhotoShopを初めとした画像ソフトを用いて作るのが一般的な気もしますが、シンプルなものならCSSのプロパティを指定するだけでも作れたりします。今回はそのサンプルとフォント関係で使うCSSプロパティいくつかのおさらいなどを。 行間・字間で印象はぐっと変わる サイトトップのタイトルを画像ではなくh1タグなどで表示して文字として扱うのはSEO的効果がある！…とは限りませんが、ユニークな人名や店名、フレーズなどをサイトのタイトルとしたときには競合少ないんでタイトル+他のワードなどで検索されたときに多少の効果はあるんじゃないでしょうか。 Web fontもいちいちロードするのに時間がかかるというデメリットもありますが、日本語使わない英数字だけなら比較的ストレスなく使いやすいと思います。というわけで今回のサンプルに使うフォントは過去記事に書いたGoogle web
GitHub - andreberg/Meslo-Font: Customized version of Apple's Menlo font. Great monospaced font for development work. Should also work with the Windows Console (see Wiki for Windows infos).
Meslo LG is a customized version of Apple’s Menlo-Regular font (which is a customized Bitstream Vera Sans Mono). In Snow Leopard, Menlo-Regular is now the preferred and default font for Apple’s developer tools and also the Terminal (unless you changed the font settings for these apps yourself before upgrading to SL – your changes will stay in place). I really like Menlo but I do have my nitpicky g
無料・商用利用OK・バックリンク不要・著作権表示も不要で使える写真や日本語フォントなどの素材サイト集 - かちびと.net
少しリソースが溜まってきたのでリンク集に して開放します。バックリンク不要で、商用 の利用可能、著作権表示も不要のWebデザイン 向け素材サイト。商用で使ってもいいけど リンクしてね、といったようなCCのBY的な ライセンスだとどうしても個人的に使いにく いのでバックリンク不要は割りと必須です。 今までのリソースをまとめただけなのでほぼ全部既出だと思います。自分用リンク集なのでいろいろ適当です。 細かいライセンスもあるので利用規約には必ず目を通してください。 9search この記事の題名の条件の素材を紹介しているサイト。小物系探すなら最初にここ見たほうが早いです。 9search ソザィ-Sozay- こちらもこの記事の題名の条件で収集していますが、素材単位ではなく、Webサイト単位で紹介しています。国内多めですかね。 ソザィ-Sozay- 国内のWeb制作に役立ちそうな無料の写真素材や
ウェブサイト作成に役立つ35のwebサービス｜Webpark
ウェブサイトを作成する際に個人的に使っているWebサービスを紹介します。幅広く35個紹介しますので、新しい発見があれば幸いです。 フォント関係 wordmark.it パソコンに入っているフォントを一覧で見ることができます。フォントサイズも調整できます。 日本語フォント252種類を表示確認できます！フォントを探すならfonthack.jp。 日本語フォントの表示が確認できます。現在252種類あります。 PXtoEM.com: PX to EM conversion made simple. ベースのサイズ（px）を決めると、em, pt, %の値が表示されます。 カラー関連 ウェブ配色ツール Ver2.0 配色ツールは色々ありますが、日本語ですし、あまり考えなくても感覚的に使えるので楽しいです。 Color Scheme Designer 3 カラーパレットジェネレーターです。海外サイトで
Inconsolata, the best font for programming | Weboo Returns
Recently, I changed the font used for programming to Inconsolata . I have combined this with Takao Gothic as a Japanese font, but these two are very compatible and very easy to see. In the article “Top 10 Programming Fonts” ( Japanese translation ), it is introduced as the first place. Both fonts are free to use, and Ubuntu comes with a standard package so you can easily install it. For OS other t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web fonts in 2018
日本語表示も考慮されたコーディング向けのフォント「Source Han Code JP」が公開
ソースコードを表示するためのフォント「Source Code Pro」をアドビがオープンソースで無料公開 － Publickey
Blog - Mikula Beutl - SEO Consulting
