Setup Receptive

Manage typography

Typography is probably the most complicated and confusing aspects of designing your website, regardless if you are using a theme that has font and typography management options. This is a very big topic when you take in account what fonts involve:

  • font family
  • font size
  • font style
  • font weight
  • line height
  • letter spacing
  • font variant
  • colour

Then we get into other things that relate to the above list like font sizes:

  • pixels (px)
  • percent (%)
  • em
  • rem
  • initial

If you want to read more about fonts and attributes, you can check out the W3schools website:

W3Schools Fonts

Fonts can be overwhelming, especially when we are dealing with literally 1000’s of fonts and font families. But it doesn’t just stop there, we also have to take in account that not all fonts are compatible with every language on the planet. 

I know many theme users like to have at least some control over fonts and/or attributes associated with the theme they use. Not all themes have extra fonts, while some people will use font plugins instead. Generally the better solution because with a plugin, you can use your fonts if you change themes, but they often include extra font features and settings you can use compared to what a theme offers.

Theme Typography Management

This theme includes some font management which is found in the Customizer. This quick tutorial will give you an introduction to what you can do with fonts, but you can still override fonts and styling with your own — you don’t have to use the theme’s typography options.

  1. Go to Appearance >> Typography Options
    typography setting
  2. If you need to use “Cyrillic” fonts, you can enable that setting, but you will need to make sure the font you use supports it. Right now, Receptive uses the Google font called Oswald for the headings and titles, but uses Arial and/or Helvetica for the main body font.
    cyrillic setting
  3. You have the option to add two more Google Fonts. Make sure you enter the Google font name as the name is shown at Google. For example, if you want to use Ubuntu Condensed, you would add that to the Google font field like this:
    google font1google font2
  4. Click “Save & Publish

IMPORTANT Whenever you change the font to an element with your own CSS, make sure for fonts that contain more than one name, such as “Helvetica Narrow”, that you wrap the name with double quotes like you see below:

font-family: Oswald, “Helevtica Narrow”, Arial, Sans-serif;

Custom CSS for the Site Title

The site title (when using a text based site title and no logo) uses the Google font Oswald, but you can change it, but make sure you add more options in case someone visiting your website does not see that font, instead Helvetica Narrow will be used–if not that one, then it goes to the next, which is Arial:

.site-title {     font-size: 2rem;     font-family: Oswald, "Helevtica Narrow", Arial, Sans-serif;     letter-spacing: 1px;
}

Custom CSS for Headings

If you want to use your own font for headings and page titles, here is the starter CSS code you would use for your h1, h2, h3, h4, h5, h6, and also for a few additional headings I added called display-1, display-2, etc:

h1,h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5 { 	font-family: Oswald, "Helevtica Narrow", Arial, Sans-serif; 	color: #333; 	font-weight: 400; 	line-height: 1.2; }

Custom CSS for the Main Body Font

This is the main body font for posts and pages. Currently, this theme uses “Arial” as the body font, so if you want to change that, make sure you add alternate choices as well:

body {     font-family: Arial, "Helvetica Neue", sans-serif;     line-height: 1.5; }

Custom CSS for Widget Titles

Widget titles use the Open Sans font. To change widget titles, use this as your starting point:

.widget-title {     font-family: Oswald, "Helevtica Narrow", Arial, Sans-serif;
    font-size: 1.313rem;     font-weight: 400;     line-height: 1.2; }

Custom CSS for Main Menu Font Styling

The main menu inherits the body font, in this case, Arial. But if you want to change the font sizes and other font attributes outside of the typography option settings, use this as your starting point:

.main-navigation li {     font-size: 0.875rem;     letter-spacing: 1px; }

NOTE If you need to edit the submenu font or typography sizes etc., then you can do this:

.submenu li {     font-size: 0.875rem;     letter-spacing: 1px; }

Font Sizing

You might notice I use “rem” as my font size unit, such as this example from the Typography Option settings. In the old days, people used “px” as the size unit, but with responsive sites and the need for accessibility, we need to use “relative” sizing like:

  • em
  • rem
  • %

If you want to know what rem’s convert to in pixels, and vice versa, you the following online tool to make the conversion:

Px to EM

This online tool is actually px to em (not rem), but you can still use the same value for em as rem.

Where to Add Custom CSS for Typography Changes?

You have three (3) choices:

  1. Child Theme – if you are using a child theme for more than just CSS customization, you would add your code to the child theme’s style.css file
  2. Jetpack – If you are using Jetpack, you can use its own “Custom CSS” feature.
  3. Plugin – Or, you can use a popular plugin called “Simple Custom CSS“. 

 

 

Create Banner Images for pages

This theme comes with three (3) types of image banners; actually 2 plus a WP Header Image feature which is like a banner image but is part of the header styling. Let’s start with the WP Header Image that the demo front page current shows and has an overlay with header text on top. This will be similar to a banner image we will talk about shortly:

Custom widget styles

By default, WordPress does not offer any kind of widget styling other than plain basic looking widgets in a page. Unless a theme provides you with its own custom default styling, we are at the mercy of using a plugin to achieve this — which is actually a good thing.

Add breadcrumb navigation

This theme includes a sidebar that is special for those who want to run their site with breadcrumb navigation. This tutorial will help you get this setup. Normally I recommend using the popular Breadcrumb NavXT plugin, but you can use any plugin you want, but I would look for one that has a widget you can use in the theme’s “Breadcrumbs” sidebar position. This makes it easier than opening a theme file to modify it with code that some plugins instruct.

Customize your theme colours

As it is a common feature with all of our themes here at Shaped Pixels, you can customize your colours with a ton of selectors that are found in the Customizer. Although most elements can be customized, there still may be a few that don’t have selectors, so creating some custom CSS might be required.

Blog style and options

This theme comes with several blog styles that you can take advantage of, including a few extra customizing options for various elements relating to the blog. More on this in a moment, but to get started, we will look at our blog styles in relation to the screenshots you see below.