Visual Design Considerations | Salesforce1 Mobile App Developer Guide

Fonts and Styles

The visual design for Salesforce1 uses Proxima Nova, a sans-serif typeface licensed specially for Salesforce1. People in your organization might not have the font installed on their devices, but the following CSS font stack will use the closest matching font available:

1p { 
2    font-family: "ProximaNovaSoft-Regular", Calibri, 
3        "Gill Sans", "Gill Sans MT", Candara, Segoe, "Segoe UI", 
4         Arial, sans-serif; 
5}

Change the selectors to match the appropriate text blocks and styles on your pages.

We also recommend slightly increasing the size of the font used for normal text and form elements. This makes them easier to read and, for form elements, to tap into. Here’s a complete style block to get you started:

1<style>
2    html, body, p { 
3        font-family: "ProximaNovaSoft-Regular", Calibri, 
4            "Gill Sans", "Gill Sans MT", Candara, Segoe, 
5            "Segoe UI", Arial, sans-serif; 
6        font-size: 110%;
7    }
8    input { font-size: 95%; }
9</style>

Directly referencing Salesforce1 style sheets in your pages, or depending on styles found in them, isn’t supported. As Salesforce1 evolves, the styles will change in ways that you won’t expect. Pages that depend on unsupported styles might eventually break.

Warning

HTML Markup

If your organization’s Visualforce pages match the full Salesforce site’s look and feel, it’s probably by using the Salesforce header, sidebar, styling, and <apex:pageBlock> and child components. Don’t explicitly disable these elements, by setting <apex:page showHeader="false" standardStylesheets="false" ...>; Salesforce1 automatically disables these elements when the page runs inside it.

However, you might want to reconsider using <apex:pageBlock> and child components, because they explicitly match the full Salesforce site look and feel, and even with standard stylesheets turned off, the markup they generate carries over into Salesforce1. This makes your markup more complex, and it’s harder to apply styling that matches Salesforce1.

Instead, use simple, static HTML markup, or the markup required by your chosen Mobile Toolkit. Sample markup is included the next section.

Responsive Design

Salesforce1 pages use responsive design techniques to provide device-optimized layouts, a stacked single column layout for phones, and a side-by-side, two-column layout for tablets. You can use a similar technique for your Visualforce pages used in Salesforce1.

First, your page should establish a default layout:

1/* Default CSS: 2 columns */
2.content-block {
3    width: 50%;
4    float: left;
5}

Second, use CSS styling and media queries to make the layout responsive:

1/* CSS phone */
2@media screen and (max-width: 767px) {
3    .content-block {
4        width: 100%;
5        float: none;
6    }
7}

Try it yourself in a Visualforce page using this HTML. Place the above CSS snippets between <style> tags on the same Visualforce page as the HTML, and then drag the corners of your browser window to observe the responsive layout.

1<!-- HTML for two blocks of content -->
2<!-- On a phone they live underneath each other -->
3<!-- On bigger screens they live next to each other -->
4
5<div class="content-block">
6    top on the phone, left on big screens
7</div>
8
9<div class="content-block">
10    bottom on the phone, right on big screens
11</div>