The Style tab has all the settings related to the visuals of the timeline. You can change everything from story/post font to background color, icons etc. These settings work for the whole timeline and for all stories unless story/post specific settings are changes to something else. The video tutorial below, represent the settings and their effect on the timeline.
Typography Settings: The first group of settings you’ll see on the style tabs is typographic settings. you’ll find all the text related settings here. Let’s have a look at the screenshot and we’ll discuss each setting in details after that.
All the settings here are actually the text elements presented on the timeline. For example, you’ll find Year/label typography, story label/sub label, title typography and so on. All text elements have almost the same typography settings. Instead of discussing typography for each element, let’s have a look at typography settings only. You only need to get a general idea about typography settings and you’ll have a fine understanding of using these settings for all text elements.
Typography Settings Fields:
- Family: You may be already familiar with this field. The family (font-family) will let you choose from different font’s available on your website. You’ll see a long list of available fonts here and you can choose any one of them.
- Size: This field will let you adjust the font size. You can adjust the font size using four different size unit: PX, EM, REM, VW.
- Weight: This field let you set the stroke design of the font. For example, generally selecting the higher number like 600 will make the font bolder and a smaller number like 200 will makes the font looks thinner. You can try out this as it may work differently for different fonts.
- Transform: This setting will let you change the text from the original formation. There are three different options available for transforming a text:
a) Uppercase: It will uppercase all the letters in the text.
b) Lowercase: it will lowercase all the letters in the text.
c) Capitalize: Choosing this option will only uppercase the first letter of each word and keep the rest of the letters as they are.
d) Normal: This will leave the text in its original format without changing anything.
- Style: This field has three option to style the text. Italic, Oblique and Normal. As the name is: italic and oblique style the text accordingly and normal will leave the text as it is.
- Decoration: This field has three options available to decorate a text differently.
a) Underline: It will add a line under the text.
b) Overline: It will add a line over the text.
c) Line Through: Choosing this option will strike the text over with a line.
- Line Height: If you are familiar with the CSS, you have already got an idea about this. This field will let you adjust the height of the line where the text is added. Make sure the line height is not less than the font size.
- Letter Spacing: This setting can be used to adjust the space between each letter.
Don’t forget to check the video tutorial below for the clear understanding.