A set of rules that will improve your typography 10x.

Use Traditional Point Sizes

Display     Double Canon    4.666
Heading 1   Canon   3.999
Heading 2   Double Great Primer 2.999
Heading 3   Double English  2.333
Heading 4   Double Pica 2.000
Heading 5   Paragon 1.666
Heading 6   English 1.166
Body        Pica    1.000
Fine Print 1    Small Pica  0.916
Fine Print 2    Bourgeois   0.750

Use Serif for Italic Text

Reduce Heading Spacing

The spacing between a heading and a paragraph should be less than the regular paragraph spacing. If regular paragraph spacing is used instead, the heading would seem too far away from the paragraph.

Use Thin Space

Thin Space might be the most underrated HTML entity. It can be used for a name like J. K. Simmons. Without spacing, the J and K would seem too close together; with a regular space, they seem too far apart. Insert a thin space and it is just perfect.

The HTML code is  . You can go even further with Hair Space  

Don’t Use Helvetica, Inter, & Roboto

Earlier this year, I pushed out a tweet about my desire to be a beginner again, learn something new and took a particular interest in…

Variable fonts with a custom relative font weight axis ("GRAD") help to avoid layout shifts when transitioning font-weight.

System font stack CSS organized by typeface classification for every modern OS. The fastest fonts available. No downloading, no layout shifts, no flashes — just instant renders.

Everything from learning the basics to running your own foundry.

Design with FontForge
This is a fantastic introduction to type design, regardless of what software you use.

https://typedesignresources.com

Designing Type by Karen Cheng is an incredible reference, but its not exactly the best way to get started designing your own type IMO. I'd suggest Designing Fonts by Chris Campe & Ulrike Rausch. It's much more of a practical guide and takes you all the way through the type design process from ideation to sketching to vector drawing and letter spacing.
I also found The Stroke: Theory Of Writing by Gerrit Noordzij really helpful for conceptually understanding how to construct letters.

In addition to Cheng and Beier, get Bergsland Practical Font Design and fontmaking software (such as FontLabs). Have fun! If you want to get fancy, check out TypeDrawers, and The OpenType Cookbook.

The Hack license comes in three parts. The Bitstream Vera license must be maintained based upon the language and includes reserved font names for "Bitstream" and "Vera" along with other stipulations.

We acknowledge the public domain contributions of the DejaVu group in the statement:

• Source Code Pro
• Cousine
• Ubuntu Mono

But coding != terminal != text!!

Preview and choose the right type scale for your project. Experiment with font size, scale and different webfonts.

Scale: 1.25 Major Third

Colleagues, are there plans to combine the .glyphs sources for Noto Serif & Noto Serif Display into one source? And the same for Noto Sans and Noto Sans Display?

simoncozens commented yesterday
We decided to do away with the "Display" versions, as they were ill-defined. (Not really opsz, not really contrast, and not consistent between Sans/Serif.) Maybe we'll bring them back one day! (Probably not.)

https://github.com/notofonts/latin-greek-cyrillic/issues/436#issuecomment-1577379159
The "display" version was not exactly optical size and not exactly contrast, and was a different implementation between serif and sans. It didn't really fit into any of the models of font variation that we support elsewhere. So they need re-thinking, harmonising, and re-drawing.

An exhaustive collection of type design resources.

The Riks stencils, completing Sindre Bremnes’ Telefon family, is in part based on the seven letters adorning the sides of the telephone kiosk by the same name, designed by architect Georg Fredrik Fasting in 1932. In Bremnes’ all-purpose Telefon typeface the original stencil ‘O’ is relegated to a stylistic set – in Riks its stencil logic is applied to the entire character set.

Give your simulated text a realistic look while making it easy to add copy later on with Dan Ross’s Flow Fonts and Christian Naths’s Redacted.

Graphic design, type design, photography, and the occasional video production, in Ithaca, New York.

Nacelle is a neo-grotesque sans-serif redesigned Aileron and totally refurbished.

While keeping Aileron's basic concept of "creating a neo-grotesque that is easy to see and identify on the UI" as it is, we have adjusted the metrics and details to make it more natural.

Also https://wakamaifondue.com/

Is there a site or tool that can tell me the metrics for a font, e.g. the cap and x heights?

Simple and easy way to view the content of font files.

Mark Simonson
OpenType (and TrueType) fonts are made up of tables which hold various kind of font data, such as metrics, naming, hints, layout features, kerning, and character outlines.

The cap height and x-height are stored in the “OS/2” table under the entries “sxHeight” and “sCapHeight”. (Some fonts, especially older ones, may not have these two entries. They are not required.)

The values are relative to the UPM (units per em) of the font. Most fonts have a UPM of 1000 (OTF) or 2048 (TTF), but other values are possible. The size of the units in a font are relative to the size at which the font is displayed. The em is scaled to the font size. The UPM can be found in the “head” table in the entry “unitsPerEm”.

For example, a typical cap height value for a font with 1000 UPM is 700 units, or 70%. So if the font is displayed at 36-point, the cap height is 70% of 36, or 25.2 points.

There isn’t a tool or site I know of that shows just metrics, but there is a site that can show most of the data in a font, including metrics: FontDrop! The metrics are shown in the “Data” tab.

https://jkorpela.fi/x-height.html

Webfont icons — what typographers would traditionally refer to as dingbats — are an important part of modern web development. There are so many advantages to them:

Comment:
I've used https://icomoon.io for years, because of its great selection of free icon fonts and also because it's quite easy to import self designed svgs and turn them into glyphs. It's easy to use and all relevant functionalities are free of charge.

https://web.dev/optimize-webfont-loading/#customize-the-text-rendering-delay

What makes the proper font selection important for a website? The right typography makes your users take a call to action and increases your website's conversion rate.

Every Friday I recommend a typeface, write about for what digital appliations it works best, and where to better not use it. Subscribe to the Pimp my Type Newsletter and get them directly to your inbox.

Frequently asked questions about font redistribution

• We view creating graphic files as being essentially the same as printing from an output device.

Can I make a company logo using the fonts?

Unless you are using an application that is specifically licensed for home, student, or non-commercial use, we do not restrict you from making logos using the Windows-supplied fonts.

When can I use document embedding?

Font files contain flags that indicate if and how they can be embedded within a document file. Applications that support document font embedding look at these flags and determine if and how it may be embedded in a document file, and when they open a document containing embedded fonts, they will also look at these flags to determine if and how a document can be viewed or edited.

https://www.fonts.com/content/microsoft-typography