This document serves as a jumping off point for Bible typography on mobile devices. These rules should be seen as a starting point and it is almost guaranteed that tweaks will need to be made to these baseline rules.

gather-basic-typography.md

Basic Rules for the Gather Bible Reading Experience

• Bible font is Noto Serif Regular
• All paragraphs and h1-h6 headings should be block level elements
• Spans within a paragraph should be inline elements

SECTION HEADINGS (H1-H6)

• 20dp size
• 1.2x line-height with an 18pt space above and below any other element.
• Color #232D3A or rgb(35, 45, 58).

BODY

• Body text should NEVER be right and left justified.
• 17-ish dp/sdp/px :p . If we can be close to 40-50 characters per line as a default. When user controls for text size are not present you should lean to the large side of font size.
• Line spacing (leading) is at least 1.4x
• Indent first line 18dp. If this is not optimal/possible 1.5x line-height space should be used between paragraphs.
• Color #232D3A or rgb(35, 45, 58).

VERSE NUMBERS

• 14dp
• 5dp baseline shift.
• Color #9B9B9B (rgb(155, 155, 155)
• NOTE: It is also possible to simply use the "superscript" feature of the font. But this will need to be tested and approved.

---

Merged CSS Rules for a later date when we are ready to process and define these styles.

* {
font-family:"Noto Serif";
}

.c {
font-size:21px;
font-weight:bold;
text-align:center;
}

.ca {
color:#999;
font-style:italic;
font-weight:normal;
}

.ca:after,.va:after {
content:")"!important;
}

.ca:before,.va:before {
content:"(";
}

.cd {
font-style:italic;
margin-left:16px;
margin-right:16px;
}

.cl,.imt {
font-weight:bold;
text-align:center;
}

.d {
font-size:inherit;
font-style:italic;
letter-spacing:normal;
text-align:center;
}

.f {
display:block;
}

.fk {
font-style:italic;
font-variant:small-caps;
}

.fl {
font-style:italic;
font-weight:bold;
}

.fv {
color:#737373;
font-size:.75em;
font-weight:bold;
letter-spacing:-.03em;
line-height:0;
vertical-align:.25em;
}

.h {
font-style:italic;
text-align:center;
}

.ili2 {
margin-left:2em;
margin-right:16px;
}

.im {
text-indent:0;
}

.imi {
margin-left:16px;
margin-right:16px;
text-indent:0;
}

.imq,.iq,.ili1 {
margin-left:16px;
margin-right:16px;
}

.imt,.imt1,.imte,.imte1,.ms3 {
font-size:1.4em;
}

.imt2,.imte2 {
font-size:1.3em;
}

.imt3,.imte3 {
font-size:1.2em;
}

.imt4,.imte4 {
font-size:1.16px;
}

.io,.io1,.pm,.pmc,.pi {
margin-left:16px;
margin-right:0;
}

.io2,.pi1,.li2,.q3,.qm3 {
margin-left:2em;
margin-right:0;
}

.io3,.pi2,.li3 {
margin-left:3em;
margin-right:0;
}

.io4,.pi3,.li4 {
margin-left:4em;
margin-right:0;
}

.iot {
font-size:1.16px;
font-weight:bold;
margin-top:18px;
}

.ipi {
padding-left:rhythm(1);
padding-right:rhythm(1);
}

.ipq {
font-style:italic;
margin-left:16px;
margin-right:16px;
}

.ipr {
text-align:right;
text-indent:0;
}

.iqt {
font-style:italic;
text-indent:16px;
}

.k,.bdit {
font-style:italic;
font-weight:bold;
}

.lit {
font-weight:bold;
text-align:right;
}

.m {
text-indent:0!important;
}

.mi {
margin-left:16px;
margin-right:0;
text-indent:0;
}

.mr {
font-size:.9em;
font-style:italic;
font-weight:normal;
margin-bottom:16px;
text-align:center;
}

.ms,.ms1 {
font-size:1.6em;
}

.ms2 {
font-size:18px;
}

.mt,.mt1 {
font-size:2.8em;
}

.mt2 {
font-size:1.6em;
font-style:italic;
font-weight:normal;
}

.nd,.sc {
font-variant:small-caps;
}

.no {
font-style:normal;
font-weight:normal;
}

.notelink {
padding:.16px;
text-decoration:underline;
}

.notelink + sup:before,.fv:after {
content:"\a0";
}

.pc {
text-align:center;
text-indent:0;
}

.pmo {
margin-left:16px;
margin-right:0;
text-indent:0;
}

.pmr,.cls {
text-align:right;
}

.pn {
font-weight:bold;
text-decoration:underline;
}

.q2,.qm2 {
margin-left:18px;
margin-right:0;
}

.q4 {
margin-left:2.5em;
margin-right:0;
}

.qa {
font-size:1.16px;
font-style:italic;
margin-left:0;
margin-right:0;
text-align:center;
}

.qac {
font-style:italic;
margin-left:0;
margin-right:0;
padding:0;
text-indent:0;
}

.qc {
text-align:center;
}

.qr {
font-style:italic;
text-align:right;
}

.qs {
font-style:italic;
text-align:right;
}

.r {
font-size:.9em;
font-style:italic;
font-weight:normal;
letter-spacing:normal;
text-align:center;
}

.rq {
font-size:.85em;
font-style:italic;
letter-spacing:normal;
line-height:1.9;
padding-left:rhythm(0.5);
}

.s,.s1 {
font-size:1.16px;
font-weight:bold;
letter-spacing:normal;
text-align:center;
}

.s2,.s3,.s4 {
font-size:inherit;
font-weight:bold;
letter-spacing:normal;
text-align:center;
}

.sig {
font-style:italic;
font-weight:normal;
}

.sp {
font-size:inherit;
font-style:italic;
font-weight:normal;
letter-spacing:normal;
text-align:left;
}

.sr {
font-size:inherit;
font-style:italic;
font-weight:normal;
letter-spacing:normal;
text-align:center;
}

.tr {
display:table-row;
}

.va,.xk,.xq,.fq,.ior,.bk,.dc,.sls,.tl,.em,.it,.qt {
font-style:italic;
}

.wj {
color:#C00;
}

.xo,.fr,.bd {
font-weight:bold;
}

.ip,.iq2,.iex,.p {
text-indent:16px;
}

.ili {
padding-left:16px;
text-indent:-16px;
}

.is {
font-size:17px;
font-weight:bold;
text-align:center;
}

.li,.q {
margin-left:16px;
margin-right:0;
padding-left:16px;
text-indent:-16px;
}

.ms {
font-weight:bold;
letter-spacing:normal;
line-height:1.2;
text-align:center;
}

.mt {
font-weight:bold;
letter-spacing:normal;
text-align:center;
}

.p + .s, .p + .s1,.q + .s, .q + .s1 {
margin-top:18px;
}

.tc {
display:table-cell;
}

.th {
display:table-cell;
font-style:italic;
}

.thr,.tcr {
padding-right:18px;
text-align:right;
}

.v {
font-size:14px;
font-weight:bold;
letter-spacing:-.03em;
line-height:0;
top:inherit;
vertical-align:.25em;
}