Typography settings

With Flothemes we give you maximum flexibility with your Font options. With Porto we have 4 typography areas,  Base Fonts, General Typography, View Typography, and Heading Typography. For each font you can select the desktop font size, mobile font size, line height, letter spacing and colors.

The base typography setting is usually enough for most users. It will allow you to update your entire site, by just selecting 4 fonts. Its recommended to use these settings when styling the site.

If you feel you need greater control there are 3 advanced fonts sections, in each section you have numerous font, size, and family styles for your website typography. From the labels and hints  for most of the options you should understand what element each option is linked to. For elements that we think are not that simple to find, we added help images that show you where this is used. You can check the help images by clicking the help icon.

There are many settings related to each Typography options which can be seen in the image below:

Screen Shot 2015-06-23 at 4.28.39 PM

There may also be some specific typography settings found under other sections, for example under Slideshow or Header sections, as they are specific to those areas.

Base Fonts

The base typography setting is usually enough for most users. It will allow you to update your entire site, by just selecting 4 fonts. Its recommended to use these settings when styling the site. Most brand guides will use up to 4 fonts, so here you can easily implement the options required.

Flothemes_Options_‹_Porto_—_WordPress

General Typography

The general typography section includes the general font for the site, thats the main body text, and then page and post titles, not including the grid views. Remember to click the gold ? if you want to see where the font is used.

general-typography-flothemes-porto

View Typography

The view typography section, is for anything related to Grids (titles and meta data), basically the different view types for the latest posts type pages. It should be separated into sections with a label what each section is for. Remember to click the gold ? if you want to see where the font is used.

Cursor_and_Flothemes_Options_‹_Porto_—_WordPress

Heading Typography

The heading typography setting is used if you want to create some custom heading options for inside pages and posts. That is from H1 to H6 tags. This is great for allowing you to build out additional on page styling. Remember to click the gold ? if you want to see where the font is used.

heading-typography-porto

Porto Style 1

The following fonts are used to build out the style kit for Porto Style 1. All the fonts can be downloaded for free in your account page, under the main theme download file.

 

Porto Style 2 - Editorial

The following fonts are used to build out the style kit for Porto Style 2 – editorial. All the fonts can be downloaded for free in your account page, under the main theme download file.