Obsidian like iA Writer - the easy way

As a graphic designer I’ve tried out other Obsidian themes based on the acclaimed iA Writer, none of them ever come close to iA Writer’s minimalist philosophy. Always dissatisfied, I finally found a simple and beautiful solution.

How to set up your Obsidian like iA Writer the easy way!

The Trick

  1. Install the amazing Theme Yin-and-Yang by Chetachi
    GitHub - chetachiezikeuzor/Yin-and-Yang-Theme: An Obsidian.md theme with a stark contrast between dark mode and light mode, much like the Yin and Yang symbol ☯️.

  2. Install the Plugin Style Settings from Matthew Meyers
    GitHub - mgmeyers/obsidian-style-settings: A dynamic user interface for adjusting theme, plugin, and snippet CSS variables within Obsidian)

  3. Install the iA Writer Fonts on your computer
    Free trials of iA Writer, free templates and the Mono, Duo and Quattro fonts

  • iA Writer Quattro S
  • iA Writer Duo S
  • iA Writer Mono S
  1. Copy the code below
{
  "Yin and Yang@@l-accent": "#00BAFF",
  "Yin and Yang@@d-accent": "#00BAFF",
  "Yin and Yang@@base-h": 205,
  "Yin and Yang@@base-s": 18,
  "Yin and Yang@@base-d": 5,
  "Yin and Yang@@default-font": "iA Writer Quattro S",
  "Yin and Yang@@preview-font": "iA Writer Quattro S",
  "Yin and Yang@@header-font-pre": "iA Writer Quattro S",
  "Yin and Yang@@editor-font": "iA Writer Quattro S",
  "Yin and Yang@@header-font-ed": "iA Writer Quattro S",
  "Yin and Yang@@font-monospace": "iA Writer Mono S",
  "Yin and Yang@@l-blockquote": "#00BAFF",
  "Yin and Yang@@d-blockquote": "#00BAFF"
}
  1. Go to Plugin Option, select the plugin Style Settings and you will see that the plugin “Yin-and-Yang” has been identified.

  2. Just click Import option, after that just paste the code and save.

  3. Enjoy!

15 Likes

Thanks for this. What benefit do you find with IA Writer please?

1 Like

Instead of installing iA Writer just to get the fonts you can download them directly here: GitHub - iaolo/iA-Fonts: Free variable writing fonts from iA . One can read about their fonts over here in this blog post: iA Writer has three custom made writing fonts that are available for download

They are lovely fonts. I use them too.

2 Likes

For the use of the IAW specifically the benefits are aesthetic

  1. useful minimalist interface
  2. But the main thing for me is when I generate a PDF for reports this file is extremely beautiful and minimalist.

Only now I can use these two benefits in OBSIDIAN, in its interface and when I generate a PDF.

1 Like

Works great. Many thanks!

Edit: For some reason iA Writer Quattro S is always ‘bold’ on iPad, so I changed it for iA Writer Duo S, to have consistency between my desktop and iPad.

1 Like

I noticed the same thing. I managed to work around it by using https://transfonter.org/ web site to convert them, and adding the generated CSS to my theme CSS. Admittedly it pushed up the size of the theme CSS to 5mb (!), but hey, I find it to be worth it as it now looks good on both my iPad and my iPhone too.

1 Like

Thanks for the tip! I will try it

@valantien Sir, thank you. This is a fantastic setup. Now, “iAWriter” works as it should :sunglasses:.

1 Like

PKM brazilians user have to help each other :wink:

1 Like

@valantien Hi,

  1. How can I set headings size < 1, for h4, h5, and h6? (the plugin minimum heading size is 1 …)
  2. How can I set headings h2 and h3 with bottom-border-style solid, width thin?

Disclaimer: I’m not sure what “plugin minimum” you refer to. However, otherwise:

You could open the .css file for the theme you are using, scroll to the bottom and add any custom css rules you’d like. I wouldn’t recommend that though as those additions will disappear if you update your theme.

Otherwise you can add a custom .css file yourself and put it within the vaultroot/.obsidian/snippets folder. Name it whatever you like, for example “secondbrain.css” or “mycss.css”.

In that file you can add any of your own customisations without them being overwritten in for example a theme update or something. Also, under (Obsidian) Settings → Appearance (scroll to the bottom) you need to enable your custom css file.

Normally within the themes there are also variables being set. This is to ensure that your styled elements are legible in dark/light theme settings. You can set your colors to a variable value and it will follow the theme. You can also instead set your colors to fixed color values if you know you’ll be happy with that.

In your custom CSS file you can add for example:

h1 {
	font-size: 1.6em; /* Change size to what you like */
}

h2 {
	font-size: 1.4em; /* Change size to what you like */
	border-bottom: 1px solid #666; /* change #666 to colour of your liking. #f00 is red. #0f0 is green. #00f is blue. #666 is grey. */
}

h3 {
	font-size: 1.2em; /* Change size to what you like */
	border-bottom: 1px solid #666; /* change #666 to colour of your liking. #f00 is red. #0f0 is green. #00f is blue. #666 is grey. */
}

h4 {
	font-size: 1em; /* Change size to what you like */
}

h5 {
	font-size: .8em; /* Change size to what you like */
}

h6 {
	font-size: .6em; /* Change size to what you like */
}

The size values can be even more granular, like “0.45em” or “1.37em” too if you need them to.

Just remember that if you change your theme and you still have custom css file enabled, they will still be active if you change theme.

1 Like

Hi @Hellquist !

Followed your instructions to the letter, to no avail.
Thank you anyway.

What theme are you using? Some themes have, naughtily, set “!important” to some values, even though that should be avoided. That means it will override declarations made later in the “flow” (css is basically read from top → bottom, and the last declaration of something is what “wins”…unless something has been set with “!important”).

Did you create a custom .css file and enabled it under appearance?
Also, I just realised, after creating a custom .css file, enabling it and then adding things to it, you are quite likely forced to restart Obsidian for it to pick up the new additions/changes, otherwise the old (and empty) .css file will be cached.

The theme is Yin Yang, with the “iA Writer settings” described above by @valantien.

If you want to use the iA Writer fonts on iPad without running into the bold issue, the best way to do it is probably to just Woff2-compress & base64-encode the variable fonts (rather than the static ones, which are larger) and include them as snippets.

Put simply—download the snippets from this gist and set the font-family to "iA Writer Quattro V" (or "iA Writer Mono V" etc). It’ll automatically detect and handle bold & italics. Only 136kb/variation which is super slim.

3 Likes

Hey!
I like that Theme, thanks!

One question: How can I set up the full-width? It does not work, I already switched off the strict line limitation, but it’s centered. Any solutions?

Thanks!
Christian

Are you talking about the “Readable line length” setting, which is in Settings under Editor > Display? Are you saying that you already turned that option off?

I am having the exact same issue as of today. I also first checked the readable line length but that did not solve it.

1 Like

In the Style Settings plugin, there is an option in the Typography section to change the readable line length.

3 Likes

Thanks!