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!
{
"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"
}
Go to Plugin Option, select the plugin Style Settings and you will see that the plugin “Yin-and-Yang” has been identified.
Just click Import option, after that just paste the code and save.
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.
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.
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.
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.
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.
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?