The style settings have all the settings related to the appearance of the timeline. It has settings related to text and layout from text-size to color and spacing.
Colors & Typography Settings: Color & Typography settings are available under
1.) Story Timeline >> Style tab >> Colors & Typography Settings.
2.) Story Timeline >> Style tab >> Extra Settings.
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 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 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 in 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.
Space Settings is inside Extra Settings.
As you can see in the screenshot below, this setting will help you to adjust space between each story in the timeline. It actually adjust the space at the bottom of the each story.