Are there any guiding principles for using Capitalization variants in web products (websites, mobile sites, mobile apps)?

Question

By Capitalization variants I mean - All caps, Camel casing, All small.

I want to understand which of these variants should be used in content-elements like Heading, Sub-heading, Navigational-Menu-item-names, Button label, Modal boxes' title, Dialog boxes title, Dialog box text, Dialog box options, etc.

If there are standard rules, for this? Do these rules depend on the font I use, on the font size I am using? Do these rules vary for device - desktop-websites, for mobile-sites/apps? Can I use the same standardizations for iOS & Android devices/OSs? But if there are no standard rules, then how do I standardize the same for my web-product?

Answer 1

I hope not. There could be some design principles in your company. There also are tends that come and go.

Part of design is experimenting. So go and experiment with your project.

Just keep the style consistent.

Answer 2

There are no typographical standards for this to my knowledge, but rather some widespread use cases, followed by best practices. To me it makes sense to look at the use of the each specific text component.

These ones, that you mention: Heading, Sub-heading, Modal boxes' title, Dialog boxes title, Dialog box text, are most often text that's meant to be read and understood for the first time.

And these ones: Navigational-Menu-item-names, Button label, Dialog box options can often have a different character, like signs or other navigational dimensions, that could be recognized more quickly visually than semantically. They are types of components that the user most likely will come across multiple times during the use of an application.

This split calls for a clear differentiation. Using standard text casing for readable text for the first group, and viariations for the second group would be my recommendation. That could be eg. all caps.