Comments (3)
@nhoizey That's a very interesting way of defining font size. Congrats on that. But can you please elaborate how you got to this specific value .8em+.3vw+.3vh
? What reasoning did you use?
But in general I think your font size settings are the way to go in the typographic world of things. It's just that you should also include/incorporate some sort of content width/content grid and font family into this expression. If we look at typographers' text block width table this should become the golden standard of setting readable font size based on text block width and font used. Viewport size may even be obsolete unless it's content uses 100% its width.
The usual typographer's bible (Elements of Typographic Style — Robert Bringhurst) has this table with width/font size/character count values
If I have to create a website for readability I try to base sizes according to my grid/text block size and this table or at least approximate on it.
from css-protips.
@AllThingsSmitty thanks for reading it! ;-)
html { font-size: 1em; }
is useless, as it is the default value. So I would advocate for nothing at all.
To be honest, I now use something a little more complex on the body
to add some fluid responsiveness to my font-size
, but I don't touch the html
font-size
at all and the value on body
is meant to be equal to 1em
or more, depending on viewport sizes.
from css-protips.
@nhoizey thanks for the feedback. Your post is interesting. Are you advocating more for just html { font-size: 1em; }
to let the default value be interited per browser?
from css-protips.
Related Issues (20)
- Some misunderstandings about adjacent sibling combinator (+) as alternative way of using :not() pseudo-class HOT 4
- Different language HOT 1
- [Suggestion]CSS for ebooks
- Translations HOT 1
- Animation to any element HOT 5
- Edge now supports "all" keyword HOT 1
- Add tip: wrapper utility HOT 2
- good jop
- Add tip: Using Aspect Ratio instead of usual Margin and Padding HOT 6
- Add tip: Adding CSS Libraries like bootstrap and making this repo more elaborate. HOT 1
- Css pro tips
- Suggestion: Turn this collection of tips into a github pages site. HOT 1
- Max Function for Max-Width HOT 1
- How do I overlay an image over the background one ? HOT 4
- How to wrap a title into respective multiline headings.? HOT 1
- Placeholder Selector HOT 2
- List of links, can't add style with CSS HOT 1
- Add responsiveness with Key Frames HOT 6
- Readme upgrade HOT 3
- Css pro tips
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from css-protips.