Jonathan DoeTypography
Typography
We did Typography based on Bootstrap. Easy to use and customize.
We love Typography.
- Easy to Use
- Based on Bootstrap
- Google Web Fonts
Google Web Fonts
Kode using Google Web Font. You can change your fonts only editing one line code.
General Font
Kode using general font as Open Sans.
Open Sans Light 300
Open Sans Light 300 Italic
Open Sans Normal 400
Open Sans Normal 400 Italic
Open Sans Semi-Bold 600
Open Sans Semi-Bold 600 Italic
Open Sans Bold 700
Open Sans Bold 700 Italic
Open Sans Extra-Bold 800
Open Sans Extra-Bold 800 Italic
General Options
We set it line height as 1.7em and default font size as 13px
Basic Colors
Theme Colors
Title Font
Title font is Montserrat. You can add anything as .font-title
Montserrat Normal 400
Montserrat Bold 700
Default
All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Headings with secondary text
Create lighter, secondary text in any heading with a generic <small> tag or the .small class.
h1. Bootstrap heading Secondary text
h2. Bootstrap heading Secondary text
h3. Bootstrap heading Secondary text
h4. Bootstrap heading Secondary text
h5. Bootstrap heading Secondary text
h6. Bootstrap heading Secondary text
Basic
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra metus a augue pellentesque aliquet. Duis id elit dolor. Pellentesque gravida molestie egestas. Phasellus neque leo, fermentum at lobortis nec, efficitur in ante.
Vestibulum enim diam, facilisis eu luctus vel, rhoncus in lectus. Vestibulum faucibus nec elit sed mollis. Vestibulum convallis tellus quis dictum convallis. Vivamus euismod nunc ut dolor finibus, eget gravida eros porta. Suspendisse eu lorem vel ex iaculis venenatis a ut lorem.
Vestibulum sed vestibulum neque, sed vehicula lectus. Nam a diam sollicitudin, gravida nisi quis, ultrices dolor. Vestibulum viverra dignissim mollis. Morbi consectetur rhoncus augue nec maximus. Quisque aliquam lacinia metus, a iaculis magna fringilla et. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Headings with secondary text
Make a paragraph stand out by adding .lead.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra metus a augue pellentesque aliquet. Duis id elit dolor. Pellentesque gravida molestie egestas. Phasellus neque leo, fermentum at lobortis nec, efficitur in ante.Fusce pharetra metus a augue
Marked Text
You can use the mark tag to highlight text.
Deleted text
This line of text is meant to be treated as deleted text.
Strikethrough text
This line of text is meant to be treated as no longer accurate.
Inserted text
This line of text is meant to be treated as an addition to the document.
Underlined text
This line of text will render as underlined
Small text
This line of text is meant to be treated as fine print.
Alignment classes
Left aligned text.
Center aligned text.
Right aligned text.
Justified text.
No wrap text.
Transformation classes
Lowercased text.
Uppercased text.
Capitalized text.
Stylized implementation of HTML's <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations with a title attribute have a light dotted bottom border and a help cursor on hover, providing additional context on hover and to users of assistive technologies.
Basic abbreviation
An abbreviation of the word attribute is attrInitialism
HTML is the best thing since sliced bread.692 Merry Poe Ave, Suite 201
San Francisco, CA 96540
P: (123) 456-7890 Full Name
first.last@example.com
- Home
- About Us
- Works
- Jobs
- Designer
- Front-end Developer
- IOS Developer
- Contact
- Home
- About Us
- Works
- Jobs
- Designer
- Front-end Developer
- IOS Developer
- Contact
- Home
- About Us
- Works
- Jobs
- Designer
- Front-end Developer
- IOS Developer
- Contact
- Home
- Works
- Jobs
- Contact
Default blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Naming a source
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Alternate displays
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Normal
- Donec lobortis justo at aliquet
- Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra
- Tempus imperdiet elit
- Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra
- Praesent interdum
- Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra
Horizontal
- Donec lobortis justo at aliquet
- Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra
- Tempus imperdiet elit
- Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra
- Praesent interdum
- Sed tincidunt pharetra ante, tempus imperdiet elit sodales id. Donec lobortis justo at aliquet luctus. Praesent interdum massa sed ex efficitur, vitae dignissim ante pharetra
James ThrowingLas Vegas
Fred StonefieldNew York
Chris M. JohnsonCalifornia
Allice MinghamLos Angeles
James ThrowingLas Vegas