The free button design templates for Photoshop are especially cool because they are set up to precisely fill a page for letter size printing using the Fill with Pattern feature in Photoshop. And hey, if you like our software and button maker templates, please support us by buying your machines and supplies from us! The SBA’s size standards determine whether or not your business qualifies as small. Welcome to Free Buttons.com! Enhance your website with the quality Free Buttons images provided here. Original & professional buttons sets, perfect for any website design project. Choose from a varied selection of free custom hand made buttons. If you use any of the images provided on this site, make sure to put a link back to FreeButtons.com. May 12, 2019 For CTA buttons I like to use rounded buttons as they are striking and eye-catching. Primary action. While a CTA button and a primary button can look the same, I like to separate them out. While CTA buttons are what the interface would want you to do, primary buttons should be a strong visual indicator to help the user to complete their journey.

You’re reading Font Sizes in UI Design: The Complete Guide. Quickly navigate to other chapters: Intro · iOS · Android · Web · Principles

In this post, we’ll cover what font size to use for a responsive website. First we’ll cover mobile guidelines, then desktop guidelines. Ready?

Mobile Web Typography Guidelines

Picking font sizes for a mobile site is not an exact science. Instead, I will give a few guidelines (with rationales) to help you in your own design process.

1. Body fonts should be about 16px

Understanding that different fonts can be more or less legible even at the exact same size, 16px is a good place to start when choosing your default mobile font size. By “default” or “primary”, I mean the size that most paragraphs, labels, menus and lists are set to. (Let’s assume you’ve already picked a font – and have a good rationale for doing so)

Ultimately, you want the body text on your phone (when held at a natural distance) to be as readable as the text in a well-printed book (when held at a natural – usually slightly farther – distance).

One process for getting there:

Web Button Standard Sizes Toilets

1. Start with 16px
2. Consider going smaller if you have (A) have an interaction-heavy page or (B) a font with particularly large, easy-to-read characters (like Proxima Nova in the image above)
3. On the other hand, you can be much more liberal with exploring sizes larger than 16px, but in particular if (A) you have a text-heavy page or (B) a font that is particularly difficult to read at a given size (like Futura above)

While there’s some subjectivity to the best primary font size to use on the page, the next rule is more hard and fast.

2. Text input sizes should be at least 16px

This is important. If you’re designing a website or app that can be viewed on mobile devices, there is only strict rule: Use a text input font size of at least 16px.

If your text inputs have a smaller font size than that, iOS browsers will zoom in on the left side of the text input, often obscuring the right side and forcing the user to manually zoom out after using the text box.

Video or it didn’t happen, right?:

This is a strong reason to make the body font size 16px or larger as well. It can look awkward to have larger form control text than paragraph text ☝️

3. Secondary text should be about 2 sizes smaller than your paragaph text

For secondary text – like lesser labels, captions, etc. – use a size a couple notches smaller – such as 13px or 14px. I do NOT recommend going down just one font size, since then it’s too easy to confuse with normal text. In addition, when text is less important, you want to style it so that you’re clearly communicating the lesser importance – often using, say, a lighter shade of gray (something about 70% as strong is a good place to start).

4. Always view your designs on an actual device

The gold standard of choosing mobile font sizes is to view your designs on an actual device. I can’t recommend this practice highly enough, since the feel of an mobile app design on your laptop screen is way different than when you’re holding it in your hand. As a beginning designer, I was shocked almost every time I opened on mobile a page I designed on desktop. Font sizes, spacing… everything was off. So use Sketch Mirror or Figma Mirror or whatever app makes sense for you, but view your designs on-device.

5. Be familiar with Material Design and iOS standards

It never hurts to know what the biggest design systems in town are doing. For instance:

• Material Design’s default font size is 16px Roboto and secondary font size is 14px (more on Material Design styling)
• iOS’s default font size is 17px SF Pro and secondary font size is 15px (more on iOS styling)

Do you need to copy them? Nope – but it never hurts to have a baseline to compare to.

Desktop Web Typography Guidelines

When picking a base size for a desktop website or web app, you can break down most designs into one of two types:

1. Text-heavy pages. Articles, blogs, news, etc. These are pages where the primary purpose the user has on the page is to read. There is very little in terms of interaction – perhaps just clicking a few links.
2. Interaction-heavy pages. Apps that involve more hovering, clicking, searching for an item in a list or table, editing, typing, etc. There may be plenty of text on the page, but it’s not stuff you read straight through like a book.

Need an example or two? This page is a text-heavy page. Your Facebook feed is an interaction-heavy page. Each has slightly different concerns, so I’ll handle them separately. Keep in mind that both will probably be useful. The “About” page of a crazy web app is still text-heavy. The “Contact” page on a vanilla blog is still interaction-heavy.

Text-Heavy Pages

Long story short, for text-heavy pages, you want larger font sizes. If folks are reading for long periods of time, be nice: don’t make them strain their eyes. Now, each font is different, even at the same size, but we’re talking:

• 16px – absolute minimum for text-heavy pages
• 18px – a better font size to start with. You’re not printing out a single-spaced Word document; you’re writing for people sitting a couple feet from their decade-old monitors.
• 20px+ – may feel awkwardly large at first, but is always worth trying out in your design app. The best-looking text-heavy site on the web, Medium.com, has a default article text size of 21px.

Similar to what I mentioned in the mobile web section, there’s a great rule of thumb here: your website’s text (viewed at typical monitor distance) should be as readable as a well-made book (viewed at typical book-holding distance). This is actually a really annoying and dorky exercise to perform, because you have to shut one eye and squint at a book you’re holding up like a moron. But find a nice, solitary place, and sanity-check: is my font size readable even at a couple feet? Even adjusting for my young and powerful eyes? OK, you get the idea.

Interaction-Heavy Pages

Now, for interaction-heavy pages, smaller text sizes are perfectly acceptable. In fact, depending on the amount of data your user is taking in at once, even 18px text is uncomfortably large. Look at your (web) inbox, look at twitter, look at any apps you use that require scanning over reading, look at apps that show you data – you’re going to be hard-pressed to find sustained paragraphs of 18px text. Instead, 14px-16px is the norm. But there won’t be just one font size. There will likely be smaller sizes for less important things, and larger sizes for more important things (titles and subtitles and sub-subtitles, etc.), and it’ll all be blended together in a giant hodgepodge.

Now here’s the important part: for any interaction-heavy page, the font sizes are driven LESS by some top-down decrees (“type scales”, I’m looking at you) than the specific needs of each piece of text and the interplay between them.

For example:

• The event names are in 12px medium, which is a font style entirely absent from the Material Design guidelines. Yet given they need to fit 7 columns on a screen that’s only 1440px wide, and many events are quite short, this is an ideal font size choice. Any smaller and legibility suffers. Any bigger and the event names will be cut off too frequently. Design is tradeoffs, kid. If you can’t name the tradeoff you’re making, you’re probably making it in the wrong place.
• The hours of the day labels (“12pm”, “1pm”, etc) are font-size: 10px. That’s another style missing entirely from the Material Design guidelines. Yet horizontal space is at a premium. Each event is labelled with its start time anyways. Why not make the left-hand labels smaller?
• The dates are 48px. Again, not found in Material Design guidelines. Now, in this case, I don’t know why they didn’t use 45px, which is the official “Display 2” size, but I’ll say this: if it had been me designing, I probably would have made the 48px size bold, and here, bold would be an issue. It would attract too much attention. So I would’ve modified the style anyways.

When you’re designing your interaction-heavy desktop website, keep this in mind. You need to modify text styles on a case-by-case basis. Consistency is wonderful, but no one gets mad when a font size is one px too small – they get mad when they can’t easily find what they’re looking for.

As Few Font Sizes as Possible

One of the single biggest typographical mistakes from beginning UI designers is to use way too many font sizes. Even the most interaction-heavy pages can typically look just fine with about 4 font sizes total.

Let’s break it down:

1. Header font size. This is the biggest font size on your page. Use it for the headline or section titles. If you have both a headline and section titles, you should almost certainly be using two different font sizes here.
2. Default font size. This is the most common font size on your page, and should be used for all body text – as well as most controls, like text boxes, dropdowns, buttons, and menus. The key header mistake beginning designers make here is to use many font sizes for elements that should all be one font size.
3. Secondary font size. This is a font size – usually about 2pt smaller than your default font size – that you use for less-important details of the site. Supporting information and stats, sometimes captions, etc.
4. Tertiary/caption/label/wildcard font size. Very often you will need one more font size. Sometimes it’s because your information is so hierarchical you need a tertiary style even more subdued than the secondary style. Other times, you might use uppercase for labels or buttons – and because of the increased visual weight of the uppercase, you want to use a slightly smaller size for the text itself (remember: balance up-pop vs. down-pop). So this fourth font size is a bit of a wildcard. Not every design needs it, but many do. My only warning: as much as possible, default to consistency.

Make sense? Let’s move on.

Continue to Chapter 4: Principles & Resources

One Final Note 😎

If this is your first time here, you might also be interested in:

• Learn UI Design, my full-length online video course on user interface design
• The Design Newsletter, a 40,000+ person newsletter with original design articles aimed at giving you tactical advice to improve your UX/UI skills.

Some people have some really nice stuff to say about the newsletter.

Thank you for your newsletter. It’s possibly the best newsletter I’ve received since 1999, when I started freelancing.

Tricia Littlefield
Founder, TheSimpleWeb

Each time I receive an email from you, I'm like ‘Damn, this is a long email! No way will I read all of this’, then I began to read and I'm like ‘Damn, this is so freaking brillant’ and read it all.

Jean-Philippe
UX Strategist, Freelance

Over 40,000 subscribed.
No spam. Unsubscribe anytime.

Buttons allow users to trigger an action. There are 4 button types:

• Simple button for one action
• Toggle button to switch between different states
• Segmented button with a group of options
• Menu button with a group of actions

Use the button types as follows:

• Use simple buttons for specific actions, such as:
  • Create, Edit, Save
  • Approve, Reject
  • Accept, Decline
  • OK, Cancel
• Use toggle buttons in a toolbar to activate or deactivate an object or element. You can also use toggle buttons to switch between different states.
• If you want the user to select one option from a small group, offer a segmented button in the toolbar. For example:
  • Year, Month, Day
  • Small, Medium, Large
• Use the menu button if you need a menu that provides more than one option.

Do not use buttons if:

• You want to link to a different page or object. Use the link instead.
• You want to let users upload content. Use the upload collection control instead.

The button usually grows to fit the size of the text. If you set a fixed size for the button, the text truncates.

If the button is used in a responsive container or toolbar, it follows the responsive behavior defined for that element. For example, the button can move to another line.

The maximum width of the menu button is 12 rem (192 px). If the button text exceeds the maximum or fixed width, it truncates.

On smartphones (size S), the menu opens in a full screen dialog, and the button label becomes the title of the dialog. The footer contains a Cancel button. Items with submenus become navigable. Navigation is similar to that used in a popover, with a Back button.

On tablet and desktopdevices (sizes M and L), the menu button triggers a cascading dropdown menu.

Buttons can trigger primary, secondary, semantic, and negative path actions. These different action types are explained in more detail in the action placement guideline.

Header and Footer Toolbars

Use the following button styling for the different action types in the header and footer toolbar:

• Primary action: Use the emphasized button style.
• Secondary action: Use the ghost button style.
• Semantic action: Use the semantic buttons for positive and negative actions. Use the “accept” style for positive actions, and “reject” for negative actions. Semantic actions must always be text buttons.
• Negative path action: Use the transparent button style.

Content Toolbars

Use the following button styling for the different action types in content toolbars (for example, in tables, forms, or charts):

• Primary action: Use the emphasized button style. Usually, the primary action is positioned in the header or footer toolbar. Note that there can only be one primary action per page. If a page already has a primary action, but you also need to highlight the most important action in a content toolbar, use the ghost styling for this one button in the content toolbar.

• Secondary action: Use the transparent button style.

The different button styles are designed to give appropriate feedback to users. Don’t use them for decoration purposes.

A toggle button switches between two actions. One of the actions is always active, one is inactive. Use the toggle button for secondary actions.

Apply the following button styles for the different toolbars:

• Header and footer toolbars: Use the ghost button style.
• Content toolbars: Use the transparent button style.

A segmented button shows a group of options. Only one of the options can be active, the others remain or become inactive. Pressing an option activates it. By default, the control for segmented buttons calculates the button width and applies it to all buttons within the group. You can change this by setting the width for individual buttons.

The segmented button is comparable to a radio button group control.

There are two different types of menu buttons. Both can contain items with submenus.

Regular Menu Button

When the user activates the button, the menu opens. This is the default type.

Split Menu Button

The split menu button is separated into two areas: the text label and the icon. The separator between them signals that the two areas result in different actions. The user has two choices: activating the text label on the button triggers the action. Activating the arrow opens the menu. The split button consolidates a variety of commands, especially when one of the commands is used more often.

In split mode, the text label depends on the default action. If the default action is displayed as an icon only, all the menu items must contain icons.

Split Menu Button Behaviors

The split menu button can have two different behaviors:

1. The button always triggers the default action set by the app developer. If no default action has been defined, the first item in the menu list becomes the default.
2. The button triggers the last action chosen by the user. Initially, it also triggers the default action. However, when the user selects a different action, this user action becomes the default, and the button text label changes accordingly. The button has a fixed size and the text truncates if the menu item exceeds the available width (as with the combo box).

Toolbars

Apply the following menu button styles for the different toolbars:

• Header and footer toolbars: Use the ghost style.
• Content toolbars: Use the transparent button style.

A button can contain an icon OR a text.

Always use a text button for primary, secondary, semantic, and negative path actions.

Use icon buttons only if the icon metaphor is easily recognizable. Ideally, it should have same meaning worldwide. For more information about icons in general, check out the article on iconography.

Badge

The standard button can contain an optional badge. The badge acts as a visual eye-catcher and attracts the user’s attention. It shows a number and is typically applied in browse and collect use cases. For example, it can display the number of items in a shopping cart.

Use the badge in combination with one of these button styles:

• Emphasized (as a primary action)
• Ghost (as a secondary action)
• Transparent (as a secondary action)

The number of the badge must always be a whole number (1, 2, 3, …) and cannot be smaller than 1. If 0 or minus items are in the basket, the badge is not displayed. If the number exceeds 4 characters, such as 9999, it is truncated to 999+.

The position of the badge (attached to or on a button) can vary depending on the content density.

To trigger the action, the user clicks the button, toggle button, or segmented button using a keyboard, touchscreen or screen reader. The button provides visual feedback for “hover”, “press-down”, and “focused” states.

• A toggle button remains in the pressed state until it is pressed again.
• In a segmented button, the chosen option stays active until the user presses one of the other options.
• A menu button displays a dropdown menu on activation.
• In a split button, selecting the button text triggers that action directly. Activating the arrow opens a dropdown menu. If the user selects a menu item, the action is triggered and the menu closes.

If an action cannot be triggered, or is temporarily unavailable, use the disabled state for the corresponding button.

How To Set The Size Of Button In HTML - Stack Overflow

If you want to switch a text, icon or tooltip after a button click, bear in mind to use the invisible message control to also convey the information to screen reader listeners.

All three button types support the cozy and compact form factors. For more information, check out the article on content density.

Button Text

• Choose a button text that is short and meaningful. Check out the UI text guidelines for more information.
• Use a verb in the imperative for all actions (for example: Save, Cancel, Edit).
  Note: The grammatical form for actions can differ for other languages. For example, German action labels use the infinitive (Sichern, Abbrechen, Bearbeiten).
• Keep in mind that the text can be up to 300% longer in other languages.
• If you need to show the number of items that will be affected by the action of the button, you can add the number in parentheses. For example, Edit (3).
• Do not change the text or icon of a toggle button when it is pressed. Screen readers announce the “pressed” state for the action. If you use a different text for the pressed state, the screen reader announcement doesn’t make sense.

Icon Buttons

• Make sure the default accessibility text for the icon is correct for your use case. If the text is not ideal, define an app-specific accessibility text.
• Offer a tooltip to show the label for icon buttons.
• Don’t use the icon control for buttons. Use the icon property for the button instead.

• You can use the button shortcut control to show the keyboard shortcut for an action. The keyboard shortcut appears on hover or on keyboard focus, and its positioning (top or bottom) is context-dependent. When a tooltip is needed, it is combined with the shortcut information.

Elements and Controls

Web Page Sizes Standard

• Action Placement (guidelines)

Web Page Standards

Implementation

Web Button Standard Sizes Dimensions

• No links