Questions tagged [typography]

Typography is the art, process, or style of setting type and creating glyphs.

Filter by
Sorted by
Tagged with
3 votes
1 answer
164 views

Why is monospaced text often smaller than regular text?

I often see that monospaced text is smaller than regular text in the same context. Here are some examples: Crafting Interpreters has the main font 16px large and the monospaced font 13px large. ...
matj1's user avatar
  • 31
0 votes
1 answer
102 views

How to scale typography and UI for different mobile device resolutions?

We have an iOS and an Android tailored application. We noticed that on small devices, the UI becomes very large with texts not fitting properly, either truncating or going to another line (this ...
Velionis's user avatar
1 vote
2 answers
298 views

Do I need to follow scale while defining typography in design system?

I'm confused if I should use scale or not while defining our typography. While using it I'm not able to use 14px and 16px at the same time plus it's giving font sizes like '16.80'(just an example) and ...
Kritarth's user avatar
  • 126
4 votes
1 answer
170 views

How do unicode block characters affect accessiblity?

I'm formatting an online poem that uses blackout text for erasures. My plan is to use an XML block character ( █ █) or █) to replace the appropriate characters. Does this have any ...
Sirmontegu's user avatar
0 votes
2 answers
80 views

How do you manage spacing between text styles in different context?

I am using texts in different context and thus I am changing the padding depending on the context. (as in the attached image) Regarding collaboration with developer what is the good practice ? ...
chamou2099's user avatar
0 votes
1 answer
789 views

Using Display S, M, L, XL, 2XL instead of H1 -H6 for typography in a Design System Manager (DSM)

I find using specific H1 - H6 is confining since different pages may need a different size H1 and so on. Also instead of making 2 sets for desktop and mobile this would work as one file. Does anyone ...
Keano's user avatar
  • 71
0 votes
2 answers
251 views

What is the best practice for designing apps for 320px wide?

I'm worried about my content placement on narrow screens. Should I shrink my fontsize for iPhone SE, for example? Specially when iOS keyboard is so big on 320px small screens. My layout in Figma is ...
Petr A.'s user avatar
  • 21
0 votes
1 answer
57 views

How to give name while creating Typography in Design Systems?

How to give name while creating Typography in Design Systems? which of the following is most common when naming typography?
 System default typography naming. (or) Create your own set of naming.
 ...
Saba's user avatar
  • 1
0 votes
2 answers
698 views

APCA (WCAG 3.0) does not allow for 14px font to be used as a regular base

According to APCA (WCAG 3.0), we are not able to use 14px font as a regular base, but when it comes to SaaS application design, 14px is commonly used as the base font size. Despite my attempt to use ...
Iroshan De Zilva's user avatar
0 votes
1 answer
122 views

Typgraphy - hanging punctuation (indent list or not for better readablity)

In a body of text that contains both paragraphs and ordered and unordered list. Does it matter to indent the list items - by default, most browsers indent list items 16px? The list in the following ...
mahan's user avatar
  • 121
1 vote
3 answers
276 views

Design system – Different font sizes for small an big viewports

everyone! We are currently working in a project team on a design system that is primarily used to develop web applications. These web applications mainly consist of forms. One requirement here is that ...
s-lauer's user avatar
  • 21
2 votes
3 answers
3k views

What is the ideal font size to be used in dashboard?

I came across many websites that use 14px for the content in the dashboard and outside i.e Website's homepage tends to use a bigger font size. So the question is a) What is the ideal font size for the ...
NB4's user avatar
  • 2,491
0 votes
1 answer
172 views

How do you handle spacing from text to other UI elements?

I do not know how to handle spacing between text and other elements of the UI. If I want to separate my text from another element with a spacing of 16px should I start to measure from the end of the ...
Luis Vásquez's user avatar
7 votes
5 answers
1k views

How to choose typeface (fonts) for a website in different locales?

Part of a good UX for websites and web applications that support multiple languages is their fonts. Let's imagine that English is not the default font on the web and another nation has created the web ...
Saeed Neamati's user avatar
1 vote
2 answers
150 views

UX for typing/editing a fantasy script

I have a fantasy script which looks like this: (Just the text part) What is the best UX in terms of typing the characters, given the characters aren't in Unicode? Also, there are more than ASCII ...
Lance's user avatar
  • 441
0 votes
0 answers
314 views

How to define label text vs body text?

I am setting up the initial typography style guide for a mobile fintech application, the issue I am stuck with is how to communicate what part of content needs to use "label" style vs "...
AASHISH METHANI's user avatar
3 votes
2 answers
478 views

What is the name for the design pattern of large numbers to convey statistics?

Usually presented on website homepages, the purpose of this design pattern is to present a quick top-level overview of the company in numbers, aiming to convert visitors by establishing credibility ...
Hashim Aziz's user avatar
3 votes
2 answers
128 views

Why do web paragraphs break, while print paragraphs indent?

Both indentations and line breaks create a strong disruption that signals "this is a new paragraph" to the user. Question: Several decades into web browsers becoming a major form of ...
Izquierdo's user avatar
  • 12.7k
4 votes
2 answers
5k views

Accessible line height for headings (h1, h2, h3, etc)

We are working on making our product's typography WCAG accessible. This is what MDN says regarding the line-height: Use a minimum value of 1.5 for line-height for main paragraph content. This will ...
uDima's user avatar
  • 95
0 votes
2 answers
13k views

Text size for navigation bar should be same, bigger or smaller than 16px?

The default font size is 16px, but I don't know if the font size of the navigation menu should be the same (16px), smaller (14px) or bigger than 16px. I think that bigger than 16px is going to be ...
Bea Gomez Perez's user avatar
0 votes
1 answer
138 views

Width of a page that contains mostly text [duplicate]

I'm working on a design for a blog. The blog is very text oriented. It contains long articles of thousands of words. When I look around the web I see that blogs often have a 'fixed width' page size (...
Gerlof Leuhof's user avatar
17 votes
10 answers
4k views

Ways to improve readability of recipe ingredients?

I am building a recipe website and I'm trying to improve the readability and scannability of the ingredient lists. I've tried a bunch of different options but I'm not sure what is best. Here are some ...
StackOverflower's user avatar
2 votes
1 answer
95 views

How to deal with style leading to ambiguous situation?

There is a small set of style rules which can make text ambiguous. This is usually not a problem in books, where the ambiguity is not a big deal, but could be a problem in technical documentation. ...
Arseni Mourzenko's user avatar
12 votes
5 answers
1k views

Readability between sans serif and serif for "foreign language users"?

I am curious about whether "foreign language users" find a difference in readability of text between sans serif and serif. Here, I am defining "foreign language users" as people whose primary/first ...
XYZT's user avatar
  • 220
3 votes
3 answers
224 views

Increase navigation width to contain long nav item or reduce font size?

I have a side navigation that is in use in all of the web app. Now we have to create a new section that is, unfortunately, longer than all the previous side nav items. Please note that the nav item ...
Oluwatobi Mayowa's user avatar
0 votes
2 answers
333 views

Should vertical spacing make every list point a paragraph?

Quite often lists in continuous texts are typeset in such a way that the vertical spacing between points is greater than the regular line spacing in the same text. Well, like lists here, at SE: just ...
homocomputeris's user avatar
1 vote
2 answers
300 views

Typewriter text effect usability

I've been asked to implement, and have seen this typewriter effect on a number of web sites: https://mattboldt.com/demos/typed-js/ Typically it is in the header with 3 or 4 sentences about what the ...
Jeff S.'s user avatar
  • 223
1 vote
0 answers
526 views

What is the recommended Type Scale for E-commerce sites?

I'm a designer, working on a project to redesign an E-commerce site. To improve readability, I would like to increase the font size as well as white space etc. I would like to use a Type scale to ...
Wuggie's user avatar
  • 11
2 votes
1 answer
60 views

Empowering users to make beautiful/creative text pictures with "text filters"?

Complicated question but will try to explain as I really need help here :). As part of university work in design/film, I'm working on a UI design project that is going to be a tool for other students ...
antimicrobial's user avatar
-4 votes
1 answer
81 views

What font is this? [closed]

Please help me to find what font is this also suggest me the website where I can upload image and get the font type.
vaibhav Kothari's user avatar
4 votes
2 answers
342 views

Images look bad with perfect paragraph width

I'm working on a WordPress template and trying to maintain perfect line width of ~70 characters. My blog has a lot of posts and most of the post contain at least one image per paragraph, usually more. ...
Wordpressor's user avatar
3 votes
2 answers
326 views

Should emoji/emoticon replace a punctuation mark in the end of the sentence? [closed]

If the sentence is finishing with emoji/emoticon in the website content or in a personal message, should it be followed by a punctuation mark? Example #1 I’m glad you could make it 🙂 We had a ...
Pavlo Grubyi's user avatar
1 vote
2 answers
56 views

Typography for arrow-linked list on several lines

I’m working on a text-based UI (no graphics other than text) which lists food items ordered one after the other. These food items are connected one another with an arrow symbol. For example: “Food A -...
EsaiG's user avatar
  • 13
2 votes
1 answer
1k views

When to use Apples 'SF Rounded' font?

Apple uses in certain cases 'SF Rounded' for big titles and number values (e.g. Apple Pay Transaction Detail), in many other cases they still use the regular SF font (e.g. calculator, timer app). Is ...
Florian Westermann's user avatar
8 votes
2 answers
257 views

Typography design for multi-language supported app

I'm designing a mobile app with target users who speak Japanese, Chinese and English. I tend to use system font instead of distributing fonts with app, because the build size will be large due to ...
RP Osaka's user avatar
0 votes
1 answer
114 views

Which is the best approach for Laying down the text on first scroll of the website?

The wireframes are for a product website, which is a suite of online products that can be used together or as individual modules. Option1 has a traditional HEADING-BODY COPY approach. The most common ...
Angiras Joshi's user avatar
23 votes
1 answer
6k views

Why commonly or frequently used fonts sizes are even numbers like 10px, 12px, 16px, 24px, or 32px?

There are some sites still use odd numbers for font sizes, but why we used "commonly" even numbers? OR appears on default in selecting font sizes usually at 12px.
Sknny's user avatar
  • 1,332
1 vote
1 answer
96 views

Use variable font to thin larger headings

I remember Microsoft Office 2007 introduced a style of headings that got lighter as the heading size got bigger. Now we can use variable fonts in websites, what about keeping the colour the same, but ...
Billy Moon's user avatar
2 votes
4 answers
1k views

What would you call a font size between "small" and "regular"

I have these tokens in a design system for font sizes: tiny small ??? regular medium large huge mega giga Design needs to add a size between small and regular and I'm stuck trying to find something ...
Yann's user avatar
  • 131
1 vote
2 answers
950 views

Styling text on black background for easy readability in a content heavy website.

I am currently working on a project where client wants the site to have black background. It is a community/ forum style website for long discussions. I am having difficulty on styling text on black ...
Komal's user avatar
  • 11
8 votes
1 answer
932 views

Should U+2236 RATIO be used as a time separator instead of U+003A COLON?

In a recent entry of Raymond Chen’s blog “The Old New Thing”, he explains how the time format was changed in Windows 8 to use the Unicode character ∶ (U+2236 RATIO) instead of : (U+003A COLON): old: ...
Socob's user avatar
  • 183
1 vote
1 answer
11k views

Why monospaced fonts are not used as frequently as serif and sans-serif fonts, outside coding?

We see sans-serif and serif fonts everywhere, from the web to printed books and newspapers. I'm wondering why monospaced fonts are not popular outside coding context? Here is a simple comparison I ...
ammar's user avatar
  • 129
3 votes
4 answers
3k views

Looking for research regarding pure black vs dark gray for readability

I've heard people say that websites with pure black text on a white background can cause exhaustion when reading, and that it's better to use a very dark gray text or a light gray background color to ...
Kurtis Beavers's user avatar
1 vote
4 answers
2k views

Should icons always be the same color as the accompanying text?

I'm designing a timeline in which certain "event cards" are interactive while others are not. I'm running into a problem where the icons on the non-interactive cards look very dark, and therefore ...
Conor's user avatar
  • 533
1 vote
0 answers
176 views

Workflow for How Typography Layout Should Be Specified

This is sort of a user experience and graphics design question, but it seemed better as user experience. To start, good text has good typesetting. This sometimes means per-letter spacing adjustments, ...
Lance's user avatar
  • 441
5 votes
2 answers
4k views

Why center align text in 2018? [closed]

I feel like in 2018 I see more centered blurbs and paragraphs on the web. Centered text is a real problem for me because I can't read it. It makes my eyes spaz and my head avert. Am I the only one ...
ryanve's user avatar
  • 225
3 votes
1 answer
204 views

UI based on individual data / dynamic / generative

I am looking for examples where the UI is designed based on the individual user data. Not just a customizable profile page, more automated individual color palette / layout / typography / ??? ...
LrnzLngg's user avatar
2 votes
2 answers
263 views

How opaque should a secondary text be?

There is a debate between the UI and the UX staff about "How opaque should a secondary text be?" This is the example UI: The design is meant to be minimalist. We use only black & white, no ...
adelriosantiago's user avatar
1 vote
4 answers
652 views

How do you define typography styles in your designs?

When defining a style guide, which of the following is most common when naming layout components? Stating the specific H-levels to be used (i.e. H1, H2, etc.) Create your own set of naming ...
Kata's user avatar
  • 275
0 votes
1 answer
562 views

Comfortably legible base font-size?

I'm trying to figure out a comfortably legible base font-size for all screen sizes, on a platform that supports several languages. Anyone worked on a similar project? If so, what was your outcome and ...
Aly's user avatar
  • 11