Skip to content

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
    • Help
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
D
design
  • Project
    • Project
    • Details
    • Activity
    • Releases
    • Cycle Analytics
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Charts
  • Issues 20
    • Issues 20
    • List
    • Board
    • Labels
    • Milestones
  • Merge Requests 0
    • Merge Requests 0
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
    • Charts
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Charts
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • pubsweet
  • design
  • Issues
  • #2

Closed
Open
Opened Jan 11, 2018 by Yannis Barlas@yannis
  • Report abuse
  • New issue
Report abuse New issue

Typography variables

The purpose of this issue is to come up with a common list of typography variables for theming in pubsweet applications.

Size variables

Elife asset name Elife suggested variable Coko suggested variable Vanilla variable Notes
Body $font-size-base-in-px $font-size-base Base measure to set hierarchy from
Scale $font-size-scale This variable is used to calculate the font size of all elements. Check this link for example http://type-scale.com/
h1 $font-size-h1-in-px $font-size * 2 This font-size should be based on the scale and the font-size-base, meanwhile, the calculation here is a example of how it could work. (using rem should achieve the same result, but break if we use different font for the body and for other elements, as x-height is different -- check the ressource: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
h2 $font-size-h2-in-px $font-size * 1.6
h3 $font-size-h3-in-px $font-size * 1.3
h4 $font-size-h4-in-px $font-size * 1.0
h5 $font-size-h5-in-px $font-size * 1.0
h6 $font-size-h6-in-px $font-size * 1.0
p inherited from the parent element. For example, if the p is part of an interface element, it will get the $font-interface value as it will be used by the parent.
li inherited from the parent element. For example, if the p is part of an interface element, it will get the $font-interface value as it will be used by the parent.
ol inherited from the parent element. For example, if the p is part of an interface element, it will get the $font-interface value as it will be used by the parent.
label (form) inherited from the parent element. For example, if the p is part of an interface element, it will get the $font-interface value as it will be used by the parent.
a $link-font-family, $link-color, $link-font-style, $link-font-weight, $link-underline-color Link need some styling to be different from the content, let's add some variable that you can change for the link and see what's missing from there.

Typefaces variables

Elife asset name Elife suggested variable Coko suggested variable Vanilla variable Notes
Primary font style $font-primary Collabra font variables are named based on what the font is refering to. Check below.
Secondary font style $font-secondary
Contextual label $font-contextual-label
Date $font-contextual-label-date Treated as part of the label
Section label $font-section-label
Teaser header $font-teaser-header
font family set for the whole app
Author font $font-author This font will be used for all the element that the author work on: manuscript and form to submit.
Reviewer font $font-reviewer This font will be used for all the element that the reviewer work on: reviewing draft and review letter.
Interface font $font-interface This font is the one use for all the interface element

@julientaq @Nick

Edited Jan 15, 2018 by julien
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
No due date
1
Labels
theming
Assign labels
  • View project labels
Reference: pubsweet/design#2