Working with Menu Fonts in BoldGrid Crio

Your BoldGrid Crio menu fonts can be changed in the menu design section. Each Menu Location can have a unique font.

• Navigate to Customize → Design → Menus → Menu Location → Font → Typography

Here you will see a wide variety of Google fonts and styles to choose from, and we will go over what they each mean.

The Font Family simply means the name of the font. Each name is shown using it’s font so it’s easy to see what they look like. After selecting one the live preview will immediately update so you can see how it looks across your site.

While not all fonts will have a Variant, most will have at least one to choose from. While italics are great for drawing attention to text, be careful using it sitewide as it can be difficult to read in large amounts. The number variants, also called font weights, refer to how thin or thick the letters will be. For reference, regular is 400. The thinnest font weight available is 100 and the thickest is 900.

Font Size is entered in pixels, this is what the px at the end of the number stands for. Each font has a different size, therefore the default font size of 16 will be a different size when a different font is selected. Menus are commonly between 8 and 20. Don’t forget the px after the number!

Line Height refers to the vertical distance between rows of text. If your menu is one row it will only be visible on mobile. To see it, click the phone icon in the bottom right corner of the Customizer to view the site responsively. Next, click the hamburger menu to see the distance between links. Since your visitors will likely be using their finger to navigate your site when they see the menu like this, make sure you leave enough vertical height so the correct link is easily touched.

With Text Transform you can set all your menu links to visually have the same casing, regardless of how they were typed when the menu was created. What does casing mean? We’ll go over each style now, using these menu links as examples – “About our company” and “Contact us”.

• None is selected by default and displays each link exactly how it was typed at Customize → Menus → Menu Location
• Capitalize means the first letter of each word is uppercase, so the menu links would be “About Our Company” and “Contact Us”.
• Uppercase converts all letters to uppercase, so the menu links would be “ABOUT OUR COMPANY” and “CONTACT US”
• Lowercase displays all letters lowercase, our menu would have “about our company” and “contact us”

Keep in mind depending on the font, changing the Text Transform may have no effect.

Click Publish to save your changes and congratulations! You now have the information needed to work with menu fonts in BoldGrid Crio! Next, you may want to look into menu fonts changing link styles or colors.