Video
If you open the video on Youtube, you can find the chapters of the different settings in the description.
Choosing font family
You can choose between what is called the web safe fonts, that are in all browsers and between Google fonts. The Google fonts are loaded automatically, so all the new ones should always be there. After you choose the font, you can also choose the font weight. These weights are also automatically loaded. In case you don’t see all the weights, try to choose a different font and then go back to the one you liked.
Main font style
You can choose between regular and italic style.
Colors and link decoration
You can choose the color of your font, the link color and the hover. You can also choose if the links are underlined, line-through or no decoration at all.
Line height and letter spacing
Choose the line height and letter spacing. So basically the space between letters on vertical and horizontal axis.
Heading sizes
Minimalio uses modern approach when it comes to typography/heading sizes. So, the headings have certain size on desktop, they get progressively smaller on smaller viewports and stop at some point to look good on mobile. The Heading scale defines the sizes on desktop, the bigger the scale, the bigger differences there are between the headings.
Transcription of the video
Hi there! Today, I’d like to talk about typography. Most of it is pretty straightforward, but some aspects might be a little confusing, so I’ll guide you through it.
In the Minimalio options under ‘Typography,’ you have control over most of the typography settings you’ll need. First and foremost, you can choose your font. Minimalio automatically loads all Google Fonts, including any new additions. You also have the option to select different font weights, which are automatically fetched from Google Fonts. At the top of the list, you’ll find standard web-safe fonts, and then you can scroll through an extensive list of Google Fonts. For example, if you choose ‘Roboto,’ all available font weights for that font will appear. You can select a classic weight, like 400 (regular), and it will automatically update in the preview. However, not all changes will show immediately in the preview, so you might need to publish and check the live site.
You can also toggle between regular and italic styles for all text. The main font color is pretty self-explanatory.For link styling, you can set the link decoration. I recommend keeping it underlined, as this is the standard and helps with accessibility, particularly for people with color blindness who might not see color differences as clearly. Other options include ‘line-through’ or no decoration, but these might not be as user-friendly. The link color and hover link color settings allow you to define how links look in their default state and when the user hovers over them. The hover link color creates a nice visual cue.
Line height controls the space between lines of text. A good range is between 1.3 to 1.8, with 1.5 being a solid standard. Letter spacing affects the spacing between individual letters, which can help with readability or create a specific design style.
The heading size type scale is a bit more advanced. This setting defines the sizes of headings using a scale, which is helpful for responsive design. For example, if you choose a scale of 1.414, the heading sizes will adjust proportionally across different devices. On desktop, the headings will be much larger, while on mobile, the scaling will stop at a certain point to maintain readability.
And that’s it! These typography options offer a lot of flexibility to create a polished and accessible design. Thanks for watching!