Custom Style Settings For Obsidian

Font

The primary font used for all body text and headings in this theme is Vollkorn. It's an elegant and highly readable serif font designed for digital and print use.

Download Link: You can download the Vollkorn font family from Google Fonts here: Vollkorn on Google Fonts

Style Settings Plugin Configuration

To achieve the desired look, we made several specific adjustments within the Style Settings plugin. The main goal was to override some of the plugin's default styling to allow our custom CSS to take priority and to fine-tune the typography.

• Paragraph Line Height & Width: This was adjusted to 1.53 to create optimal spacing and readability for body text. The line width has been updated from the standard 700 pixels to 850 to make it more readable on a wide screen.
• Text Bold & Italic Colours: These have been updated to 699ADA and 6E6F9A.
• Heading Font Weight: The font weight for all heading levels (H1 through H6) was set to 400, which corresponds to a normal weight. This removes the default bolding for a cleaner, more minimalist appearance.
• Heading Colours: Any custom colour options for headings within the plugin were disabled or cleared. This allows the theme's base text colour to apply to the headings, ensuring consistency.

/* --- PREVIEW MODE --- */

/* Center H1, H2, and H3 headings in Preview */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3 {
    text-align: center;
}

/* Add an underline to H1 headings in Preview */
.markdown-preview-view h1::after {
    content: '';
    display: block;
    width: 100px;
    border-bottom: 1px solid var(--text-normal);
    margin: 0.5em auto 0;
}


/* --- EDIT MODE (Live Preview / Source) --- */

/* Center H1, H2, and H3 headings in the Editor */
.HyperMD-header-1, .cm-line .cm-heading-1,
.HyperMD-header-2, .cm-line .cm-heading-2,
.HyperMD-header-3, .cm-line .cm-heading-3 {
    text-align: center;
}

/* Add an underline to H1 headings in Editor */
.HyperMD-header-1::after, .cm-line .cm-heading-1::after {
    content: '';
    display: block;
    width: 100px;
    border-bottom: 1px solid var(--text-normal);
    margin: 0.5em auto 0;
}

Preview