Many novice UI designers ask what size unit they should use for their projects, whether for a website or a mobile application. It can be challenging to determine the appropriate size, and it would be helpful to have a comprehensive guide on the subject. This blog provides the latest guidelines and best practices for font sizes for major platforms such as iOS 15, and Android. These size unit guidelines also hold good for material design and responsive web design. If you’re looking for font size recommendations, this is the page to bookmark.
The internet has revolutionised the media. I’ve found that the most influential change is the ability to communicate in two directions. In the past, we had television and radio, where only you could change the channel or turn it off. You had no influence on the content (unless you worked for a television or radio company) and no ability to respond. It was simple, one direct message.
So, how do we communicate with electronic devices today? I can distinguish voice dialling, keyboard, e.g. physical or touchscreen and pointer, e.g. mouse or finger. Going deeper, we have a user interface with interactive elements and buttons and input fields for gathering more detailed information. In this blog post, we try to answer how to design the best input fields.
In UI design, there are various units of measurement, each serving a unique purpose. The units include:
Corresponds to the actual pixels on the screen.
Based on the physical size of the screen.
Based on the physical size of the screen.
1/72 of an inch based on the physical size of the screen.
An abstract unit that is relative to the physical density of the screen. One dp is equal to one pixel on a 160 dpi screen, but the ratio of dp-to-pixel varies with screen density, though not necessarily in direct proportion. Note that “dp” is more consistent with “sp,” though the compiler accepts both.
For specifying font sizes that adapt to screen density and user preference, it is advisable to utilize a unit similar to dp but also scaled based on the user’s favored font size.
This unit takes into account the user’s font size setting, making it an ideal choice for ensuring font size consistency across various devices and screen sizes.
Note that the Android documentation is inconsistent on what “sp” stands for, with some referring to it as “scale-independent pixels,” and others calling it “scaleable pixels.”
EMs(Ephemeral) can be useful for setting padding on a text element in proportion to its size. Each browser has a default font size of 16px, and EMs scale the font size relative to their parent element.
If a font is 16 pixels:
For example, on Webflow, you can also set the font size on a paragraph’s parent element, like a Div block:
When the parent element is 20 pixels:
To calculate a rem value, you take the rem value you want to use and multiply it by the HTML font size, which typically uses the browser’s default font size unless you manually adjust it in your code. One benefit of using rem is that it allows for user preferences for custom text sizes to be respected.
To calculate a rem value, you multiply the desired rem value by the HTML font size, which typically utilizes the browser’s default font size unless manually modified in the code. One advantage of utilizing rem is that it respects user preferences for custom text sizes, allowing for a personalized reading experience.
VH is a measurement of the height of the browser’s viewport that scales proportionally based on the height of the viewport.
VW is a measurement of the width of the browser’s viewport that scales proportionally based on the width of the viewport.
When it comes to user interface (UI) design, two important factors that greatly impact the overall user experience are VMax and VMin. VMax refers to the maximum viewport size, while VMin represents the minimum viewport size. These concepts play a crucial role in creating responsive and adaptive designs that can accommodate various screen sizes and resolutions.
Designing with VMax in mind allows for the creation of interfaces that scale fluidly to fit larger screens without compromising usability. It ensures that the UI elements, such as buttons, text, and images, expand proportionally to utilize the available space effectively. By leveraging VMax, designers can optimize the user experience for users with larger devices, making the interface more immersive and visually appealing.
On the other hand, VMin focuses on the minimum viewport size and ensures that the UI remains functional and legible on smaller screens. Designing with VMin involves careful consideration of the layout, typography, and interaction elements, ensuring they adapt gracefully to limited-screen real estate. It prevents elements from becoming too small or crowded, which could lead to a frustrating experience for users on devices with smaller screens.
Fractional units (fr) operate within any element set to a grid.
In a 4-column grid, each column defaults to 1fr, which means each fr is equivalent to 1/4th of the grid. When adding a column, each fr becomes equal to 1/5th. You have the ability to modify these values, such as setting the first column to 2fr. Fractional units automatically scale elements, ensuring that all calculations, including column gaps, are done automatically.
CH is great for sizing something like a paragraph or a heading to limit the number of characters someone has to read per line.
For example, If a paragraph has a maximum width of 60ch, it takes the selected font (the paragraph’s typeface) and sets the paragraph’s boundary (its box) to equal the width of 60 zeros.
CH lets you set the width of a text element when you’re trying to limit the number of characters (based on the width of the font’s zero character.)
In the world of web and mobile design, it’s crucial to understand the various units of measurement used to define size and resolution. Four commonly encountered units are “px,” “dpi,” “dp,” and “sp.” Each of these units serves a specific purpose and is essential for creating visually appealing and responsive designs.
The print size of an image is determined by its resolution. A resolution of 300 pixels per inch means that 300 pixels from the width and height of the image will be packed into every inch of paper when printed.
To calculate the actual print size, you divide the width and
height of the image in pixels by the resolution value. For example, if your image has a width of 6016 pixels and a resolution of 300 pixels/inch, the image will print at a width of approximately 20.053 inches. Similarly, if the height of the image is 4016 pixels with a resolution of 300 pixels/inch, the printed height will be roughly 13.387 inches.
Although people often claim that image resolution is not significant for on-screen images, it is still crucial to ensure that images contain enough pixels to prevent pixelation, which can cause images to appear blurry or grainy, with individual pixels becoming visible. To maintain image clarity and prevent pixelation, it is advisable to use images with sufficient resolution.
Choosing the optimal font size is vital in UI design. Consider factors like screen size, viewing distance, and user demographics. It’s crucial to understand the difference in typeface sizes between digital and print media, as pixels are perceived differently. Legitimacy should not be compromised on either medium. Prioritise readability, establish hierarchy and use responsive design, effective white space, and contrast. Test and iterate based on user feedback.
By following the principles and best practices outlined in this guide, UI designers can select the optimal font sizes to enhance the readability and usability of their designs, ultimately improving the overall user experience.
Got some more useful tips for ui dashboard design? Get in touch with us, we’d love to hear your thoughts.