Manage Formatting: Type Scale and Font-Weight

[mjl]

Context

Where ever I have worked, typography is never a big focus as it relates to brand, or improving Customer experience. But typography is something that some of the most iconic and impactful brands have put much effort into nailing it. For example, Apple, NASA, the list goes on for a while.

Idea

I know there is a “minimal” theme and there’s a styles plugin, but 1) the styles plugin…it’s a hot mess, let’s be honest, accordion drop downs and trying to understand the nomenclature requires referencing the Obsidian help guides. 2) getting your typography settings tuned in shouldn’t take days—and I’m assuming that for many users, fiddling with CSS is not a productive use of time. So…how come we can’t get a plug-in that allows users to effortlessly adjust their type scale and font-weight with a few sliders or minimal options?

Inspiration

I’ve worked in the design space for, oh, just over 12 years. As a creative director, locking in a solid type scale keeps any brand in step and harmonized. A online tool that comes close to what I’m envisioning is: https://typescale.com/. Example:

Problem (my problem)

I don’t have time or the expertise to develop such a plugin. But I wanted to share here with you great folks.

Hope

My hope is that there is some awesome developer out there that has the same bone-to-pick as I do with Obsidian’s control over the UI’s type scale.

Very best,
MJL

[blue_emperor]

I’m just adding some related stuff.

Font Smoothing in Webkit and Firefox

In Obsidian you can use this CSS snippet to enable font smoothing:

.theme-dark {
  --bold-weight: 700;
  -webkit-font-smoothing: antialiased; 
}

.theme-light {
  --bold-weight: 700;
  -webkit-font-smoothing: antialiased; 
}

I also included bold-weight which you could set to 800 or 900 in dark mode. In light mode 700 bold weight looks pretty nice.

[mjl]

That would be nice feature to include in the plugin: Font Smoothing on/off

[matchavez]

Let’s make it simpler than all of this – this should be a Feature Request.

The Font manager in Appearance needs to accept standard text variations, and not force users to create custom CSS.

[mjl]

I’ve been tinkering to develop my first plugin, called TypeScale, though it would do more than just set the TypeScale. Right now, I’m working on scaling everything from a base font size to body text/copy. Then, using scale ratios and from there allowing some fine-tuning by the user. Maybe someday… I’ll get it published to the community plugs for everyone.

[mjl]

your example would seems very sophisticated but user friendly. I’m not sure how a plugin could pull in fonts but would be cool if it could look at the machine’s installed fonts, but I’m going to guess that there would need to be a font loader within Obsidian.

[matchavez]

@mjl For clarity, I think this might belong at a core level of Obsidian. Most applications allow you to select a font by using the built-in font selection system. Obsidian doesn’t because Windows, etc., but I have a hunch they could just create the CSS like they are now but add a few parameters that allow it to make sense. e.g. when you select semibold, it sets the CSS to font-weight 600, and that is what’s captured on the “list”.

[mjl]

Well, I’m sure many would agree with you. However, I kinda like the purity of Obsidian over that of highly sophisticated applications. I think that’s what make it appealing for so many. I personally enjoy that there are standard Obsidian plugins that can simply turned off. But as you mentioned, many other apps allow basic options, many may agree with you.

I have already started on my plugin. Not sure if I’ll ever get it pushed to the community. This covers my personal itch to have some control over type scale in general and a few other touch’s like header color options.