In case you opt for a text logo, Materialis gives you the possibility to customize it like a pro. In case you already have an iconic logo, you will insert it and customize its appearance from another section in the customizer, that is in General Settings -> Site Identity.
To access the section dedicated to text logos, in the Customizer, click on Navigation -> Site Logo.
Front Page Logo Settings/Inner Page Logo Settings
Note that you can differentiate between the appearance of the text logo on the front page and its appearance on the inner pages. The options are the same, but you can use them to alter the visual aspect of the logo so that the text logo on the inner pages differ from the text logo on the front page.
Thus, the text logo takes form and is molded into the pages for a perfect design coherence.
Text Logo Color
Click on the drop-down arrow next to the color box, to visualize the colors spectrum. Adjust the brightness, shade and saturation of one preferred color, then choose it for your text logo.
Sticky Nav Text Logo Color
This option defines the color of the text logo as it appears when the navigation sticks to the top, while the users scroll down the page.
Like in the previous case, you have to click on the drop-down arrow next to the color box, to visualize the color spectrum. Select the color, set its luminosity, shade and saturation degree, and choose the newly defined color for the text logo when the navigation bar sticks to top, in scrolling mode.
Text Logo Typography
A third option allows for further customization of the text logo. It refers to typography settings.
Depending on the page you want to customize the logo for, you will access Text Logo Typography in the Front-Page Logo Settings or Inner Page Logo Settings.
By pressing Text Logo Typography, a panel will open with the different text customization options:
- Font-Family
It defines the design of the text. You can choose among about 5 designs or add a web font of your preference. The blue button “Add Web Font” will allow you to supplement the current list of font families.
- Variant
It defines whether the text is shown as normal text, or in bold letters, or in italics.
- Subset
This option is valid only for Inner Page Logo Settings. It is useful if you want to keep the main font-family, with subtle variations on the inner pages. These variations can be defined by the font-family subset.
- Font Size
It defines the dimensions of the font, and it is expressed in rem units.
- Mobile Font Size
It defines the dimensions of the font, on mobile devices. This option allows for further customization, in case you want to make the website fully responsive for mobile devices.
- Line Height
It defines the amount of the space above and below the inline text. It is recommended that the line height should be about 25% to 30% more than the inline elements height, for optimal legibility of the text. The values are expressed in percentages.
- Letter Spacing
It defines the distance (spacing) among the letters that compose the text. The values are expressed in pixels. The higher the value, the more spaced the text will be.
- Text Transform
It refers to capitalization options. The text can be set to uppercase, lowercase, capitalized, etc.