The UbuntuOne site is shutting down.
top
Typography
Ubuntu font family
The Ubuntu font has been carefully designed, hinted and kerned to provide the best experience and legibility on screen.
For more information about the Ubuntu font family, visit font.ubuntu.com.
Body copy
Text is set in Ubuntu. The default
<body> and <p> font-size is 16px with a line-height of 1.5.
body, p
{
font-size: 16px;
line-height: 1.5;
}
Bold
Use
<strong> to emphasise a snippet of text with a heavier font-weight. For example: Example: Ubuntu is free.
Code:Ubuntu is <strong>free</strong>.
Headings
This is the typographic scale that should be used on all *.ubuntu.com websites.
h1. Ubuntu Light 45px
h2. Ubuntu Light 32px
h3. Ubuntu Light 23px
h4. Ubuntu Light 20px
h5. Ubuntu Regular Bold 16px
h6. Ubuntu Regular Bold all caps 13px
Note: Even if you are using relative units to set your type on the web, you should still follow these typographic scales. For example, if your
body element is set to have a font size of 62.5%, and your h5 a font size of 1.2em, the computed value of the h5 font size is still going to be 16px.
Google Fonts API
You can use the Ubuntu font family via the Google Font API. The Google Font API is a cross-browser system that allows you to embed fonts on your sites without having to worry about what fonts your visitors have installed locally.To link to a font from the Google Fonts API using a standard stylesheet LINK element, place the following at the top of the HEAD section of the document...
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'/>
To link to the Google Fonts API from within a CSS style-sheet, use the
@import directive, this:
@import url(http://fonts.googleapis.com/css?family=Ubuntu&subset=latin,latin-ext);
Rounded corners
Use the following CSS to apply rounded corners on a container element:div {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
Use the following CSS to apply a drop-shadow to a container element:div {
-webkit-box-shadow: 0 2px 2px 0 #C2C2C2;
box-shadow: 0 2px 2px 0 #C2C2C2;
}