DEV Community

Cover image for Day 86/100 Font Weight
Rio Cantre
Rio Cantre

Posted on • Updated on • Originally published at

Day 86/100 Font Weight

Finding the right balance on details needed to accomplish the ideal design must value the hierarchy of context and establish possible outcomes to solidify the final result.


The font-weight property can take any one of these keyword values:

  • bold: Bold font weight.
  • normal: Normal font weight. This is the default value.
  • lighter: One font weight lighter than the element’s parent value.
  • bolder: One font weight bolder than the element’s parent value

Numerical values can range from 1 (lightest) to 1000 (boldest), but it
is common practice to use increments of 100. A font weight of 400 is equal to the keyword value normal, and a font weight of 700 is equal to bold.

Code Snippets

let season = 'summer';

if (season === 'spring') {
    console.log('It\'s spring! The trees are budding!');
} else if (season === 'winter') {
    console.log('It\'s winter! Everything is covered in snow.');
} else if(season === 'fall') {
    console.log('It\'s fall! Leaves are falling!');
} else  if(season === 'summer') {
    console.log('It\'s sunny and warm because it\'s summer!');
} else {
    console.log('Invalid season.');
Enter fullscreen mode Exit fullscreen mode

a11y myths

Web accessibility is just a developer's job

It's a team effort. Designers create accessible UIs, developers build it, QA engineers do the accessibility testing, PMs make sure that accessibility is included in the team processes, legal team checks if a product is risk free from an accessibility perspective, content managers adjust content to be compliant.


Top comments (1)

tris909 profile image
Tran Minh Tri

Keep it up. Good luck